新手必看：React 入门教程

前言

欢迎来到现代前端开发的世界！如果你对构建交互式、高性能的用户界面感兴趣，那么 React 绝对是你不可错过的一项技术。作为目前最流行、最广泛应用的 JavaScript 库之一，React 由 Facebook（现 Meta）维护，它改变了我们思考和构建 Web 应用的方式。

对于初学者来说，初次接触 React 可能会觉得有些挑战，因为它引入了一些新的概念（比如 JSX、组件化、状态管理等）。但这就像学习任何一门新语言一样，一旦掌握了基础，你会发现它强大且富有表现力。

本教程将为你提供一个全面而深入的 React 入门指南。我们将从 React 是什么开始，逐步讲解核心概念，并通过实际的代码示例带你动手实践。读完本文，你应该能够理解 React 的基本工作原理，并具备构建简单 React 应用的能力。

1. React 是什么？为什么选择 React？

1.1 React 的定义

首先明确一点：React 不是一个完整的框架（Framework），而是一个用于构建用户界面的 JavaScript 库（Library）。这意味着它只负责 View 层（也就是用户看到和交互的部分），你需要搭配其他库或工具来处理路由、状态管理、数据请求等。但正是这种灵活性，使得 React 可以被轻松地集成到现有的项目中，或者与其他技术栈结合使用。

React 的核心思想是使用组件化的方式构建 UI。你可以将用户界面拆分成独立的、可复用的、小的模块，每个模块就是一个组件。通过组合这些组件，最终构建出复杂的界面。

1.2 为什么选择 React？

React 之所以如此受欢迎，主要有以下几个原因：

• 声明式编程 (Declarative Programming): React 采用声明式的方式来描述 UI。你只需要告诉 React 你希望 UI 在某个状态下呈现什么样子，而不需要关心如何从当前状态一步步地到达目标状态。React 会自动处理 DOM 的更新，这使得代码更容易理解、预测和调试。想象一下，传统方式可能需要你手动操作 DOM 元素（创建、修改、删除），而在 React 中，你只需要描述最终的结果。

• 组件化 (Component-Based): 这是 React 最核心的特性。将 UI 拆分成独立的组件带来了巨大的好处：

  • 复用性: 同一个组件可以在应用的不同地方甚至不同项目中重复使用。
  • 可维护性: 每个组件只关注自己的逻辑和 UI，修改一个组件不会轻易影响其他组件。
  • 可测试性: 可以独立地测试每个组件。
  • 团队协作: 不同团队成员可以并行开发不同的组件。

• 高效的性能 (Efficient Performance): React 使用 虚拟 DOM (Virtual DOM) 来优化更新过程。Virtual DOM 是真实 DOM 在内存中的一个轻量级表示。当组件的状态发生变化时，React 会首先更新 Virtual DOM，然后通过一个称为 协调 (Reconciliation) 的过程，比较新旧 Virtual DOM 之间的差异。最后，React 只会将需要改变的部分同步到真实的 DOM 上。这大大减少了直接操作真实 DOM 的次数，从而提高了性能，特别是在大型应用中。

• “Learn Once, Write Anywhere” (一次学习，随处编写): React 最初是为 Web 开发设计的，但它的思想和模式可以扩展到其他平台。例如，React Native 允许你使用 React 的知识来构建原生移动应用（iOS 和 Android）。还有一些项目允许你使用 React 构建桌面应用、VR 应用等。

• 庞大的社区支持 (Large Community Support): React 拥有一个非常活跃和庞大的开发者社区。这意味着你可以轻松找到大量的学习资源、第三方库、工具以及解决问题的帮助。

2. 入门前的准备

在深入学习 React 之前，你需要确保你的开发环境已经准备就绪。

2.1 安装 Node.js 和 npm/yarn

React 开发依赖于 Node.js 环境。Node.js 是一个 JavaScript 运行时，它允许你在服务器端运行 JavaScript。npm (Node Package Manager) 是 Node.js 默认的包管理器，用于安装和管理项目依赖。yarn 是 Facebook 开发的另一个流行的包管理器，与 npm 功能类似，有时速度更快。

访问 Node.js 官网 (https://nodejs.org/) 下载并安装推荐的 LTS (长期支持) 版本。安装 Node.js 后，npm 也会自动安装。

你可以在终端或命令行中运行以下命令来检查是否安装成功：

bash
node -v
npm -v

如果你想使用 yarn，可以运行以下命令安装：

bash
npm install -g yarn
yarn -v

在本教程中，我们将主要使用 npm 命令，但你可以根据自己的喜好选择使用 yarn。

2.2 JavaScript 基础知识

你需要对 JavaScript 有基本的了解，包括：

• 变量、数据类型、函数
• 条件语句 (if/else)、循环 (for/while)
• 数组、对象
• ES6+ 新特性：
  • let 和 const 变量声明
  • 箭头函数 (=>)
  • 类 (Class)
  • 模块化 (import 和 export)
  • 解构赋值 (Destructuring Assignment)
  • Promise 或 Async/Await (用于异步操作)

如果你对这些概念还不熟悉，建议先花一些时间学习 JavaScript 基础，特别是 ES6+ 的内容，因为现代 React 代码广泛使用了这些特性。

2.3 HTML 和 CSS 基础知识

React 用于构建用户界面，所以你需要对 HTML 和 CSS 有基本的了解，知道如何构建页面结构和样式。

3. 创建第一个 React 应用

最快、最简单的方式创建一个现代的 React 应用是使用官方推荐的脚手架工具：Create React App (CRA) 或者 Vite。

• Create React App (CRA): 官方提供的零配置、快速创建 React 应用的工具链，非常适合初学者。它集成了 Webpack、Babel 等工具，隐藏了复杂的配置细节，让你专注于代码编写。
• Vite: 一个更轻量、更快的构建工具，也支持快速创建 React 项目，尤其是在开发模式下，其热模块更新速度通常比 CRA 快得多。

在本教程中，我们以 Create React App 为例。

打开你的终端或命令行工具，进入你想要创建项目的目录，然后运行以下命令：

bash
npx create-react-app my-react-app

• npx 是 npm 5.2+ 版本自带的一个命令，用于执行 Node 包的可执行文件。它会临时下载 create-react-app 工具并运行它，而无需全局安装。
• my-react-app 是你项目的名称，你可以替换成任何你喜欢的名字。

命令执行后，create-react-app 会自动创建一个新的文件夹 my-react-app，并在里面设置好一个基本的 React 项目结构和所有必需的依赖项。这个过程可能需要几分钟，取决于你的网络速度。

创建完成后，按照提示进入项目目录：

bash
cd my-react-app

然后启动开发服务器：

bash
npm start

或者如果你使用 yarn：

bash
yarn start

运行 npm start 后，你的浏览器会自动打开一个新的页面，通常是 http://localhost:3000，你将看到一个 React 的欢迎页面。这说明你的第一个 React 应用已经成功运行起来了！

按下 Ctrl + C 可以停止开发服务器。

4. 初探项目结构

使用 Create React App 创建的项目有一个标准的结构：

my-react-app/
├── node_modules/ # 项目依赖的第三方库
├── public/ # 存放公共资源，比如 favicon, index.html
│ ├── favicon.ico
│ ├── index.html # 应用的入口 HTML 文件
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src/ # 存放项目的源代码，这是你主要工作的地方
│ ├── App.css
│ ├── App.js # 根组件
│ ├── App.test.js
│ ├── index.css
│ ├── index.js # 应用的入口 JavaScript 文件
│ ├── logo.svg
│ └── reportWebVitals.js
├── .gitignore # Git 版本控制忽略的文件
├── package.json # 项目的元信息和依赖配置
└── README.md # 项目说明文件

其中几个重要的文件和目录：

• public/index.html: 这是单页面应用 (SPA) 的 HTML 模板。React 应用会将内容“挂载”到这个文件中的一个特定 DOM 元素上（通常是 <div id="root"></div>）。你通常不需要修改它，除非你需要添加一些全局的 meta 标签或引用外部字体/CDN。
• src/index.js: 这是 React 应用的入口文件。它负责将根组件 (App) 渲染到 public/index.html 中的指定 DOM 元素 (id="root")。
• src/App.js: 这是应用的根组件。你看到的所有内容最初都是从这里开始构建的。

现在，打开 src/App.js 文件，你会看到一些 JSX 代码，它们构成了你在浏览器中看到的欢迎页面。尝试修改一些文本，保存文件，你会发现浏览器中的页面内容会立即更新（这就是热模块更新 HMR 的作用）。

5. React 核心概念

接下来，我们将深入学习 React 的几个核心概念。

5.1 组件 (Components)

组件是 React 应用的基石。一个组件就是一个独立的、可复用的代码块，它负责渲染 UI 的一部分。在 React 中，组件主要有两种类型：

5.1.1 函数组件 (Functional Components)

函数组件是目前 React 官方推荐的组件编写方式，特别是配合 Hooks 使用时。它就是一个普通的 JavaScript 函数，接收一个参数（props），并返回一个 React 元素（通常是 JSX）。

“`javascript
// src/components/Welcome.js (新建一个components目录用于存放组件)

import React from ‘react’;

// 这是一个函数组件，接收 props 作为参数
function Welcome(props) {
// 返回 JSX，描述组件的 UI
return (

);
}

// 导出组件，以便在其他地方导入和使用
export default Welcome;
“`

5.1.2 Class 组件 (Class Components)

Class 组件是早期 React 中使用的方式，现在依然存在于很多老项目中，并且在某些特定场景下（如需要生命周期方法）仍然可以使用（尽管 Hooks 已经提供了替代方案）。它是一个 JavaScript 类，继承自 React.Component，并且必须包含一个 render() 方法，该方法返回一个 React 元素。

“`javascript
// Class 组件示例 (了解即可，日常开发推荐函数组件)

import React, { Component } from ‘react’;

class Greeting extends Component {
render() {
// 通过 this.props 访问传递的数据
return (

);
}
}

export default Greeting;
“`

注意: 从 React 16.8 版本引入 Hooks 后，函数组件配合 Hooks 已经能够实现 Class 组件的大部分功能，并且写起来更简洁、更易于理解和测试，因此推荐优先使用函数组件。

5.3 JSX

JSX (JavaScript XML) 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的结构。React 使用 JSX 来描述 UI 的样子。

“`javascript
// JSX 示例
const element = (

);
“`

JSX 的特点和注意事项:

• 不是字符串，也不是 HTML: JSX 不是模板语言，也不是 HTML 字符串。它实际上是 React.createElement() 函数调用的语法糖。上面的 JSX 会被 Babel (一个 JavaScript 编译器) 转换成如下 JavaScript 代码：

  javascript
const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Hello, React!'),
React.createElement('p', null, 'This is written in JSX.')
);
  这就是为什么 React 组件函数需要 return JSX，因为它们最终返回的是 React.createElement() 调用返回的 JavaScript 对象。

• 嵌入 JavaScript 表达式: 你可以在 JSX 中使用花括号 {} 来嵌入任何有效的 JavaScript 表达式。

  “`javascript
  const name = ‘World’;
  const element =

  Hello, {name}!

  ; // 嵌入变量

  function formatName(user) {
  return user.firstName + ‘ ‘ + user.lastName;
  }
  const user = { firstName: ‘John’, lastName: ‘Doe’ };
  const greeting = (

  Welcome, {formatName(user)}!

  // 嵌入函数调用
  );

  const isLoggedIn = true;
  const welcomeMessage = (

  {isLoggedIn ?

  Welcome back!

  :

  Please log in.

  } {/ 嵌入条件表达式 /}

  );
  “`

• 属性 (Attributes): 在 JSX 中设置 HTML 元素的属性与 HTML 类似，但有一些区别：

  • 使用驼峰命名法 (camelCase) 来表示属性名，例如 className 代替 class，htmlFor 代替 for。这是因为 class 和 for 是 JavaScript 的保留字。
  • 属性值如果是字符串，用引号包裹；如果是 JavaScript 表达式（变量、数字、布尔值、对象等），用花括号 {} 包裹。

  javascript
const myClass = 'highlight';
const link = <a href="https://reactjs.org" className={myClass}>Link</a>; // className 使用变量
const image = <img src="logo.png" alt="React Logo" />; // src, alt 使用字符串
const isDisabled = true;
const button = <button disabled={isDisabled}>Click Me</button>; // disabled 使用布尔值

• 单根元素: JSX 代码块必须有一个单一的根元素。如果你需要返回多个元素，可以将它们包裹在一个父元素中（如 <div> 或 <Fragment>)。

  “`javascript
  // 错误示例 – 多个根元素
  // return (
  //

  Title

  //

  Paragraph

  // );

  // 正确示例 – 包裹在 div 中
  return (

  Title

  Paragraph

  );

  // 正确示例 – 使用 Fragment (推荐，不增加额外的 DOM 节点)
  import React, { Fragment } from ‘react’;
  // 或者使用短语法 <>
  return (
  {/ 或者直接写成 <> /}

  Title

  Paragraph

  // 或者直接写成
  );
  “`

• 自闭合标签: 没有子元素的标签可以使用自闭合形式，例如 <img />、<input />。

• 注释: 在 JSX 中，注释需要用花括号 {} 包裹，并且是 JavaScript 的多行注释形式 /* ... */ 或单行注释 // ...（如果注释内容后面没有其他代码）。

  javascript
const element = (
<div>
{/* 这是一个 JSX 注释 */}
<h1>Hello</h1>
{/*
这是一个多行
JSX 注释
*/}
<p>World</p> {/* // 这是行尾注释 */}
</div>
);

5.4 Props

Props (Properties 的缩写) 是父组件向子组件传递数据的方式。它们是组件间通信的重要手段，数据流是单向的，总是从父组件流向子组件。

回忆上面的 Welcome 函数组件：

javascript
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

在父组件中使用 Welcome 组件时，可以通过 HTML 属性的方式传递数据：

“`javascript
// 在父组件 App.js 中使用 Welcome

import React from ‘react’;
import Welcome from ‘./components/Welcome’; // 导入 Welcome 组件

function App() {
return (

);
}

export default App;
“`

在 Welcome 组件内部，可以通过 props 参数访问父组件传递的数据。props 是一个对象，其中包含了所有传递的属性。例如，传递了 name="Alice"，那么在 Welcome 组件中，props.name 的值就是 "Alice"。

Props 的重要特性:

• 只读性 (Read-Only): 子组件接收到的 props 是只读的，它们不应该尝试修改 props。如果组件需要改变数据，应该使用 State (后面会讲到)。这有助于保持数据流的清晰和可预测。

• 传递各种数据类型: Props 不仅可以传递字符串，还可以传递数字、布尔值、数组、对象，甚至是函数或 JSX 元素。

  javascript
// 示例：传递不同类型的 props
<ChildComponent
number={123}
bool={true}
list={[1, 2, 3]}
user={{ id: 1, name: 'Test' }}
onClick={() => console.log('Button clicked')} // 传递函数
header={<h2>Custom Header</h2>} // 传递 JSX
/>

5.5 State

State (状态) 是组件内部管理的数据，这些数据可能会随着时间的推移而改变，并且这些变化会触发组件的重新渲染 (re-render)。与 props 不同，State 是组件私有的，并且可以在组件内部进行修改（当然需要使用特定的方法）。

对于函数组件，我们使用 Hooks 中的 useState Hook 来管理 State。

5.5.1 使用 useState Hook

useState 是一个函数，它接收一个参数作为 State 的初始值，并返回一个数组。这个数组包含两个元素：
1. 当前的 State 值。
2. 一个用于更新 State 的函数。

通常使用数组解构来获取这两个元素。

“`javascript
// src/components/Counter.js

import React, { useState } from ‘react’; // 导入 useState Hook

function Counter() {
// 声明一个名为 count 的 State 变量，初始值为 0
// setCount 是用于更新 count 的函数
const [count, setCount] = useState(0);

// 定义一个函数来增加 count
const handleIncrement = () => {
// 使用 setCount 更新 State
// 当 State 更新时，组件会重新渲染
setCount(count + 1);
// 注意：State 更新可能是异步的，不要依赖于紧随其后的 count 值
// 如果新的 State 依赖于旧的 State，可以使用函数式更新
// setCount(prevCount => prevCount + 1);
};

const handleDecrement = () => {
setCount(count – 1);
};

return (

);
}

export default Counter;
“`

使用 Counter 组件:

“`javascript
// 在 App.js 或其他父组件中使用
import React from ‘react’;
import Counter from ‘./components/Counter’;

function App() {
return (

);
}

export default App;
“`

现在运行你的应用，你将看到一个计数器，点击按钮可以增加或减少数字。

State 的重要注意事项:

• 不要直接修改 State: 永远不要直接修改 State 变量（例如 count = 5;），而是使用 State 更新函数 (setCount) 来修改。直接修改 State 不会触发组件的重新渲染。
• State 更新是异步的: setCount 函数的调用并不会立即更新 State。React 会批量处理 State 更新以提高性能。如果你需要基于最新的 State 来计算下一个 State，应该使用函数式更新的形式：setCount(prevCount => prevCount + 1)。
• 每次 State 更新都会触发重新渲染: 当你调用 State 更新函数时，React 会重新渲染该组件及其子组件。

5.6 事件处理 (Event Handling)

在 React 中处理事件（如点击、输入、鼠标悬停等）与在 HTML 中类似，但有一些区别：

• 使用驼峰命名法: 事件名称使用驼峰命名法，例如 onClick 代替 onclick，onChange 代替 onchange。
• 传递函数作为事件处理程序: 你需要将一个函数作为事件处理程序的属性值，而不是一个字符串。
• 阻止默认行为: 要阻止默认行为（例如表单提交刷新页面，链接跳转），你需要显式地调用事件对象上的 preventDefault() 方法。在 React 事件处理程序中，你不需要返回 false。

“`javascript
function MyButton() {
const handleClick = (event) => {
// event 对象是 React 合成的事件对象，它包含了原生事件的属性
console.log(‘Button clicked!’);
console.log(event); // 可以查看事件对象
// event.preventDefault(); // 如果是 form 或 a 标签的事件，可以在这里阻止默认行为
};

return (
Click Me
);
}

// 传递参数给事件处理函数
function ArgumentButton() {
const handleClickWithArg = (arg, event) => {
console.log(‘Argument:’, arg);
console.log(‘Event:’, event);
};

return (
// 使用箭头函数包装，以便在事件发生时调用 handleClickWithArg 并传递参数
handleClickWithArg(‘Hello’, event)}>Click With Argument
);
}
“`

5.7 条件渲染 (Conditional Rendering)

在 React 中，你可以根据条件来决定渲染哪些元素。常用的方法包括：

• if / else 语句: 在组件函数体内部使用标准的 JavaScript if/else 语句。

  “`javascript
  function UserGreeting(props) {
  return

  Welcome back!

  ;
  }

  function GuestGreeting(props) {
  return

  Please sign up.

  ;
  }

  function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
  return ;
  }
  return ;
  }

  // 使用: 或
  “`

• 逻辑与 && 运算符: 如果你只需要在条件为真时渲染某个元素，可以使用逻辑与运算符。

  “`javascript
  function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (

  Hello!

  {unreadMessages.length > 0 && // 条件为真时，&& 后面的表达式会被渲染

  You have {unreadMessages.length} unread messages.

  }

  );
  }

  // 使用:
  “`

• 三元运算符 condition ? true : false: 适用于需要在两种情况下渲染不同元素的情况。

  “`javascript
  function LoginControl(props) {
  const isLoggedIn = props.isLoggedIn;
  return (

  { isLoggedIn
  ? Logout // 条件为真时渲染
  : Login // 条件为假时渲染
  }

  );
  }

  // 使用:
  “`

5.8 列表渲染 (List Rendering)

渲染列表元素（如一个项目列表）通常使用 JavaScript 的 map() 方法来遍历数组，并为数组中的每个元素返回一个 React 元素。

“`javascript
function NumberList(props) {
const numbers = props.numbers; // numbers 是一个数组，例如 [1, 2, 3, 4, 5]

const listItems = numbers.map((number) =>
// 为列表中的每个项目返回一个 li 元素
// 关键点：每个列表项都应该有一个唯一的 key prop

);

return (

{listItems}

// 将列表项数组放在 ul 标签中
);
}

// 使用:
“`

Key (键) 的重要性:

当你渲染列表时，React 要求给列表中的每个元素添加一个唯一的 key prop。

• 为什么需要 Key? key prop 帮助 React 识别哪些元素在列表中发生了变化、被添加或被删除。它使得 React 能够高效地更新列表 UI，而不是简单地重新渲染整个列表。Key 值在兄弟节点之间必须是唯一的。
• 选择合适的 Key: 最好的 Key 是列表中项目的稳定、唯一的标识符，例如数据的 ID。
• 避免使用数组索引作为 Key: 如果列表的顺序可能改变，或者列表项会被添加/删除，使用数组索引作为 key 可能会导致性能问题和潜在的 bug（如状态混乱）。只有当列表项是静态的、不会改变顺序或被添加/删除时，才能考虑使用索引作为 Key。

“`javascript
// 推荐：使用数据的唯一 ID 作为 key
const todoItems = todos.map(todo =>

);

// 不推荐：使用索引作为 key (除非确定列表是静态的)
const listItems = numbers.map((number, index) =>

);
“`

6. 动手实践：构建一个简单的应用

现在我们已经学习了 React 的一些核心概念，让我们尝试将它们组合起来，构建一个稍微复杂一点的组件。我们将创建一个简单的待办事项列表组件，可以添加新的待办事项并显示列表。

这个例子将结合使用 State、Event Handling、Conditional Rendering 和 List Rendering。

“`javascript
// src/components/TodoList.js

import React, { useState } from ‘react’;

function TodoList() {
// State 1: 存储待办事项列表，初始为空数组
const [todos, setTodos] = useState([]);
// State 2: 存储当前输入框的值，初始为空字符串
const [inputValue, setInputValue] = useState(”);

// 事件处理函数：当输入框内容改变时更新 inputValue State
const handleInputChange = (event) => {
setInputValue(event.target.value);
};

// 事件处理函数：当点击添加按钮时或按回车键时添加待办事项
const handleAddTodo = () => {
// 检查输入框是否为空
if (inputValue.trim() === ”) {
alert(‘Todo cannot be empty!’);
return;
}

// 创建新的待办事项对象，包含一个唯一的 id 和文本内容
const newTodo = {
  id: Date.now(), // 使用时间戳作为简易的唯一 ID
  text: inputValue,
};

// 更新 todos State
// 使用 spread operator (...) 创建新数组，并添加 newTodo
// 记住 State 更新应该创建新的数据，而不是修改原有数据
setTodos([...todos, newTodo]);

// 清空输入框
setInputValue('');

};

// 事件处理函数：处理键盘按下事件，如果是 Enter 键则调用 handleAddTodo
const handleKeyPress = (event) => {
if (event.key === ‘Enter’) {
handleAddTodo();
}
};

return (

  {/* 条件渲染：如果没有待办事项则显示提示信息 */}
  {todos.length === 0 ? (
    <p>No todos yet. Add one!</p>
  ) : (
    // 列表渲染：遍历 todos 数组，为每个事项渲染一个 li
    <ul>
      {todos.map(todo => (
        <li key={todo.id}> {/* 使用 todo.id 作为 key */}
          {todo.text}
        </li>
      ))}
    </ul>
  )}
</div>