React.js 怎么入门

恭喜你选择学习 React.js！这是目前前端领域最热门、生态最完善的框架之一。对于初学者来说，React 的学习曲线其实比想象中要平滑，只要掌握了核心概念，上手非常快。

这里为你规划了一条从零基础到入门的实战路线，包含了必须要学的内容和学习建议。

第一阶段：必备前置知识（磨刀不误砍柴工）

在直接写 React 之前，请确保你对以下 JavaScript (ES6+) 概念有基本了解。不需要精通，但要看得懂。

1. ES6+ 基础语法：
   • 箭头函数 (Arrow Functions)：const add = (a, b) => a + b;
   • 解构赋值 (Destructuring)：const { name, age } = person;
   • 模板字符串 (Template Literals)：Hello, ${name}
   • 导入/导出 (Import/Export)：模块化开发的基础。
   • 数组方法：特别是 .map() 和 .filter()（React 渲染列表会大量用到）。
2. HTML & CSS：
   • 能看懂基本的 HTML 结构。
   • 掌握 Flexbox 或 Grid 布局（用于页面排版）。
3. Node.js 环境：
   • 安装 Node.js（自带 npm 或 yarn），用于搭建开发环境和安装依赖。

第二阶段：React 核心概念（这 5 点最重要）

这是 React 的骨架，必须掌握。建议跟着官方文档或视频教程边看边敲。

1. 组件（Components）

React 的一切都是组件。学会把页面拆分成独立的、可复用的小块（如 Header, Sidebar, Button）。

• 函数组件 (Functional Components)：现在的主流写法（以前是 Class 组件，入门建议直接学函数组件）。

2. JSX 语法

看起来像 HTML，但其实是 JavaScript。

const element = <h1 className="title">Hello, world!</h1>;
// 注意：class 要写成 className，因为 class 是 JS 关键字。

3. State（状态）

组件内部的数据记忆。当 State 改变时，组件会自动重新渲染。

• Hook: useState。这是你写 React 最常用的钩子。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值为 0

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

4. Props（属性）

父组件向子组件传递数据的方式。Props 是只读的。

// 父组件
<Welcome name="Sara" />
// 子组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

5. 事件处理 (Event Handling)

如 onClick, onChange 等。注意在 React 中需要写成驼峰命名法 onClick。

第三阶段：现代 React 开发工具链

学会了基础后，你需要搭建开发环境。

1. Vite (推荐) 或 Create React App (CRA)：
   • 不要手动配置 Webpack，直接使用工具快速生成项目。
   • 推荐 Vite：速度极快，是目前的最佳选择。
   • 命令：npm create vite@latest my-react-app -- --template react
2. React DevTools：
   • 安装 Chrome 浏览器插件，用于调试 React 组件的状态和 props。

第四阶段：进阶 Hooks 与生态

当你能写出静态页面和简单交互后，学习以下进阶内容：

1. useEffect：处理副作用（数据获取、订阅、手动修改 DOM）。这是继 useState 之后第二重要的 Hook。
2. React Router：实现页面跳转（单页应用 SPA 的核心）。
3. 状态管理 (State Management)：
   • 初学者先用 useState 和 useContext 够用。
   • 如果项目复杂，再学 Zustand (推荐，简单) 或 Redux Toolkit (行业标准，但复杂)。
4. 数据请求：
   • 学会使用 Axios 或 Fetch 获取后端数据。
   • 推荐学习 React Query (TanStack Query)：处理数据缓存和加载状态，现代 React 开发的神器。

第五阶段：实战项目建议

光学理论是不够的，必须通过项目巩固。建议按以下顺序做几个 Demo：

1. Todo List (待办事项)：
   • 知识点：State, Props, 列表渲染 (map), 事件处理。
   • 难度：⭐
2. 天气查询 App：
   • 知识点：API 请求 (fetch/axios), useEffect, 条件渲染。
   • 难度：⭐⭐
3. 仿豆瓣/电商列表页：
   • 知识点：React Router (详情页跳转), 组件拆分, 样式处理。
   • 难度：⭐⭐⭐

学习资源推荐（免费/优质）

1. 官方文档（最权威）

• React 官方文档：react.dev （全新改版，交互式教程，强烈推荐作为首选）。

2. 视频教程（适合中文用户）

• B站 - 技术蛋老师：他的 React 零基础教程非常生动，适合入门。
• B站 - 尚硅谷 / 黑马程序员：体系非常完整，适合想成为专业前端开发的人。
• YouTube - Codevolution：英文名好，讲解清晰，适合倍速观看。

3. 练习平台

• Scrimba：有 React 的交互式课程，可以在视频里直接写代码。

避坑指南（给初学者的建议）

1. 不要纠结 Class 组件：现在 99% 的新项目都是函数组件 + Hooks，直接学新的。
2. 不要过度设计：初学者不要一上来就学 Redux 或复杂的架构，先用 useState 把功能跑通。
3. 理解“单向数据流”：数据从父组件流向子组件，不要试图直接修改子组件的 props。
4. 没事多 console.log：如果不清楚某个变量是什么，或者为什么组件不更新，在代码里打印出来看看。

你的第一步行动清单：

1. 确认电脑安装了 Node.js。
2. 打开终端，运行 npm create vite@latest my-first-react -- --template react。
3. 进入文件夹 cd my-first-react，安装依赖 npm install。
4. 运行 npm run dev。
5. 打开浏览器，开始修改 src/App.jsx 里的代码，看看页面发生了什么变化！

祝你学习愉快！如果有具体的报错或者不懂的地方，随时可以问我。