一、React初探与工程化启蒙
React是什么？说白了就是个UI库
React，官方定义是「用于构建用户界面的JavaScript库」。嗯，这句话很官方，但说白了——React就是帮你把页面拆成一个个小零件，然后高效地组装起来。
我刚开始接触React时，有个很深的感触：以前写jQuery，操作DOM就像在泥潭里走路，每一步都得小心翼翼。而React呢？它让你声明式地描述UI长什么样，剩下的更新、渲染、性能优化，它替你扛了。
核心概念其实就三个：
- 组件化：页面被拆成独立、可复用的组件。就像搭积木，一个按钮、一个表单、一个弹窗，都是独立的组件。
- 声明式：你只需要告诉React「UI应该长什么样」，而不是「怎么一步步去操作DOM」。代码更直观，心智负担更低。
- 虚拟DOM：React在内存里维护一棵虚拟DOM树，每次状态变化，先对比新旧虚拟DOM，算出最小更新，再批量操作真实DOM。性能就是这么来的。
我个人习惯：把React理解成「状态到UI的映射」。状态变了，UI自动跟着变。你不需要操心DOM操作，React帮你搞定。
为什么需要工程化？
你可能会问：写个React项目，直接引入CDN不就行了？为什么还要搞工程化？
嗯，我刚开始也这么想。直到我在一个真实项目中，遇到了这些问题：
- 模块管理混乱：几十个JS文件，全局变量满天飞，一个变量名冲突，排查半天。
- 代码无法压缩：生产环境需要压缩、混淆、Tree Shaking，手动做？不现实。
- 开发效率低：改一行代码，手动刷新浏览器，再等页面加载。一天下来，时间全浪费在等待上。
- 环境不一致：本地能跑，部署到服务器就报错。为什么？因为环境配置不一样。
工程化，说白了就是用工具和规范，把开发流程标准化、自动化。它解决的不只是「能不能跑」，更是「跑得稳、跑得快、跑得可维护」。
避坑指南：我曾经接手过一个项目，没有工程化，没有构建工具，所有代码都在一个HTML文件里。改一个功能，得全局搜索变量名，生怕改漏了。那感觉，就像在雷区里跳舞。所以，工程化不是锦上添花，而是雪中送炭。
搭建第一个React项目（Create React App）
好了，理论说完了，咱们动手。搭建React项目，最推荐的方式是Create React App（CRA）。它是官方脚手架，零配置，开箱即用。
你只需要在终端里敲一行命令：
npx create-react-app my-first-react-app然后等它跑完。这个过程会帮你：
- 初始化项目结构
- 配置Webpack、Babel等构建工具
- 安装React、ReactDOM等核心依赖
- 生成开发服务器、热更新、代码检查等
启动项目：
cd my-first-react-app
npm start浏览器会自动打开 http://localhost:3000，你会看到一个React的默认页面。恭喜，你的第一个React项目跑起来了！
注意：npx 是 npm 5.2+ 自带的工具，它会临时下载并执行 create-react-app，不会全局安装。如果你用 npm 全局安装过旧版本，建议先卸载：npm uninstall -g create-react-app。
项目目录结构解析
项目创建好了，咱们看看里面都有什么。打开目录，结构是这样的：
my-first-react-app/
├── node_modules/ # 依赖包，别手动改
├── public/ # 静态资源
│ ├── index.html # 入口HTML
│ ├── favicon.ico # 网站图标
│ └── manifest.json # PWA配置
├── src/ # 源代码，你主要在这里工作
│ ├── App.js # 根组件
│ ├── App.css # 根组件样式
│ ├── index.js # 入口JS，渲染React到DOM
│ ├── index.css # 全局样式
│ └── reportWebVitals.js # 性能监控
├── package.json # 项目配置和依赖
└── README.md # 项目说明我来挑几个重点说说：
- public/index.html：这是页面的HTML模板。注意里面有个
<div id="root"></div>，React就是挂载到这个div上的。 - src/index.js：项目的入口JS文件。它做的事情很简单：引入React、引入根组件App，然后调用
ReactDOM.createRoot把App渲染到root节点上。 - src/App.js：根组件。你可以在这里写你的第一个React组件。默认是个函数组件，返回一段JSX。
- package.json：项目的「身份证」。里面记录了项目名称、版本、依赖、脚本命令等。比如
npm start就是执行了react-scripts start。
我个人习惯：刚接触React时，别急着改配置。先用CRA默认结构跑起来，感受一下「改代码→保存→页面自动更新」的爽快感。等熟悉了，再慢慢探索Webpack、Babel这些底层工具。
小结
这一章，咱们聊了React是什么、为什么需要工程化、怎么用CRA搭项目、以及项目目录长什么样。你想想看，从零到跑起来，其实就三步：安装Node.js、敲一行命令、启动项目。是不是很简单？
下一章，咱们会深入JSX语法，看看React是怎么用「类HTML」来描述UI的。到时候，你会真正感受到声明式编程的魅力。
嗯，今天就到这儿。动手试试吧，别光看。