React 入门教程：基于官方中文文档的学习之路 – wiki基地

作者： /

React 入门教程：基于官方中文文档的学习之路

React 是一个用于构建用户界面的 JavaScript 库，凭借其组件化、声明式的编程范式和高效的性能，已成为前端开发领域最受欢迎的工具之一。对于初学者来说，学习 React 最好的方式莫过于回归其官方文档。幸运的是，React 官方文档提供了高质量的中文翻译，为中文开发者扫清了语言障碍。

本文将作为一份学习指南，带你梳理出一条基于 React 官方中文文档的学习路径，并提炼核心概念，助你高效入门。

为什么选择官方文档？

  • 权威性与准确性： 官方文档是第一手资料，内容最准确、更新最及时。
  • 系统性： 文档系统地介绍了从基础概念到高级主题的所有内容，知识结构完整。
  • 最佳实践： 官方文档中所展示的编码风格和思想，是 React 社区公认的最佳实践。

访问官方中文文档： https://zh-hans.react.dev/

第一步：基础准备 (Prerequisites)

在正式开始 React 学习之前，你需要掌握以下基础知识：

  1. HTML & CSS： 这是构建网页的基础，你需要了解如何创建 HTML 结构并为其添加样式。
  2. JavaScript (ES6+)： React 是一个 JavaScript 库，因此扎实的 JavaScript 基础至关重要。你需要重点掌握以下 ES6+ 语法：
    • let 和 const
    • 箭头函数 (=>)
    • 类 (class) 和 this 关键字
    • 模块导入/导出 (import/export)
    • 数组方法，如 .map(), .filter()
  3. Node.js 与 npm： 你的电脑需要安装 Node.js 环境，以便使用 npm (Node Package Manager) 来管理项目依赖和运行开发脚本。

第二步：核心概念学习

官方文档的 “学习 React” 部分是入门的绝佳起点。以下是你需要依次掌握的核心概念：

1. JSX (JavaScript XML)

JSX 是 JavaScript 的一个语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的结构。

jsx
const element = <h1>Hello, world!</h1>;

核心思想： React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合（如事件处理、状态变更），因此它没有将标记与逻辑分离，而是通过“组件”将它们组合在一起。JSX 让这一切在视觉上更直观。

2. 组件 (Components) 与 Props

组件是 React 应用的基石。它是一个独立的、可复用的代码片段，用于构建用户界面的一部分。组件可以是 JavaScript 函数或类。

props (properties 的缩写) 是从父组件传递给子组件的数据。它是单向流动的（从父到子）。

“`jsx
// 函数组件
function Welcome(props) {
return

Hello, {props.name}

;
}

// 使用组件
const element = ;
“`

3. State (状态) 与生命周期

如果说 props 是组件的“外部”数据，那么 state 就是组件的“内部”私有数据，由组件自己管理。当 state 发生变化时，React 会自动重新渲染组件。

“`jsx
import React, { useState } from ‘react’;

function Clock() {
// 使用 useState Hook 定义一个 state 变量
const [date, setDate] = useState(new Date());

// …
return (

Hello, world!

It is {date.toLocaleTimeString()}.

);
}
“`

4. 事件处理 (Handling Events)

React 的事件处理方式与原生 DOM 非常相似，但有一些语法差异：

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
  • 使用 JSX，你会传入一个函数作为事件处理程序，而不是一个字符串。

“`jsx
function ActionLink() {
function handleClick(e) {
e.preventDefault(); // 阻止默认行为
console.log(‘The link was clicked.’);
}

return (

Click me

);
}
“`

5. 条件渲染 (Conditional Rendering)

你可以根据组件的 state 或 props 来决定渲染哪个部分。这通常通过 JavaScript 的 if 语句或三元运算符来实现。

jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}

6. 列表与 Keys

在实践中，你经常需要渲染一个数据列表。可以使用 JavaScript 的 .map() 方法来实现。同时，React 要求为列表中的每个元素提供一个唯一的 key 属性，以帮助 React 识别哪些元素被改变、添加或删除，从而优化渲染性能。

“`jsx
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>

  • {number}

    • );

    // 渲染
    ReactDOM.render(

      {listItems}

    ,
    document.getElementById(‘root’)
    );
    “`

    7. 表单 (Forms)

    HTML 表单元素（如 <input>, <textarea>, <select>）在 React 中稍有不同，因为它们本身会维护自己的状态。React 通过一种称为“受控组件”的方式来处理表单，即表单的数据由 React 组件的 state 来管理。

    第三步：Hooks – 新一代 React 特性

    在你掌握了基础概念后，文档会引导你进入 Hooks 的世界。Hooks 是 React 16.8 引入的新特性，它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。

    你需要重点学习以下几个核心 Hooks：

    • useState： 用于在函数组件中添加和管理 state。
    • useEffect： 用于处理“副作用”，如数据获取、订阅或手动更改 DOM。它取代了 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法。
    • useContext： 用于在组件树中进行跨层级的 props 传递，避免了“属性逐层透传（prop drilling）”的繁琐。

    第四步：实战演练

    理论学习之后，最好的巩固方式就是动手实践。

    1. 跟随官方教程： 官方文档提供了一个非常经典的 井字棋（Tic-Tac-Toe） 教程。强烈建议你从头到尾完整地跟着做一遍。这个项目涵盖了组件、State、Props 和事件处理等多个核心概念。
    2. 创建你自己的项目： 使用 Create React App 或 Vite 等脚手架工具快速搭建一个 React 项目。尝试做一个简单的待办事项列表（Todo List），这个应用几乎会用到所有基础知识点。

    bash
    # 使用 Vite 创建一个新的 React 项目
    npm create vite@latest my-react-app -- --template react

    第五步：探索生态系统

    当你对 React 本身有了扎实的理解后，就可以开始探索其庞大的生态系统了：

    • React Router： 用于在单页应用中实现客户端路由。
    • 状态管理库：
      • Redux： 成熟、强大的全局状态管理方案。
      • Zustand / MobX： 更轻量、更现代的状态管理库。
      • Context API + useReducer： React 内置的方案，适合中小型应用。
    • UI 库：
      • Ant Design： 企业级应用广泛使用的 UI 组件库。
      • Material-UI (MUI)： 实现了 Google Material Design 风格的组件库。
    • React 框架：
      • Next.js： 一个功能强大的 React 框架，支持服务器端渲染 (SSR)、静态站点生成 (SSG) 等。
      • Remix： 另一个专注于 Web 基础和性能的全栈框架。

    总结

    学习 React 的过程就像学习一门新的语言。从官方中文文档开始，系统地学习核心概念，通过动手实践来巩固知识，最后再逐步探索其丰富的生态。

    记住，最关键的一步是开始编写代码。不要害怕犯错，每一个错误都是你通往精通之路的垫脚石。祝你在 React 的世界里探索愉快！

    滚动至顶部