1. React到底是什么
1.1 用一个生活化类比理解React
很多新手第一次接触React，看到官方文档那一堆术语就直接劝退了。我当年也是，什么"组件"、"状态"、"虚拟DOM"，每个字都认识，连起来就完全不知道在说什么。
先别管那些术语，我用一个盖房子的例子来帮你理解。
假设你要盖一栋房子，传统的做法是每一块砖都要你亲自搬、亲自砌、亲自抹灰。房子盖好了，想换个户型，对不起，全部拆了重盖。这就是传统的DOM操作——每次页面要更新，浏览器都得从头到尾重新渲染一遍。
React的做法完全不一样。它更像是你手里拿着一张"图纸"，先在图纸上画出你想要的房子样子，然后拿着图纸跟现在的房子做对比，哪里需要改就改哪里，不需要动的部分一概不碰。这张"图纸"就是虚拟DOM，这个"对比找差异"的过程叫作diff算法。
再举个例子，传统开发就像你去饭店点菜，每加一道菜，厨师就把整个后厨重新开一遍火。而React更像是一个智能点菜系统，你说要加个番茄炒蛋，它只让厨师去做这一道菜，其他菜该怎么炒还怎么炒。
这个理解到位了，后面的组件、状态、生命周期这些概念，都是在这个基础上展开的。
1.2 必须搞懂的四个核心概念
在深入优缺点之前，有几个基础概念需要先建立起来，否则后面的内容容易看不明白。
组件化：React把界面拆成一个个独立的小块。比如一个个人博客页面，可以分为顶部的导航栏、中间的文章列表、底部的页脚，每个部分都是独立的组件。这些组件可以复用，写一次，哪里需要就拿到哪里用。组件之间通过属性（props）传递数据，就像你给别人递名片一样，递过去什么对方就看到什么。
状态（state）：状态是组件自己内部的"记忆"。比如一个计数器组件，它需要记住当前数字是多少，这个数字就是它的状态。当数字变化，界面会自动跟着更新。
单向数据流：React的数据流动方向是固定的——从父组件流向子组件。这就像公司里的汇报制度，上级往下级传达指令，不能反过来。单向数据流让数据状态变得可预测，你想查数据是从哪来的、被谁改了，顺着数据流的方向就能找到源头。
JSX语法：React允许你用类似HTML的写法来描述界面结构，但它实际上是JavaScript。你可能第一眼看到会觉得有点不习惯，比如class要写成className，for要写成htmlFor，但这些差异都很好记，用几天就熟了。
这四个概念贯穿React的整个使用过程，后面的优点、缺点、选型分析都会反复用到它们。
2. React的优点：为什么它能火这么多年
2.1 组件化的威力，不亲自体验感受不到
组件化是React最大的亮点，这个优点在实际项目中会给你带来非常直观的体验。
拿我们一个实际的模拟项目来说，某公司要做一套后台管理系统，里面有十几个页面，每个页面都有表格、筛选条件、分页这些功能。如果用传统方式开发，每个页面的表格和分页都要重复写一遍，逻辑稍微复杂一点，后期改一个需求就要改十多个文件。
用React的组件化思路，我们把表格、筛选器、分页按钮全部抽成独立组件。然后写一个通用的页面容器组件，负责把这三个组件组装起来，传入不同的配置项就能生成不同页面。改了表格组件的样式，所有页面同时生效。这个效率提升是实打实的，特别是后期维护的时候，你会感谢当初的选择。
为什么组件化效率高？核心在于它改变了我们对开发的认知。传统开发是"写页面"，React开发是"搭积木"。页面从"结构"变成了"组件的组合"，每次写新功能，你优先考虑的是能不能复用已有组件，而不是从零开始。这种习惯一旦养成，你的代码库会像乐高积木盒一样，零件越积越多，拼新东西越来越快。
2.2 虚拟DOM与声明式UI：让开发变简单
虚拟DOM是React的另一个核心优点，但对新手来说，它的主要价值不在于性能提升，而在于心智模型的简化。
我再用一个具体场景说明。比如页面上有一个显示用户信息的区域，需要根据用户登录状态显示不同的内容。传统方式是手动"操作DOM"——你得找到那个元素，判断它现在是什么状态，然后决定怎么改。这个逻辑在复杂页面里会变得像一盘散沙。
React的方式是：你只需要描述"登录了就显示用户信息，没登录就显示登录按钮"，至于怎么更新界面、更新哪一部分，React全都帮你处理。这就是声明式UI——你声明"我想要什么样子"，而不是一步步告诉浏览器"你要改成什么样子"。
这个转变对新手特别友好，因为它把你的注意力从"浏览器怎么工作"解放出来，放到"界面应该呈现什么状态"上。
关于性能，需要客观说明一点。对于小型项目和大部分中后台系统，React的虚拟DOM性能优势和直接操作原生DOM相比，感知并不明显。真正体现出性能价值的是在大型应用、频繁交互的场景下。但对新手来说没必要纠结这个，虚拟DOM带来的开发体验提升，比性能提升价值更大。
2.3 生态圈的成熟度：站在前人的肩膀上前进
React发布至今已经很多年，围绕它形成了一个庞大且成熟的生态圈。这对新手来说是一个隐形的福利。
首先是脚手架工具，你可能听说过Vite这个名字，现在用它创建React项目就是几条命令的事，开发环境秒级启动，还有热更新，你改了代码，页面马上刷新。
其次是路由方案，单页面应用需要管理多个页面之间的跳转，React Router是这个领域的标准方案。它把URL和组件关联起来，你去访问某个地址，对应的组件就会显示出来。这个方案非常成熟，官方文档和社区案例都很丰富。
再比如状态管理，刚开始你可以完全用React自带的useState和useEffect，不需要额外学Redux或Zustand。直到项目规模起来、组件之间的共享数据变复杂了，再考虑引入集中式状态管理。这种渐进式的学习路径，对新手极其友好。
遇到问题怎么办？你碰到一个奇怪的报错，几乎90%的情况是，早有人把解决方案发在了某个技术社区上。React使用人群基数大，搜索引擎一搜就能找到答案。对比一些冷门框架，出问题半天找不到解决办法，那种挫败感是真的劝退人。
3. React的缺点：不能只知道好话
3.1 学习曲线不像想象中那么平缓
这个缺点我深有体会。React的官方文档写得很好，但有一个特点：它默认你具备一定的JavaScript基础。如果你是纯零基础入门前端，刚学会HTML和CSS、JS写了一两百行的程度，直接上手React，大概率会卡住。
为什么？因为React引入了很多"新概念"，比如函数组件、Hooks、useEffect的依赖数组，这些概念背后其实是JavaScript的闭包、作用域、异步机制在起作用。你如果闭包没搞懂，useEffect里各种莫名其妙的"重复执行""死循环"问题会折磨得你想砸电脑。
所以很多资深开发者的建议都是：先扎扎实实学一段时间原生JavaScript，理解了数组方法、对象操作、事件处理、异步请求这些基础，再学React，效率会高很多。跳过这一步直接学，后面还是要回头补课，绕远路。
另外还有一个不容忽视的学习难点：JSX和React之间是有一定思维转换成本的。虽然JSX看起来像HTML，但它实际上是JavaScript，它要求你理解表达式怎么嵌入、条件怎么渲染、列表为什么需要key。这些在纯HTML里不需要考虑的问题，到了React里统统变成你必须掌握的技能。
3.2 版本更新快，碎片化严重
React的更新节奏是真的快。hooks刚出来的时候，全社区都在讨论要不要学Redux了；然后函数组件成了主流，class组件被打入"旧写法"的冷宫。很多开发者在网上搜到一篇教程，用的还是老版本的写法，结果在自己电脑上运行不起来，这种体验非常劝退。
这种碎片化还体现在第三方库上。React本身只关心界面渲染，路由、状态管理、数据请求这些能力都需要额外引入库。而React的库生态实在过于繁荣，光状态管理就有Redux、MobX、Zustand、Jotai等等，新手很难选，选了后悔又要迁移，迁移成本高得离谱。
怎么应对？我的经验是：学新东西的时候，优先看官方文档，别一上来就搜各种博客教程。官方文档会明确标注哪些写法是推荐的、哪些是旧版兼容的，跟着官方路线走能避开大部分坑。另外，选择一个主流的技术栈组合之后就尽量别频繁换，稳定下来持续用一段时间，比自己不断追新更重要。
3.3 过于灵活带来的选择困难症
React本身非常灵活，这对资深开发者来说是优点，但对新手来说，可能是一个隐性缺点。
举个实际例子：同样是定义一个组件，你可以用函数组件，也可以用class组件；同样创建一个项目，你可以用Vite，也可以用Create React App；同样处理表单，你可以用受控组件，也可以非受控。这种多样性让你在搜解决方案的时候，会看到风格迥异的写法，你并不知道哪种才是"当前推荐的最佳实践"。
有些框架之所以对新手友好，恰恰是因为它"限制"了你。你只能用它的方式做事情，不用选择，照着学就行。React把选择权完全交给你，反而让你无从下手。这也是为什么很多新手学完React基础之后，到了真正做一个项目的时候，依然不知道从何开始。
我的建议是：遇到选择场景，优先跟着React官方文档当前推荐的方式走。比如官方现在推荐函数组件加Hooks，你就别用class组件；官方的教程用Vite，你别自己瞎换。先学会一个主流组合，等你真正理解它背后的取舍了，再去看其他的也不迟。
这个"选择困难症"还催生了一种现象，有很多人觉得React"太过自由"，从而转向Vue。Vue提供了很多约定俗成的规范，比如单文件组件、模板语法、官方路由与状态库，对新手来说确实降低了选择成本。这个对比后面会细说。
4. 新手构建前后端项目的选型建议
4.1 前端部分：从React脚手架开始
如果决定用React做前端，新手第一步是选好脚手架工具。
现在的主流选择是Vite，这是目前创建React项目最顺滑的方式。Vite的好处是启动速度快、热更新响应快，配置也相对简单，对新手来说几乎是零成本上手。
具体的创建步骤：
打开终端，进入你想放项目的目录，执行以下几行命令（以Node.js环境已安装为前提，下文会讲Node.js是什么）：
npm create vite@latest my-app -- --template react这个命令会创建一个叫"my-app"的文件夹，里面包含一个React项目的基础结构。然后进入项目目录，安装依赖并启动开发服务器：
cd my-app npm install npm run dev启动成功后，浏览器访问终端提示的本地地址，你就能看到一个React默认的示例页面。之后的开发就在这个项目基础上进行。
这个过程中你会第一次接触Node.js，它是运行JavaScript开发工具的环境。装完Node.js之后，npm命令就能用了，它是一个用来管理前端项目依赖的工具，相当于手机里的应用商店——你需要什么第三方库，用npm一条命令就能安装进来。
Vite创建的项目，目录结构很简单，核心文件是src/App.jsx。你打开它，会发现里面是一个React组件——你的项目入口就是从这里开始的。页面上的所有内容，都可以在这个组件里改，也可以新建更多组件然后在App里引用它们。
4.2 后端部分：Node.js全家桶
后端选型，推荐新手直接学Node.js + Express，理由很简单：前后端都用JavaScript，不用切换语言，学习成本直接减半。
我之前带过一位朋友做项目，他JavaScript只会一点点，但也硬着头皮用Node.js做后端，边学边做，两三天就能写出简单的接口。如果让他再去学一门Python或Java，怕是两个月都出不了成果。
后端中的Node.js是什么角色呢？简单说，前端负责展示页面，后端负责处理数据。后端要提供一系列接口（API），前端通过请求这些接口来获取数据、提交数据。
我的推荐组合是：Node.js + Express + SQLite数据库。
Express是一个简洁的后端Web框架，它帮你处理HTTP请求、路由、中间件这些基础工作。SQLite是一个轻量级的嵌入式数据库，不需要额外安装数据库服务器，创建一个文件就能存数据，对新手极其友好。
用这套组合，从一个空的文件夹到跑通第一个接口，大概只需要三步：
// 第一步：安装Express（在项目目录里执行） npm install express // 第二步：写一个最简单的后端服务 const express = require('express'); const app = express(); app.get('/api/hello', (req, res) => { res.json({ message: 'Hello from backend' }); }); app.listen(3000, () => { console.log('Server running at http://localhost:3000'); });# 第三步：运行 node index.js浏览器访问http://localhost:3000/api/hello，就能看到后端返回的JSON数据。前端项目通过fetch请求这个地址，就能把数据显示在页面上。一个前后端分工明确的应用就此打通。
4.3 全栈一体化方案：Next.js值得一看
如果新手的目标是做一个完整的Web应用，不想前后端分开维护两套项目，Next.js是很值得考虑的选择。
Next.js是一个基于React的"全栈框架"，它在React之上帮你想好了一个完整Web应用所需的架构，包括路由、优化、数据请求、API路由等。你可以在同一个项目里写前端页面，也可以在api目录下写后端接口，两者共享同一套代码逻辑。
它的核心特点是服务端渲染，页面内容在服务器端生成好再发送给浏览器。这样做的好处是对搜索引擎友好，SEO表现比纯前端渲染更好。初始页面加载速度也更优，用户看到内容不需要等待所有JavaScript都下载完。
对新手而言，Next.js还有一个额外的好处：它官方文档把最佳实践都写得很清楚，告诉你"应该怎么做"而不是"可以怎么做"。这恰好解决了React自由度过高导致的选择困难症。
但需要注意，Next.js的学习曲线比纯React陡一些。我的建议是：先用Vite搭一个React项目，把React本身搞明白，然后再接触Next.js。如果你已经有一定的JavaScript基础，也可以直接学Next.js，官方教程写得相当顺滑。
4.4 与Vue的简单对比：选谁不踩雷
聊到前端选型，很多新手会在React和Vue之间纠结。我直接说结论：两个都能选，关键看你的目标团队偏好还是个人偏好。
从学习门槛来看，Vue对新手更友好一些。它的模板语法更接近HTML，很多东西你靠着直觉就能写出来。React的JSX虽然也是类似HTML的写法，但它毕竟"是一个JavaScript表达式"，整体认知要求更高。
从生态和就业来看，React的市场占有率更高，招聘需求量大，对未来找工作更有利。国内外的很多大型互联网项目都在用React，你学完React之后，身边能找到的参考项目和问答案例也更多。
从开发体验来看，React胜在灵活，Vue胜在规范。React的Hooks体系一旦掌握，写逻辑非常爽快。Vue的响应式机制很强大，状态更新自动触发视图更新，代码写起来也更接近传统HTML的直觉。
我给新手建议的一个简单判断标准：如果你JavaScript基础扎实，或者未来目标是大厂、出海项目，选React；如果你现在就想要一个上手快、写着顺手的框架，做中小型项目，选Vue。没有绝对的优劣，只有适合与否。
5. 实操流程：从零搭建一个前后端分离Demo
5.1 动手前的准备工作与整体思路
理论聊完了，分享一个完整的新手友好型实操案例：做一个简单的"待办事项"应用，前端用React，后端用Express + SQLite，实现待办事项的列表展示、添加、删除。
先想清楚整体结构，避免后面写到一半不知道自己在干嘛：
- 前端项目：负责页面展示与用户交互，发送请求到后端接口，拿到数据显示在页面上
- 后端项目：提供待办事项的增删查接口，数据存储在SQLite数据库文件里
- 交互方式：前端通过fetch调用后端接口，完成数据的流动
在动手之前，你需要确保本机装好了Node.js，版本建议较新的长期支持版本。可以在终端执行node -v查看，如果显示一个版本号说明已经装好了。
我的项目目录规划是：
my-todo/ ├── backend/ # 后端项目 │ ├── index.js # 入口文件 │ └── todos.db # SQLite数据库文件（运行后自动生成） └── frontend/ # 前端React项目 └── src/ ├── App.jsx # 主组件 └── ...前后端分离，两个项目各自独立运行，通过HTTP请求通信。这样做的好处是，前端开发的时候完全不需要关心后端怎么实现，后端也可以单独被其他客户端复用。
5.2 后端实操：Express + SQLite实现接口
创建一个backend文件夹，进入并初始化npm项目：
mkdir backend && cd backend npm init -y npm install express sqlite3 cors三个依赖各做什么用：express管路由和HTTP请求；sqlite3管数据库操作；cors解决前端请求跨域问题——浏览器安全限制导致前后端不同端口时请求会被拦截，加了cors中间件就能放行。
然后创建index.js，实现两个核心接口：查询所有待办事项、新增待办事项。
const express = require('express'); const sqlite3 = require('sqlite3').verbose(); const cors = require('cors'); const app = express(); const PORT = 3001; app.use(cors()); app.use(express.json()); // 初始化数据库：如果不存在则创建待办事项表 const db = new sqlite3.Database('./todos.db', (err) => { if (err) { console.error('数据库连接失败:', err.message); } else { db.run(`CREATE TABLE IF NOT EXISTS todos ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, done BOOLEAN DEFAULT 0 )`); console.log('数据库已初始化'); } }); // 查询所有待办事项 app.get('/api/todos', (req, res) => { db.all('SELECT * FROM todos', [], (err, rows) => { if (err) { res.status(500).json({ error: err.message }); return; } res.json(rows); }); }); // 新增待办事项 app.post('/api/todos', (req, res) => { const { title } = req.body; if (!title) { res.status(400).json({ error: 'title不能为空' }); return; } db.run('INSERT INTO todos (title) VALUES (?)', [title], function(err) { if (err) { res.status(500).json({ error: err.message }); return; } res.status(201).json({ id: this.lastID, title, done: 0 }); }); }); app.listen(PORT, () => { console.log(`后端服务已启动: http://localhost:${PORT}`); });这里有个小细节：SQL语句里用了?占位符，而不是直接拼接用户输入，这是为了防范SQL注入攻击。新手容易忽略这个，但这是一个必须养成的习惯。
启动后端：
node index.js看到"后端服务已启动"，用浏览器访问http://localhost:3001/api/todos，应该能看到返回的空数组[]，说明接口已经跑通。此时可以用接口测试工具去发一个POST请求，往数据库里加一条待办事项，然后再刷新GET接口，就能看到数据记录。后端已经能干活了。
5.3 前端实操：React页面对接后端接口
用Vite创建React项目：
npm create vite@latest frontend -- --template react cd frontend npm install把项目里自带的示例代码清空，在App.jsx里写一个简单的待办应用：
import { useState, useEffect } from 'react'; const API_URL = 'http://localhost:3001/api/todos'; function App() { const [todos, setTodos] = useState([]); const [input, setInput] = useState(''); // 首次加载时从后端获取数据 useEffect(() => { fetch(API_URL) .then((res) => res.json()) .then((data) => setTodos(data)) .catch((err) => console.error('获取数据失败:', err)); }, []); // 新增待办 const addTodo = () => { if (!input.trim()) return; fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: input }), }) .then((res) => res.json()) .then((newTodo) => { setTodos([...todos, newTodo]); setInput(''); }); }; return ( <div className="todo-app"> <h1>待办事项</h1> <div className="input-area"> <input value={input} onChange={(e) => setInput(e.target.value)} placeholder="输入新的待办事项" /> <button onClick={addTodo}>添加</button> </div> <ul> {todos.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul> </div> ); } export default App;这段代码包含了React三个最核心的能力：useState定义变量，useEffect在组件加载后发送请求，以及用数组的map方法将数据渲染成列表项。
启动前端项目：
npm run dev浏览器打开前端页面，在输入框里写一句"学习React"，点击添加，然后到后端接口页面刷新一下，就能看到两条数据了。同样，你在前端页面再添加一条，它也会出现在列表里。一个完整的前后端数据闭环就实现了。
需要特别注意，前端每次往列表里添加新事项的时候，我用的是展开运算符[...todos, newTodo]，而不是直接修改原有的数组。这是因为React的state是不可变的——你不能直接改它，要创建一个新值再通过setter替换。这是新手写React代码最容易踩的坑之一，直接去修改state虽然界面可能"看起来正常"，但很多隐藏在背后的组件更新问题就是这样产生的。
我把这个案例完整跑下来花了不到半个小时。新手可能会慢一些，但两小时内搞定应该没问题。这个流程走通之后，你对"前后端是如何协作的"这一核心问题，就有了切身的理解。
6. 常见问题与排查技巧实录
6.1 新手最容易遇到的几个报错与困惑
我在带新人或者帮朋友排查问题的时候，发现React新手总是在几个地方反复卡壳。整理一份高频问题速查表，方便你对照排查。
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 组件不显示任何内容 | JSX里return后面有换行导致返回了undefined | return写在同一行，或者用括号包裹JSX |
| 列表渲染时控制台报key警告 | 渲染列表没加key属性，或key值用的是数组下标 | 给每个列表项加唯一的key值，优先用记录的id |
| useEffect里的请求发了很多次 | 依赖数组没写或传了一个引用类型的值 | 明确依赖数组，空数组表示只在挂载时执行一次 |
| 修改了数组界面没变化 | 直接push或修改了state原值 | 用展开运算符创建新数组再调用setter |
| 页面报404 | 前端请求的后端接口路径与返回不一致 | 检查fetch里的URL端口和路径是否和Express路由一致 |
| 跨域请求被拦截 | 前后端端口不同且后端没启用CORS | 安装并引入cors中间件，或者在开发环境配置代理 |
这个表基本覆盖了React新手常见的绝大部分问题。每一条我都见过不止一次，特别是key警告和直接修改state这两个，几乎清一色是新手必踩的坑。
6.2 排查思路：顶级的Debug方法其实很朴素
每次看到有朋友卡在报错信息上，我第一句话永远是：先把报错信息完整读一遍。
React和Node.js的报错信息其实写得相当清楚，它会告诉你在哪个文件的哪一行报错、报的是什么错。很多新手看到一堆英文就慌，跳过报错自己瞎猜，结果浪费了大量时间。正确的方式是，先看报错第一行的错误类型和描述，再看下面的文件路径和行号，定位到具体位置再决定下一步。
举个例子，你遇到"Cannot read properties of undefined (reading 'map')"，这个报错翻译过来是"无法读取undefined的map属性"。结合正在渲染的代码，十有八九是某个应该返回数组的字段实际上是undefined。这时候你只需要在渲染之前加个条件判断，或者确保初始state是一个空数组，问题就解决了。
另一个常用的技巧是：在关键位置用console.log打印变量的值和类型。这不是什么高深的技术，但在找bug的时候极其有效。比如你发现列表没渲染，在setTodos之前打印一下后端返回的数据，在map渲染之前打印一下todos数组，数据是哪一步掉链子，一打印就明白了。
还有一个针对React的独门技巧：一旦发现组件渲染不对，先在CSS里给根元素加一个border，然后一层层往里缩。这个方法虽然老土，但对定位布局问题特别管用，能帮你快速确定是哪个组件把布局撑坏了。
6.3 开发环境的坑：版本和依赖管理
前端开发折磨人的地方往往是环境本身。新手最常见的环境类问题是版本不一致导致的奇葩报错。
举个例子，某些第三方库需要18版本以上的React才能工作，而你创建的项目还是17。这种情况下，报错信息不会直接告诉你"版本太低"，而是报一堆让你摸不着头脑的兼容错误。排查这类问题的思路是：看到奇怪的报错先搜一下问题中的第三方库名和版本号，大概率能找到版本兼容性说明。
依赖安装失败也是高频问题。如果你在执行npm install时碰到网络超时或下载慢，可以试试用镜像源替换npm默认源，这会大幅提升下载速度。如果遇到一些奇怪的权限错误，可以检查一下终端窗口是否以管理员身份运行，Windows上这个情况尤其常见。
还有个实践心得要分享：建议新手把package.json和package-lock.json文件都提交到版本库里。前者记录了项目依赖的大版本范围，后者锁定具体到小版本的依赖树。只要提交了lock文件，别人或你自己在新环境下复制项目，执行npm install之后装的依赖就和开发环境完全一致，能规避大量因依赖版本不一致引起的诡异问题。
7. 写在最后的一点个人经验
React这套技术栈，我前前后后用了很多年，也用它做了不少模拟项目。如果要给一个新手最核心的建议，我会说三句话。
第一，别贪多求快。React的周边工具太多，你不需要在入门阶段把所有都学会。先用最基础的组件、状态、Hooks、fetch请求，把页面跑起来，后面真的需要某个工具了再学它，这样学一点用一点，吸收效果是最好的。
第二，尽量跟着官方文档走。我在踩了无数坑之后，发现绝大多数问题的终极答案都在官方文档里。社区教程写得再好，也难免有时代局限，只有官方文档始终保持着跟当前版本一致的准确度。遇到不确定的API，养成打开文档查一圈的习惯，长期下来受益无穷。
第三，动手比看一百篇教程都管用。你把React官方提供的这个待办项目抄一遍、改一遍、折腾一遍，比你在B站看十个小时的视频课都有效。出现问题、排查问题、解决问题，这个循环走一遍，很多概念自然就通了。
React本身就是一个工具，工具的价值在于使用。做前端这几年，我最大的体会是：好奇心比基础更重要，遇到问题不绕着走，那个问题本身才是你进步最快的地方。希望这篇内容能帮你在起步阶段少走一些弯路，咱们在代码的世界里保持热爱，慢慢沉淀。
