从零开始学 React：踏上现代前端开发的征程

欢迎来到现代前端开发的世界！如果你对构建交互式、高效的用户界面感兴趣，那么你很可能听说过 React。作为一个由 Facebook 创建并维护的 JavaScript 库，React 已经成为构建单页应用（SPA）和移动应用（通过 React Native）的事实标准之一。它以其声明式编程范式、组件化思想和高效的虚拟 DOM 更新机制，极大地提升了前端开发的效率和体验。

本文将带领你从零开始，一步步了解 React 是什么、为什么学习它，以及如何开始你的 React 学习之旅。即使你没有接触过任何前端框架，只要具备一定的 JavaScript 基础，就能跟着本文踏上征程。

第一步：夯实基础——必要的准备

在 diving deep (深入) React 之前，确保你已经掌握了以下基础知识：

HTML & CSS 基础: 你需要理解如何构建网页结构（HTML）和如何美化它们（CSS）。React 主要处理 JavaScript 逻辑和结构，但最终渲染出来的仍然是 HTML 元素，样式也通过 CSS 控制。
JavaScript 基础: 这是最关键的基础。你需要对以下 JavaScript 概念有扎实的理解：
- 变量和数据类型: let, const 的使用。
- 函数: 包括箭头函数（Arrow Functions），在 React 函数组件中非常常用。
- 对象和数组: 熟悉如何操作数组（如 map, filter, reduce）和对象（如解构赋值）。
- ES6+ 特性: Promises, Async/Await（处理异步操作），模块化（import/export），解构赋值（Destructuring），扩展运算符（Spread Syntax）等。React 的现代用法大量依赖这些特性。
- 事件处理: 如何给 DOM 元素添加事件监听器。

如果你对这些概念感到陌生，请务必先花时间学习它们。MDN Web 文档（Mozilla Developer Network）是学习这些基础知识的绝佳资源。

第二步：搭建开发环境

学习 React 需要一个运行环境和一些工具。

安装 Node.js 和 npm/yarn/pnpm: React 项目通常使用 npm (Node Package Manager)、yarn 或 pnpm 来管理依赖。你需要安装 Node.js，安装 Node.js 时通常会自带 npm。可以从 Node.js 官网下载安装包：https://nodejs.org/。安装完成后，打开命令行工具，输入 node -v 和 npm -v 来检查是否安装成功。Yarn 和 pnpm 是替代 npm 的包管理器，安装方法可以查阅各自官网。
选择一个代码编辑器: 一个好的代码编辑器能极大提高开发效率。Visual Studio Code (VS Code) 是目前最受欢迎的选择，它有丰富的插件支持（如 ESLint, Prettier, React snippets）。
创建第一个 React 项目: 过去常用的方式是 Create React App (CRA)，但现在更推荐使用像 Vite 这样的构建工具，它能提供更快的开发服务器启动和热更新速度。
- 使用 Vite 创建项目（推荐）：
  打开命令行，输入以下命令：
  bash npm create vite@latest my-react-app --template react
  或者使用 yarn:
  bash yarn create vite my-react-app --template react
  或者使用 pnpm:
  bash pnpm create vite my-react-app --template react
  my-react-app 是你的项目名称，--template react 指定使用 React 模板。
- 进入项目目录：
  bash cd my-react-app
- 安装依赖：
  bash npm install # 或者 yarn install # 或者 pnpm install
- 启动开发服务器：
  bash npm run dev # 或者 yarn dev # 或者 pnpm dev
  你的第一个 React 应用就会在浏览器中打开，通常是 http://localhost:5173/ 或其他端口。

恭喜你！你已经成功创建并运行了你的第一个 React 应用。接下来，我们将深入 React 的核心概念。

第三步：理解核心概念

React 的强大之处在于其核心理念和概念。理解它们是掌握 React 的关键。

1. 组件 (Components)

组件是 React 应用的基石。你可以将用户界面拆分成独立的、可复用的部分，每个部分就是一个组件。想象一个网页，它可以拆分为 Header 组件、Sidebar 组件、Content 组件、Footer 组件等等。

React 中主要有两种类型的组件：

函数组件 (Functional Components): 这是目前推荐和主流的写法。它们是简单的 JavaScript 函数，接收 props (属性) 作为参数，并返回 React 元素 (JSX) 来描述 UI。
jsx function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
类组件 (Class Components): 过去常用的写法，现在较少在新代码中使用，但仍会在老项目中见到。它们是 ES6 的 Class，继承自 React.Component，通过 render() 方法返回 React 元素，通过 this.state 管理状态。
jsx class WelcomeClass extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
从零开始学习，建议你专注于函数组件和 Hooks。

2. JSX

JSX 是 JavaScript XML 的缩写，是一种 JavaScript 的语法扩展。它看起来很像 HTML，但实际上是 JavaScript 代码。使用 JSX 可以更直观地描述 UI 的结构。

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

JSX 最终会被 Babel 等工具编译成 React.createElement() 函数调用：

jsx const element = React.createElement( 'h1', null, 'Hello, world!' );

JSX 的一些规则：

根元素: 每个 JSX 表达式必须有一个唯一的根元素，或者使用 Fragment (<>...)。
闭合标签: 所有标签必须闭合，包括自闭合标签 (<img />, <input />)。
属性: 大部分 HTML 属性在 JSX 中使用驼峰命名法（camelCase），例如 class 变为 className，for 变为 htmlFor。
在 JSX 中嵌入 JavaScript 表达式: 使用花括号 {} 将 JavaScript 表达式嵌入到 JSX 中。
jsx const name = 'React'; const element = <h1>Hello, {name}!</h1>; // 嵌入变量 const sum = 2 + 2; const result = <p>The sum is: {sum}</p>; // 嵌入表达式
条件渲染: 在 JSX 中可以使用 JavaScript 的条件判断（if/else、三元运算符 ? :、逻辑与 &&）来实现条件渲染。
“`jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return

Welcome back!

;
}
return

Please sign up.

;
}

// 使用逻辑 &&
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (

Hello!

{unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}

);
}
* **列表渲染:** 使用 JavaScript 数组的 `map()` 方法来渲染列表。jsx
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
{/ 每个列表项需要一个唯一的 key 属性 /}
{number}

);

function NumberList(props) {
return (

{listItems}

);
}
`` **key属性非常重要！** 它帮助 React 识别哪些元素在列表中发生了变化、被添加或被移除。给列表中的每个元素一个稳定且唯一的key` 可以提高性能并避免渲染错误。

3. Props (属性)

Props 是组件之间传递数据的方式。父组件通过属性将数据传递给子组件，子组件通过其 props 参数接收这些数据。Props 是只读的，子组件不应该修改它们接收到的 props。

“`jsx
// 父组件
function App() {
return (

{/ 通过 name 属性传递数据 /}

);
}

// 子组件 (Welcome.js)
function Welcome(props) {
// props 是一个对象，包含父组件传递的所有属性
return

Hello, {props.name}

; // 使用 props.name 访问数据
}
“`

4. State (状态) 和 Hooks (useState)

State 是组件内部管理的数据，它可以随着时间的推移而改变，并且当 state 改变时，组件会重新渲染。

在函数组件中，我们使用 Hooks 来管理状态。useState 是最常用的 Hook 之一。

useState Hook 返回一个包含两个元素的数组：当前 state 的值，以及一个更新 state 的函数。

“`jsx
import React, { useState } from ‘react’; // 需要从 react 导入 useState

function Counter() {
// 声明一个名为 “count” 的 state 变量，并将其初始值设为 0
const [count, setCount] = useState(0);

return (

You clicked {count} times

{/ 当点击按钮时，调用 setCount 来更新 state /}

);
}
“`

当调用 setCount 时，React 会使用新的值重新渲染 Counter 组件。useState 的参数是 state 的初始值（可以是任何类型：数字、字符串、布尔值、对象、数组等）。

Props vs State:
* Props 是从父组件传递给子组件的，是外部的，只读的。
* State 是组件内部管理的，是私有的，可变的。
* 当 State 改变时，组件会重新渲染，这可能会影响使用该 State 的子组件。

5. 事件处理 (Event Handling)

在 React 中处理事件（如点击、输入框变化等）与处理 DOM 事件非常相似，但有一些语法上的区别：

事件名称使用驼峰命名法（camelCase），例如 onClick 而不是 onclick。
事件处理函数作为 JSX 属性的值，应该是一个函数引用，而不是字符串。

“`jsx
function MyButton() {
function handleClick() {
alert(‘Button clicked!’);
}

return (

);
}

// 如果需要传递参数，可以使用箭头函数
function MyButtonWithArg() {
function handleClick(message) {
alert(message);
}

return (

);
}
“`

第四步：构建一个简单的应用——计数器

现在，我们将前面学到的概念结合起来，构建一个简单的计数器应用。

打开你之前创建的 my-react-app 项目。
找到 src 目录，删除 App.css, index.css, assets 目录下的 logo 文件等非必需文件（或者根据你的 Vite 模板结构进行调整）。保留 main.jsx (或 main.tsx) 和 App.jsx (或 App.tsx)。
修改 main.jsx (或 main.tsx)，使其尽可能简洁，只负责将根组件渲染到页面上：
“`jsx
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App.jsx’;
// 可能需要移除一些默认导入的样式文件

ReactDOM.createRoot(document.getElementById(‘root’)).render(

);
4. 修改 `App.jsx` (或 `App.tsx`)，实现计数器组件：jsx
import React, { useState } from ‘react’; // 导入 useState

function App() {
const [count, setCount] = useState(0); // 使用 useState 定义 count 状态

return (

Simple Counter

Count: {count}

{/ 显示 count /}

);
}

export default App; // 导出 App 组件
`` 5. 运行npm run dev(或yarn dev,pnpm dev`)，在浏览器中查看效果。你应该能看到一个标题、当前计数，以及三个按钮，点击按钮可以修改计数。

通过这个例子，你实践了：
* 创建函数组件 (App)
* 使用 useState Hook 管理组件内部状态 (count)
* 在 JSX 中嵌入 JavaScript 表达式 ({count})
* 使用 onClick 事件处理函数响应用户交互 (setCount)

第五步：更进一步——掌握更多概念

掌握了基础后，可以开始探索 React 的更多特性和生态系统：

useEffect Hook: 用于处理副作用（Side Effects），比如数据获取、订阅、手动改变 DOM 等。它在组件渲染后执行。
“`jsx
import React, { useState, useEffect } from ‘react’;

function Timer() {
const [count, setCount] = useState(0);

useEffect(() => {
// 在组件挂载后和 count 更新后执行
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
```
// 清理函数：在组件卸载或 effect 重新执行前执行
return () => {
  clearInterval(timer);
};
```
}, []); // 依赖数组为空，表示只在组件挂载和卸载时执行

return

Timer: {count}

;
}
`` 依赖数组 ([]) 控制useEffect何时运行。空数组表示只在组件挂载 (mount) 和卸载 (unmount) 时执行一次（类似于类组件的componentDidMount和componentWillUnmount` 的结合）。省略依赖数组则在每次渲染后都执行。包含依赖项则在依赖项改变时执行。
条件渲染和列表渲染的更多实践: 练习更复杂的条件判断和列表展示场景。
组件组合 (Component Composition): 学习如何将小组件组合成复杂的 UI。React 鼓励你构建可复用的小组件，然后像乐高积木一样将它们组合起来。
Context API / 状态管理库: 当应用变得复杂，需要跨层级共享状态时，props drilling (逐层传递 props) 会变得很麻烦。Context API 是 React 内置的解决方案。对于更大型的应用，可以考虑使用 Redux, Zustand, MobX 等状态管理库。
React Router: 构建单页应用时，需要处理页面路由。React Router 是最流行的路由库。
数据获取 (Data Fetching): 学习如何在 React 组件中请求后端 API 获取数据（通常在 useEffect 中）。可以使用原生的 fetch API 或第三方库如 Axios。更高级的数据获取库如 React Query 或 SWR 可以帮助管理数据缓存、加载状态和错误处理。
样式 (Styling): 除了传统的 CSS 文件，React 社区还有多种样式解决方案，如 CSS Modules, Styled Components, Emotion, Tailwind CSS 等。
表单处理 (Form Handling): 学习如何管理表单输入和提交。

第六步：持续学习和实践

学习一个框架是一个持续的过程。

阅读官方文档: React 官方文档 (react.dev) 是最好的学习资源，它详细解释了所有概念和 API。
构建项目: 理论结合实践才能真正掌握。从简单的计数器、待办事项列表开始，逐步挑战更复杂的项目。尝试克隆一些网站的界面或功能。
阅读源代码: 学习优秀开源项目的代码，了解真实世界中 React 是如何使用的。
参与社区: 在 Stack Overflow, Reddit (r/reactjs), Discord 或本地技术社区提问和交流。
关注新特性: React 社区活跃，不断有新特性和最佳实践出现，保持学习的热情。

总结

从零开始学 React 可能会面临一些挑战，特别是对于刚接触前端的同学。但请记住，React 的核心思想是构建组件化的 UI，以及数据驱动视图更新。掌握了组件、JSX、Props、State 和 Hooks 这几个核心概念，你就已经迈出了坚实的第一步。

不要害怕犯错，多动手实践，多思考为什么。随着经验的积累，你会越来越熟练地使用 React 构建出复杂而高效的应用。

祝你学习顺利，享受使用 React 构建精彩用户界面的过程！前端开发的旅程充满了无限可能，勇敢地去探索吧！

从零开始学 React – wiki基地

从零开始学 React：踏上现代前端开发的征程

第一步：夯实基础——必要的准备

第二步：搭建开发环境

第三步：理解核心概念

1. 组件 (Components)

2. JSX

Welcome back!

Please sign up.

Hello!

You have {unreadMessages.length} unread messages.

3. Props (属性)

Hello, {props.name}

4. State (状态) 和 Hooks (useState)

5. 事件处理 (Event Handling)

第四步：构建一个简单的应用——计数器

Simple Counter

第五步：更进一步——掌握更多概念

第六步：持续学习和实践

总结

发表评论取消回复

从零开始学 React：踏上现代前端开发的征程

第一步：夯实基础——必要的准备

第二步：搭建开发环境

第三步：理解核心概念

1. 组件 (Components)

2. JSX

Welcome back!

Please sign up.

Hello!

You have {unreadMessages.length} unread messages.

3. Props (属性)

Hello, {props.name}

4. State (状态) 和 Hooks (useState)

5. 事件处理 (Event Handling)

第四步：构建一个简单的应用——计数器

Simple Counter

第五步：更进一步——掌握更多概念

第六步：持续学习和实践

总结

发表评论 取消回复

发表评论取消回复