Skip to content
前端
React
安装与快速开始

安装与快速开始

React 是由 Meta (Facebook) 维护的用于构建用户界面的 JavaScript 库。它采用声明式、组件化的开发方式，通过 Virtual DOM 实现高效的 UI 更新。

官方文档：React 中文文档 新版 React 文档（react.dev）已全面转向函数组件 + Hooks。

前置条件

  • Node.js：18.0 或更高版本
  • npm / yarn / pnpm：任意一个包管理器
  • 现代浏览器：Chrome / Firefox / Edge 最新版

创建项目

方式一：Vite（推荐） 

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

Vite 相比 CRA 的优势：启动快（原生 ESM）、HMR 极速、构建用 Rollup。

方式二：Create React App（传统） 

npx create-react-app my-app
cd my-app
npm start

💡 最佳实践：2024 年起官方推荐优先使用 Vite 或 Next.js。CRA 已进入维护模式，不再推荐用于新项目。

方式三：Next.js（全栈框架） 

npx create-next-app@latest my-app

Next.js 内置了路由、SSR/SSG、Server Actions 等特性，适合生产级应用。

项目结构（Vite + React） 

my-app/
├── index.html              # 入口 HTML（Vite 特有，直接放根目录）
├── package.json
├── vite.config.js          # Vite 配置
├── public/                 # 静态资源（不经过构建处理）
├── src/
│   ├── main.jsx            # 应用入口
│   ├── App.jsx             # 根组件
│   ├── App.css             # 根组件样式
│   ├── index.css           # 全局样式
│   ├── components/         # 可复用组件
│   ├── hooks/              # 自定义 Hooks
│   ├── pages/              # 页面级组件
│   ├── utils/              # 工具函数
│   └── assets/             # 需要构建处理的资源（图片、字体等）

第一个组件 

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Greeting name="World" />
    </div>
  );
}

// src/components/Greeting.jsx
function Greeting({ name }) {
  return <p>你好，{name}！</p>;
}

export default Greeting;

要点：

规则 说明
组件名 PascalCase Greeting 而非 greeting
返回 JSX 必须有单一根元素（或 <>...</> Fragment）
Props 只读 子组件不应修改 props
文件扩展名 .jsx 使用 JSX 的文件必须用 .jsx 扩展名（Vite 强制要求）

JSX 基本规则 

// 1. 表达式插值：花括号 {}
const name = "React";
const el = <h1>Hello, {name}</h1>;

// 2. 属性赋值
<img src={avatarUrl} alt="头像" />

// 3. 条件渲染
{isLoggedIn ? <Dashboard /> : <Login />}
{isVisible && <Modal />}       // 短路求值

// 4. 列表渲染：key 必须
{todos.map(todo => (
  <li key={todo.id}>{todo.text}</li>
))}

// 5. 内联样式：对象形式
<div style={{ color: 'red', fontSize: 16 }} />

// 6. 类名用 className
<div className="container" />

// 7. Fragment 简写
<>...</>

🚨 陷阱：JSX 中 class 要写成 className，for 写成 htmlFor。因为 JSX 是 JavaScript 的扩展，class 和 for 是 JS 关键字。

Strict Mode（严格模式） 

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Strict Mode 在开发环境下会：

  • 双重调用 组件函数体、初始化函数和 reducer，帮你发现副作用问题
  • 警告 已废弃的 API
  • 不影响生产构建

💡 最佳实践：始终用 StrictMode 包裹根组件，它帮你提前暴露潜在的 bug。

React Developer Tools

安装浏览器扩展 React Developer Tools，可以：

  • 查看组件树和 props/state
  • 追踪渲染性能（Profiler 面板）
  • 调试 Hooks 状态

快速检查清单

  • 创建项目能正常 npm run dev 启动
  • 第一个组件渲染成功
  • 已安装 React DevTools 并能在浏览器中看到组件树
  • 已开启 StrictMode
  • 组件使用 PascalCase 命名，文件使用 .jsx 扩展名
核心概念