react 入门

发布于 2026/08/18 · 公开

#react

react 入门

📖 什么是 React？

React 是一个用于构建用户界面（UI）的 JavaScript 库。它有几个核心特点：

组件化：将UI拆分成独立、可复用的组件（Components），每个组件都有自己的逻辑和外观。
声明式：你只需要描述UI在每种状态下“长什么样”，React 负责在数据变化时高效地更新和渲染。
JSX：一种 JavaScript 语法扩展，允许你在 JavaScript 代码中直接编写类似 HTML 的标记。

🛠️ 第一步：搭建开发环境

目前，官方推荐使用 Vite 来创建新的 React 项目，它比传统的 create-react-app 更快、更轻量。

操作步骤：

安装 Node.js：访问 nodejs.org 下载并安装 LTS（长期支持）版本。安装完成后，在终端（Terminal）中运行以下命令确认安装成功：
```
node -v
npm -v
```
创建项目：在终端中，导航到你想存放项目的文件夹，然后运行：
```
npm create vite@latest my-first-react-app -- --template react
```
这条命令会使用 Vite 创建一个名为 my-first-react-app 的新 React 项目。
安装依赖并启动：
```
# 进入项目文件夹
cd my-first-react-app
# 安装项目所需依赖
npm install
# 启动开发服务器
npm run dev
```
成功后，在浏览器中打开 http://localhost:5173，你就能看到你的第一个 React 应用了！

🧱 第二步：核心概念速览

React 官方文档的“快速入门”指南涵盖了日常开发80%会用到的核心概念：

组件（Components）
React 应用由组件构成。组件就是一个返回 JSX 的 JavaScript 函数。
```
function MyButton() {
  return (
    <button>我是一个按钮</button>
  );
}
```
JSX 与嵌套
JSX 比 HTML 更严格，标签必须正确闭合。你可以像使用HTML标签一样，在组件中嵌套另一个组件。注意：React 组件名必须以大写字母开头，以区别于 HTML 标签。
```
export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton /> {/* 嵌套使用 MyButton 组件 */}
    </div>
  );
}
```

Props（属性）
Props 用于从父组件向子组件传递数据。

// 父组件传递数据
function MyApp() {
  return <MyButton text="点击我" />;
}
// 子组件通过 props 接收数据
function MyButton(props) {
  return <button>{props.text}</button>;
}

State（状态）与 Hooks
State 是组件内部的数据，当 state 改变时，组件会重新渲染。useState 是最常用的 Hook，用于为函数组件添加状态。

import { useState } from 'react';

function MyButton() {
  // 声明一个叫 "count" 的 state 变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      点击了 {count} 次
    </button>
  );
}

事件处理
在 JSX 中，使用小驼峰命名法（onClick）绑定事件，并传入一个函数作为事件处理器。

掌握了这些，你就可以开始编写简单的交互式 React 应用了。

🗺️ 学习路线图

建议的学习路径：

核心基础 (Core React)：深入理解 组件、JSX、Props。目标是能用多个组件构建一个静态页面。
交互与状态 (Interactivity)：学习 State、事件处理、条件渲染、列表渲染。目标是让你的页面“活”起来，能响应用户操作。
副作用与数据 (Effects & Data)：学习 useEffect Hook 来处理副作用（如数据获取）。
进阶主题 (Advanced)：探索 Context（上下文）、Reducers（状态管理）、Router（路由） 等高级概念。