React

用于构建 Web 与原生用户界面的 JavaScript 组件库

开发框架 AI 开发免费开源

访问官网 GitHub 文档

核心功能

把界面拆成可复用的组件，用 JSX 描述结构，状态变化时由 React 负责更新对应的 DOM。适合交互复杂、需要长期维护的 Web 前端，也适合希望通过 React Native 复用同一套组件写法的移动端项目。

功能亮点

组件即函数

组件是返回 JSX 的普通函数，通过 props 单向接收数据，拆分和替换都很直接

可局部接管页面

createRoot(document.getElementById('nav')) 只渲染指定节点，页面其余 HTML 原样保留

服务端组件读数据

async 组件可直接查数据库再把结果作为 props 传给浏览器端组件，无需另建 API

局部加载态

把组件包进 Suspense 并给出 fallback，即可为页面某一块单独显示骨架屏

跨端复用组件写法

React Native 用 Metro 打包，把同样的组件思路映射到 iOS 与 Android 原生控件

适用场景

• 交互复杂的单页应用，用组件树承载大量局部状态与频繁的界面更新
• 搭配 Next.js 或 React Router 构建带服务端渲染、静态导出能力的全栈 Web 应用
• 在 Rails、Django 等既有服务端渲染页面上，用 createRoot 让 React 先接管某个区块再逐步扩大

安装配置

bash

官方推荐从全栈框架起步 —— Next.js（App Router）:
npx create-next-app@latest

React Router v7:
npx create-react-router@latest

Expo（面向 Android / iOS / Web 的原生应用）:
npx create-expo-app@latest

不用框架、从零搭建 —— Vite:
npm create vite@latest my-app -- --template react-ts

从零搭建 —— Rsbuild:
npx create-rsbuild --template react

从零搭建 —— Parcel:
npm install --save-dev parcel

加进已有项目:
npm install react react-dom

说明：本地开发需要先安装 Node.js。

使用方法

javascript

// index.js —— 把 React 组件渲染进页面中已有的 DOM 节点
import { createRoot } from 'react-dom/client';

function NavigationBar() {
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

<!-- index.html 中对应的挂载点 -->
<nav id="navigation"></nav>