React 入门指南：从零开始构建现代用户界面

欢迎来到 React 的世界！如果你对构建交互式、高效的 Web 用户界面充满兴趣，那么 React 绝对是你值得学习的强大工具。作为 Facebook（现更名为 Meta）开发并维护的一个 JavaScript 库，React 已经成为前端开发领域最流行、最重要的技术之一。

这篇指南将带你从零开始，逐步了解 React 的核心概念，学习如何搭建开发环境，并亲手写出你的第一个 React 应用。无论你之前是否有使用过其他前端框架的经验，只要你具备 HTML、CSS 和 JavaScript 的基础知识，你就能轻松踏上 React 之旅。

让我们开始吧！

第一部分：认识 React

1.1 什么是 React？

简单来说，React 是一个用于构建用户界面的 JavaScript 库。注意，它是一个“库”，而不是一个完整的“框架”。这意味着 React 主要关注视图层（UI）的构建，你可以很方便地将其嵌入到现有的项目中，或者与其他库（如用于路由的 React Router、用于状态管理的 Redux/Zustand 等）结合使用，构建功能完善的单页应用（SPA）或复杂网站。

1.2 React 的核心思想

React 之所以流行，得益于它的一些核心思想：

• 声明式 (Declarative)： 你只需要告诉 React 你希望 UI 在特定状态下看起来是什么样子，而无需关心如何一步一步地改变 DOM 来达到这个状态。React 会负责高效地更新和渲染 UI。这使得代码更易于理解和维护。
• 组件化 (Component-Based)： 将 UI 拆分成独立、可复用的组件是 React 的核心。每个组件都有自己的逻辑和外观，可以像乐高积木一样组合起来构建复杂的 UI。这种模式极大地提高了代码的组织性、可维护性和复用性。
• 一次学习，随处编写 (Learn Once, Write Anywhere)： React 不仅可以用于 Web 开发（React DOM），还有 React Native 可以用于构建原生移动应用（iOS 和 Android）。学习了 React 的核心概念，你就可以轻松地跨平台开发。
• 虚拟 DOM (Virtual DOM)： 为了提高性能，React 在内存中维护一个虚拟的 UI 结构（Virtual DOM）。当组件状态发生变化时，React 首先更新 Virtual DOM，然后通过 Diffing 算法比较 Virtual DOM 和真实 DOM 的差异，最后只更新真实 DOM 中需要改变的部分。这比直接操作真实 DOM 更高效。

1.3 为什么选择 React？

• 社区庞大且活跃： 遇到问题很容易找到解决方案，有大量的第三方库和工具可用。
• 性能优秀： 虚拟 DOM 带来的高效更新机制。
• 强大的生态系统： 围绕 React 发展起来的路由、状态管理、UI 库等非常丰富。
• 可维护性高： 组件化让代码结构清晰，易于管理和测试。
• 就业机会多： React 是前端招聘中最受欢迎的技能之一。

第二部分：准备工作

在开始编写 React 代码之前，你需要准备好开发环境。

2.1 前置知识

确保你掌握以下基础知识：

• HTML: 了解标签、结构等基础。
• CSS: 了解样式、布局等基础。
• JavaScript:
  • 变量（let, const）
  • 函数（包括箭头函数 =>）
  • 对象和数组
  • 模块化（import, export）
  • Promises/Async/Await (用于处理异步操作，如数据请求)
  • ES6+ 新特性会很有帮助，React 代码大量使用了这些特性。

2.2 安装必要的工具

你需要在你的计算机上安装以下工具：

1. Node.js 和 npm/yarn/pnpm:

   • React 的开发需要 Node.js 环境来运行构建工具和服务。npm (Node Package Manager) 是 Node.js 默认的包管理器，用于安装各种 JavaScript 库和工具。yarn 和 pnpm 是另外两种流行的包管理器，功能类似，性能可能更好。推荐安装 Node.js 的最新LTS (长期支持) 版本。
   • 访问 Node.js 官网 (https://nodejs.org/) 下载并安装适合你操作系统的版本。安装 Node.js 时会自带 npm。
   • 安装完成后，打开终端或命令行工具，输入以下命令检查是否安装成功：
     bash
node -v
npm -v
# 或者如果你安装了 yarn:
yarn -v
# 或者如果你安装了 pnpm:
pnpm -v

2. 代码编辑器:

   • 一个好的代码编辑器能极大提高开发效率。推荐使用 VS Code (https://code.visualstudio.com/)，它有丰富的 React 插件（如 ESLint, Prettier, React Developer Tools 等）和良好的 JSX 支持。

第三部分：创建你的第一个 React 项目

React 代码通常不会直接在浏览器中运行，因为它们包含 JSX (一种语法扩展) 和现代 JavaScript 特性，需要通过构建工具（如 Webpack, Rollup 或 esbuild）进行转换和打包。

为了让你快速开始，我们将使用现代的构建工具 Vite 来创建一个 React 项目模板。Vite 基于原生 ES 模块，开发服务器启动和热更新非常快。

3.1 使用 Vite 创建项目

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

“`bash

使用 npm

npm create vite@latest my-react-app –template react

或者使用 yarn

yarn create vite my-react-app –template react

或者使用 pnpm

pnpm create vite my-react-app –template react

“`

• npm create vite@latest: 运行 Vite 的创建工具。
• my-react-app: 这是你的项目文件夹名称，你可以改成任何你喜欢的名字。
• --template react: 指定使用 React 模板。

命令执行后，Vite 会在当前目录下创建一个名为 my-react-app 的文件夹，包含一个基础的 React 项目结构。

3.2 安装依赖并运行项目

进入新创建的项目文件夹：

bash
cd my-react-app

然后安装项目所需的依赖：

“`bash

使用 npm

npm install

或者使用 yarn

yarn install

或者使用 pnpm

pnpm install

“`

安装完成后，运行开发服务器：

“`bash

使用 npm

npm run dev

或者使用 yarn

yarn dev

或者使用 pnpm

pnpm dev

“`

你的终端会显示开发服务器的地址，通常是 http://localhost:5173/ (端口号可能不同)。在浏览器中打开这个地址，你应该能看到一个 React 的欢迎页面。

恭喜！你已经成功创建并运行了你的第一个 React 应用。

3.3 项目文件结构概览

让我们看一下 my-react-app 文件夹里的主要文件：

my-react-app/
├── node_modules/ # 项目依赖的库文件
├── public/ # 静态资源文件夹 (例如 favicon.ico)
├── src/ # 存放项目源码
│ ├── assets/ # 存放静态资源 (图片等)
│ ├── App.css # App 组件的样式文件
│ ├── App.jsx # 项目的主要组件文件
│ ├── index.css # 全局样式文件
│ ├── main.jsx # 项目入口文件
│ └── react.svg # React Logo 图片
├── .eslintrc.cjs # ESLint 配置文件 (代码规范检查)
├── .gitignore # Git 忽略文件列表
├── index.html # 项目的 HTML 入口文件
├── package.json # 项目配置文件，记录依赖和脚本命令
├── vite.config.js # Vite 配置文件
└── README.md # 项目说明文件

• index.html: 这是浏览器加载的唯一 HTML 文件。注意 <div id="root"></div> 这个元素，React 应用将挂载到这里。
• src/main.jsx: 这是 React 应用的入口文件。它使用 ReactDOM.createRoot 将根组件 (<App />) 渲染到 index.html 中的 #root 元素里。
• src/App.jsx: 这是一个示例的 React 组件，你看到的欢迎页面就是由它渲染的。你将大部分时间花在 src 目录下的组件文件中。

第四部分：React 核心概念详解

现在，让我们深入了解构建 React 应用所必需的核心概念。我们将主要关注函数式组件和 Hooks，因为它们是现代 React 的主流用法。

4.1 组件 (Components)

组件是 React 应用的基石。它们是独立、可复用的 UI 单元。一个组件就是一个函数（或类），它接收输入（称为 props），并返回描述 UI 的 React 元素。

函数式组件 (Functional Components):

这是现代 React 中推荐的组件创建方式。它们是简单的 JavaScript 函数。

“`javascript
// src/components/WelcomeMessage.jsx
import React from ‘react’; // 在使用 JSX 的文件中通常需要导入 React

function WelcomeMessage(props) {
return (

);
}

export default WelcomeMessage; // 导出组件以便在其他地方使用
“`

使用组件:

你可以在其他组件或入口文件中像 HTML 标签一样使用你定义的组件：

“`javascript
// src/App.jsx
import React from ‘react’;
import WelcomeMessage from ‘./components/WelcomeMessage’; // 导入组件

function App() {
return (

);
}

export default App;
“`

4.2 JSX (JavaScript XML)

你在上面的代码中看到了类似 HTML 的语法，比如 <h1>Hello, {props.name}!</h1>。这不是普通的 HTML，而是 JSX。

• JSX 是 JavaScript 的语法扩展，它允许你在 JavaScript 代码中书写类似 HTML 的结构。
• React 推荐使用 JSX 来描述 UI 的外观。构建工具（Vite 在底层使用 Esbuild 或 Babel）会将 JSX 转换成标准的 JavaScript 函数调用（如 React.createElement()），浏览器才能理解。
• JSX 使得 UI 结构更直观，与组件的逻辑紧密结合，提高了代码的可读性。

JSX 的一些规则:

1. 必须有一个根元素: 相邻的 JSX 元素必须包裹在一个父元素中（如 <div>, <span>, 或者使用 React 的 Fragment <>）。

   “`javascript
   // ✅ 正确
   return (

   Element 1

   Element 2

   );

   // ✅ 正确 (使用 Fragment)
   return (
   <>

   Element 1

   Element 2

   );

   // ❌ 错误
   // return (
   //

   Element 1

   //

   Element 2

   // );
   “`

2. 标签必须闭合: 无论是 HTML 标签（如 <img>, <input>) 还是自定义组件，都必须正确闭合。自闭合标签使用 /。

   “`javascript
   // ✅ 正确
   
   
   

   // ❌ 错误
   //
   //
   //
   “`

3. 在 JSX 中嵌入 JavaScript 表达式: 使用花括号 {} 在 JSX 中插入 JavaScript 变量、函数调用或任何表达式。

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

   Hello, {name}!

   ; // 嵌入变量

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

   Hello, {formatName(user)}! {/ 嵌入函数调用 /}
   

   );

   // 嵌入表达式
   const sum = 1 + 2;
   const result =

   The sum is: {sum}

   ; // The sum is: 3
   “`

4. JSX 属性 (Attributes): 大多数 HTML 属性在 JSX 中可以直接使用，但有一些例外和约定：

   • 使用驼峰命名法 (camelCase) 代替 kebab-case，例如 className 代替 class (因为 class 是 JavaScript 的保留字)，htmlFor 代替 for。
   • 如果属性值是字符串常量，使用双引号 "。
   • 如果属性值是 JavaScript 表达式（变量、数字、对象等），使用花括号 {}。

   “`javascript
   const myId = ‘myElement’;
   const imageUrl = ‘logo.png’;

   {/ 动态 id, 静态 class /}
   {/ 动态 src, 静态 alt /}
   Click me {/ 属性值是函数 /}
   {/ 属性值是布尔值 /}

   {/ 属性值是对象 /}
   Styled text

   ``
注意style` 属性的值是一个 JavaScript 对象，对象的属性名是驼峰命名法。

4.3 Props (属性)

Props 是组件之间传递数据的方式。它是从父组件向子组件传递数据的一种机制。Props 是只读的，子组件不应该修改接收到的 props。

• 父组件通过属性的方式将数据传递给子组件。
• 子组件通过其函数签名的第一个参数 props 对象来接收这些数据。

“`javascript
// 父组件 (ParentComponent.jsx)
import React from ‘react’;
import ChildComponent from ‘./ChildComponent’;

function ParentComponent() {
const greetingText = “Hello from Parent!”;

return (

);
}

export default ParentComponent;

// 子组件 (ChildComponent.jsx)
import React from ‘react’;

function ChildComponent(props) {
// props 对象将包含所有父组件传递的属性
// console.log(props); // 输出: { message: “Hello from Parent!”, count: 10, isActive: true, items: [‘A’, ‘B’] }

return (

);
}

export default ChildComponent;
“`

解构 Props:

在函数式组件中，通常使用 JavaScript 的对象解构语法来更方便地访问 props：

“`javascript
// 子组件 (ChildComponent.jsx) – 使用解构
import React from ‘react’;

function ChildComponent({ message, count }) { // 直接解构 props 对象
return (

);
}

export default ChildComponent;
“`

4.4 State (状态)

State 是组件用来管理其内部数据的一种机制。与 props 不同，state 是组件自己管理的数据，并且这些数据可能会随着时间的推移而发生变化，例如用户的输入、计时器的更新、数据的加载状态等。当 state 发生变化时，React 会重新渲染组件。

在函数式组件中，我们使用 useState Hook 来管理 state。

useState Hook:

• useState 是 React 提供的一个函数，用于在函数组件中添加状态。
• 调用 useState() 会返回一个包含两个元素的数组：
  1. 当前的 state 值。
  2. 一个用于更新 state 的函数。
• useState() 接受一个参数，作为 state 的初始值。

“`javascript
// src/components/Counter.jsx
import React, { useState } from ‘react’; // 导入 useState Hook

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

// 定义一个点击事件处理函数
const handleButtonClick = () => {
// 使用 setCount 函数更新 count 的值
// React 会检测到 state 变化并重新渲染 Counter 组件
setCount(count + 1);
};

return (

);
}

export default Counter;
“`

将 Counter 组件添加到 App.jsx 中，运行应用，点击按钮，你会看到数字增加。

State 的不可变性 (Immutability):

在 React 中更新 state 时，尤其是更新对象或数组类型的 state，绝不能直接修改原有的 state 值。你必须创建一个新的对象或数组来替换旧的 state。

“`javascript
// ❌ 错误: 直接修改对象属性，React 可能无法检测到变化
// const [user, setUser] = useState({ name: ‘Alice’, age: 30 });
// const updateUserAge = () => {
// user.age += 1; // ❌ 错误! 直接修改了 user 对象
// setUser(user); // ❌ 错误! 虽然调用了 setter，但传入的是同一个对象引用
// };

// ✅ 正确: 创建新的对象
const [user, setUser] = useState({ name: ‘Alice’, age: 30 });
const updateUserAge = () => {
setUser({ …user, age: user.age + 1 }); // ✅ 正确! 使用展开运算符创建新对象并修改 age
};

// ❌ 错误: 直接修改数组
// const [items, setItems] = useState([‘A’, ‘B’]);
// const addItem = (newItem) => {
// items.push(newItem); // ❌ 错误! 直接修改了 items 数组
// setItems(items); // ❌ 错误! 传入的是同一个数组引用
// };

// ✅ 正确: 创建新的数组
const [items, setItems] = useState([‘A’, ‘B’]);
const addItem = (newItem) => {
setItems([…items, newItem]); // ✅ 正确! 使用展开运算符创建新数组并添加 newItem
};
“`

理解并遵循 state 的不可变性对于 React 的性能优化和正确更新至关重要。

4.5 事件处理 (Event Handling)

在 React 中处理事件与在普通 HTML 中类似，但有一些 React 特有的语法：

• 事件名称使用驼峰命名法，例如 onClick, onChange, onSubmit。
• 事件处理函数作为属性值传递，用花括号 {} 包裹。
• 你传递的是函数本身，而不是函数调用的结果。

“`javascript
// src/components/EventHandlerDemo.jsx
import React from ‘react’;

function EventHandlerDemo() {
// 事件处理函数
const handleClick = (event) => {
// 事件对象 (event) 与原生 DOM 事件对象类似，但经过 React 封装 (SyntheticEvent)
console.log(‘Button clicked!’, event);
};

const handleChange = (event) => {
console.log(‘Input value changed:’, event.target.value);
};

const handleFormSubmit = (event) => {
event.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
console.log(‘Form submitted!’);
// 在这里处理表单数据
};

return (

  <input type="text" onChange={handleChange} placeholder="Type something..." />

  <form onSubmit={handleFormSubmit}>
    <button type="submit">Submit Form</button>
  </form>

  {/* ❌ 错误：这是函数调用的结果，会在渲染时立即执行 */}
  {/* <button onClick={handleClick()}>Click Me (Incorrect)</button> */}

  {/* ✅ 如果需要传递参数给事件处理函数，可以使用箭头函数或 bind */}
  <button onClick={() => handleClick('Extra Arg')}>Click with Arg</button>
  {/* <button onClick={handleClick.bind(this, 'Extra Arg')}>Click with Arg (Bind)</button> */}
</div>

// 模拟数据获取
// fetch('/api/some-data')
//   .then(response => response.json())
//   .then(data => setData(data));

// 返回一个清理函数 (可选)
return () => {
  // 清理函数会在组件卸载或 effect 重新运行之前执行
  console.log('Cleanup running...');
  // 取消订阅、清除计时器等
};

// 例如：只在组件加载时获取数据
// fetch('/api/initial-data')
//   .then(response => response.json())
//   .then(data => setData(data));

// 必须返回一个清理函数来清理副作用
return () => {
  console.log('Cleanup running ONCE (on unmount)');
  // 例如：清除计时器、取消事件监听、取消订阅等
  // clearInterval(timerId);
};

// 例如：当某个 state 或 prop 改变时执行特定操作
// saveCountToLocalStorage(count);

  <section className="App-section">
    {/* 使用 WelcomeMessage 组件，通过 props 传递数据 */}
    <WelcomeMessage name={userName} />
  </section>

  <section className="App-section">
    <h2>计数器</h2>
    {/* 使用 Counter 组件 */}
    <Counter />
  </section>

  <section className="App-section">
    <h2>待办事项列表</h2>
    {/* 使用 ItemList 组件，通过 props 传递数据 (虽然 ItemList 自己定义了数据，这里可以修改它接收数据) */}
    {/* 假设我们修改 ItemList 接收 items 数组作为 prop */}
    {/* <ItemList items={itemsData} /> */}
    {/* 为了简化示例，我们还是使用 ItemList 内部数据的版本 */}
    <ItemList />
  </section>

  <section className="App-section">
    <h2>Effect Hook 示例</h2>
    {/* 使用 EffectDemo 组件 */}
    <EffectDemo />
  </section>

  <section className="App-section">
    <h2>事件处理示例</h2>
    {/* 使用 EventHandlerDemo 组件 */}
    <EventHandlerDemo />
  </section>

  <footer>
    <p>指南结束，开始实践吧！</p>
  </footer>
</div>