前言还在为原生 JS 写页面 “东拼西凑” 头疼还在为 HTML 和 JS 交互写一堆繁琐逻辑好了我们聊了这么久的JS相信大家对 JS 已经有了一定的基础了。接下来我们开始接触前端框架带大家了解--React。一、React让前端开发效率翻倍的 JS 框架相信学习前端的小伙伴对React这个词并不陌生但又不知道它具体是个啥。大白话来讲它就是让 JS 开发 “开挂” 的框架。简单来说React就是来 “救场” 的JS 框架它把网页拆成 “组件”像搭积木一样拼出整个页面还能用JSX把 JS 和 HTML 揉在一起写直接让开发效率起飞二、开局第一步搭建 React 项目环境想玩转React先把开发环境搭好主流有两种方式按需选择1.create-react-app官方 “傻瓜式” 脚手架React 官方推出的项目创建工具无需手动配置 webpack、babel 等底层工具一行命令就能生成完整的 React 项目# 创建项目 npx create-react-app my-react-app # 进入项目目录 cd my-react-app # 启动项目 npm start优点是省心、稳定适合 React 新手入门缺点是项目体积较大启动速度稍慢。2.Vite新一代 “极速” 构建工具如今更推荐的轻量化选择启动速度、热更新效率远超传统脚手架创建 React 项目更高效:# 创建ViteReact项目 npm create vitelatest # latest是选择最新版本 # 你创建的项目名字 my-vite-react # 选择 React JavaScript 然后一路Enter # 进入目录 cd my-vite-react # 安装依赖 npm install # 启动项目 npm run dev启动后就能看到 Vite 默认的 React 项目结构核心入口文件就是main.jsx—— 这是整个 React 项目的最外层入口所有组件最终都会通过它挂载到页面上。三、JSXReact 的 “语法糖”让 JS 和 HTML 无缝融合JSX 的本质是 “JS XMLHTML”看似写 HTML实则是 JS 的语法扩展用它写界面比原生 JS 简洁 10 倍但使用时要遵守核心规则1. 核心规则JSX 里只能放 “表达式”不能放 “语句”表达式有返回值的代码比如变量、算术运算、数组方法、三元运算用{}包裹就能嵌入 JSX语句无返回值的执行逻辑比如 if、for 循环不能直接写在 JSX 里需转换为表达式形式。2. 实战 1列表循环渲染核心高频场景原生 JS 写列表需要手动创建 DOM、循环追加代码繁琐ul idul !-- 得写 for 循环 createElement appendChild -- /ul script const arr [1,2,3]; // 手动循环 创建 DOM代码冗余 for (let i 0; i arr.length; i) { const li document.createElement(li); li.textContent arr[i]; document.getElementById(ul).appendChild(li); } /script这种原生写法用起来就非常麻烦而且代码也多。但 React 的JSX 列表渲染直接 “声明” 要渲染的内容React 自动帮你生成 DOMexport default function App() { const arr [1, 2, 3]; // map是表达式返回新数组可直接嵌入JSX return ( ul idul {arr.map((item, index) ( !-- 循环渲染必须加 key唯一标识每一项 -- li key{index}{item}/li ))} /ul ); }进阶版渲染复杂数据列表:export default function App() { const songs [ { id: 1, name: 稻香 }, { id: 2, name: 夜曲 }, { id: 3, name: 晴天 } ]; return ( ul {songs.map((item) ( li key{item.id}{item.name}/li ))} /ul ); }3. 实战 2条件渲染按需展示界面需求根据条件展示不同内容不能直接写 if 语句用三元表达式表达式实现export default function App() { let flag true; return ( div {/* 三元表达式是表达式可嵌入JSX */} h2{flag ? 我比他帅 : 他比我帅}/h2 {/* 进阶逻辑与运算flag为true时才显示 */} p{flag 只有flag为真才显示我}/p /div ); }4. 实战 3样式处理三种常用方式JSX 中写样式和原生 HTML 有区别结合图片中样式代码三种方式全覆盖1行内样式对象形式原生 HTML 用stylecolor: redJSX 需用对象包裹属性名用小驼峰export default function App() { const styleObj { color: red, fontSize: 20px // 小驼峰对应 CSS 的 font-size }; return ( div div style{styleObj}帅哥/div {/* 也可直接写对象 */} div style{{ color: blue, fontWeight: bold }}帅哥/div /div ); }这里提一嘴JSX表达式必须要有一个父元素(2类名样式classNameJSX 中不能用class保留字需用className配合 CSS 文件/* index.css */ .home { background: #f5f5f5; padding: 20px; }// App.jsx import ./index.css; export default function App() { return div classNamehome首页/div; // 对应图片中 className 代码 }3动态类名结合表达式按需切换样式export default function App() { const isActive true; return ( div className{box ${isActive ? active : }} 动态样式 /div ); }5. 实战 4事件绑定交互核心原生 HTML 用onclickJSX 用小驼峰onClick且绑定的是函数而非字符串:1基础事件绑定export default function App() { // 定义事件处理函数 const handleClick () { console.log(点击了div); }; return ( // 直接绑定函数不加()加()会立即执行 div onClick{handleClick}hello/div ); }2事件传参需用箭头函数包裹才能传递参数export default function App5() { const songs [ { id: 1, name: 稻香 }, { id: 2, name: 夜曲 } ]; // 带参数的事件函数 const handler (name) { console.log(点击了歌曲, name); }; return ( ul {songs.map((item) ( li key{item.id} // 箭头函数传参点击时执行handler并传入歌曲名 onClick{() handler(item.name)} {item.name} /li ))} /ul ); }四、组件化React 的 “灵魂”像搭积木一样开发组件化是 React 单页应用的核心把页面拆成独立、可复用的组件比如头部、导航、内容区再像搭积木一样组合。1. 定义组件两种方式1函数组件推荐// components/Head.jsx头部组件 export default function Head() { return ( header h1我的React博客/h1 nav首页 | 文章 | 关于/nav /header ); } // components/Main.jsx主体组件 export default function Main() { const songs [{ id: 1, name: 稻香 }, { id: 2, name: 夜曲 }]; return ( main h2热门歌曲/h2 ul { songs.map(item li key{item.id}{item.name}/li) } /ul /main ); }2组合组件拼装页面// App.jsx根组件 import Head from ./components/Head; import Main from ./components/Main; export default function App6() { return ( div classNameapp {/* 引入头部组件 */} Head / {/* 引入主体组件 */} Main / /div ); }2. 组件渲染到页面入口文件所有组件最终要通过main.jsx挂载到 DOM 节点// main.jsx项目最外层入口 import React from react; import ReactDOM from react-dom/client; import App from ./App.jsx; import ./index.css; // 找到页面中的root节点渲染App根组件 ReactDOM.createRoot(document.getElementById(root)).render( React.StrictMode App / /React.StrictMode );五、JSX 进阶数组处理小技巧开发中常需要对数组做转换比如把数字数组放大 10 倍比如我们在实战1中使用的mapexport default function App() { const arr [1, 2, 3, 4]; // map返回新数组可直接渲染或赋值使用 const newArr arr.map(item item * 10); return ( div p原数组{arr.join(,)}/p p放大10倍:{newArr.join(,)}/p /div ); }放在 JS 里可能更好理解const arr [1, 2, 3, 4]; const newArr arr.map((item, i, array) { // [10, 20, 30, 40] return item * 10; }) console.log(newArr);六、总结React 开发核心流程1.用create-react-app或Vite创建项目2.在main.jsx中挂载根组件App3.拆分子组件Head、Main 等用 JSX 编写组件逻辑4.合表达式实现列表渲染、条件渲染、样式处理、事件绑定5.组合组件完成整个页面开发。结语React的核心就是“简单”用 JSX 简化 HTML 和 JS 的交互用组件化简化页面结构用声明式 UI 简化 DOM 操作。把这些基础知识点吃透再结合代码例子实战反复练习你就能从 React 新手快速进阶