Framework · 2013 年发布

React

React 是用组件构建用户界面的 JavaScript 库：你声明界面应有的样子，React 只更新发生变化的部分。

React 是由 Meta（当时的 Facebook）创建、于 2013 年开源的用户界面库。它把界面拆分成小的函数组件，每个组件根据接收到的 props 和自身持有的状态（state），用 JSX 描述自己应当呈现的样子。数据变化时，React 会把新结果与上一次比较，只把真正不同的部分应用到 DOM 上。

React 在按钮、表单和列表众多的交互式界面中尤其擅长。它广泛用于单页应用、数据看板、后台管理界面和设计系统；用 Next.js 等框架构建服务端渲染网站，或用 React Native 开发移动应用时，也沿用同一套思维方式。路由、数据请求、测试工具等生态非常丰富，可以按需挑选组合。

初学者可以先跟着 react.dev 上的快速入门和井字棋教程动手练习。官方文档建议新产品使用 Next.js 等框架，但学习阶段用 Vite 创建的简单项目更容易看清结构。先掌握数组方法、解构、模块等现代 JavaScript 语法，再学 JSX 和 Hooks 会轻松很多。

特点

基于组件的设计

把界面拆成独立的函数组件，通过 props 传递数据，再把小部件组合成完整页面。

使用 JSX 的声明式 UI

不必手动修改 DOM，只需用 JSX 写出当前状态对应的结果，React 会只更新变化的部分。

用 Hooks 管理状态与副作用

useState、useEffect、useRef、useContext 等 Hooks 让你在普通函数里处理状态、副作用、DOM 引用和共享数据。

广泛的生态系统

结合 Next.js、React Router、TanStack Query、React Native 等成熟工具，从 Web 到移动端都能用同样的方式开发。

适用场景

单页应用（SPA）
数据看板与后台管理界面
设计系统与可复用 UI 组件
结合 Next.js 或 React Native 的 Web 与移动应用

安装

1
准备 Node.js
React 的开发工具运行在 Node.js 上。从 nodejs.org 安装 LTS 版本，然后确认 node 和 npm 能显示版本号。
```
node --version && npm --version
```
2
用 Vite 创建项目
使用 Vite 的 react-ts 模板创建一个使用 TypeScript 的 React 项目。只想用 JavaScript 时，把模板名换成 react。
```
npm create vite@latest my-app -- --template react-ts
```
3
启动开发服务器
进入项目文件夹，安装依赖并启动开发服务器。在浏览器中打开终端显示的地址（默认是 http://localhost:5173）。
```
cd my-app && npm install && npm run dev
```

第一个程序

第一个组件

src/App.tsx 中的 App 函数是一个组件，它返回描述界面内容的 JSX。它用 useState Hook 创建 count 状态，点击按钮时 setCount 会修改这个值。状态改变后，React 会重新调用 App，并只更新屏幕上的数字。开发服务器运行期间，每次保存文件浏览器都会立即刷新。

src/App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev

常用工具

Vite: 前端构建工具，提供快速的开发服务器和经过优化的生产构建，并内置官方 React 项目模板。
React Developer Tools: 浏览器扩展，可以查看组件树以及每个组件的 props 和状态，并分析渲染性能。
ESLint: 代码检查工具。配合 eslint-plugin-react-hooks 可以发现违反 Hooks 规则的写法和遗漏的 Effect 依赖。
Vitest: 直接复用 Vite 配置的测试运行器。与 React Testing Library 搭配，从用户角度测试组件。

分步指南

共六章，带你从安装一步步了解 React 的核心概念。

官方文档与参考资料

使用的语言

讨论

发起讨论

在这里提问、分享经验，交流关于 React 的看法。

还没有讨论。来发起第一个吧。

特点