下载安装

React 下载安装

环境准备

Node.js 安装

React 开发需要 Node.js 环境，建议安装 LTS 版本。

访问 Node.js 官网下载 LTS 版本
或使用包管理器安装：

pnpm

# 使用 nvm 安装
nvm install --lts
nvm use --lts

# 或使用 fnm
fnm install --lts
fnm use --lts

npm

# 使用 nvm
nvm install --lts
nvm use --lts

验证安装

node -v   # v18.x 或更高
npm -v    # 9.x 或更高

创建 React 项目

使用 Vite（推荐）

# 创建项目
npm create vite@latest my-react-app -- --template react

# 进入目录
cd my-react-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

使用 Create React App

# 创建项目
npx create-react-app my-react-app

# 进入目录
cd my-react-app

# 启动开发服务器
npm start

使用 Next.js（全栈框架）

npx create-next-app@latest my-next-app

项目结构

my-react-app/
├── node_modules/      # 依赖包
├── public/            # 静态资源
│   └── vite.svg
├── src/               # 源代码
│   ├── assets/        # 资源文件
│   ├── App.css        # 组件样式
│   ├── App.jsx        # 根组件
│   └── main.jsx       # 入口文件
├── index.html         # HTML 模板
├── package.json       # 项目配置
├── vite.config.js     # Vite 配置
└── README.md

常用依赖安装

路由

npm install react-router-dom

状态管理

# Redux Toolkit
npm install @reduxjs/toolkit react-redux

# Zustand（轻量）
npm install zustand

UI 组件库

# Ant Design
npm install antd

# Material UI
npm install @mui/material @emotion/react @emotion/styled

其他常用

# HTTP 请求
npm install axios

# 表单处理
npm install react-hook-form

# 日期处理
npm install dayjs

VS Code 插件推荐

ES7+ React/Redux/React-Native snippets - 代码片段
ESLint - 代码检查
Prettier - 代码格式化
Auto Rename Tag - 自动重命名标签
Tailwind CSS IntelliSense - Tailwind 智能提示

常见问题

端口被占用

# 指定其他端口
npm run dev -- --port 3001

安装依赖失败

# 清除缓存后重试
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

权限问题（Linux/Mac）

# 修改 npm 全局目录权限
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc