React 安装

封面图 • 2025-12-22 • nodejs

在安装 **React** 之前，你需要了解 React 是一个用于构建用户界面的 JavaScript 库，通常与 **Create React App**（CRA）一起使用来快速搭建项目。下面是几种常见的 React 安装方式：

---

## ✅ 方法一：使用 Create React App（推荐）

### 步骤 1：安装 Node.js 和 npm
确保你已经安装了 [Node.js](https://nodejs.org/)（包含 npm）。你可以通过以下命令检查是否安装成功：

```bash
node -v
npm -v
```

如果没有安装，请前往 [Node.js 官网](https://nodejs.org/) 下载并安装。

---

### 步骤 2：创建 React 项目

```bash
npx create-react-app my-app
```

- `my-app` 是你的项目名称，可以自定义。
- 这会自动安装所有必要的依赖项（包括 React、ReactDOM、Babel、Webpack 等）。

---

### 步骤 3：进入项目目录并启动开发服务器

```bash
cd my-app
npm start
```

打开浏览器访问 `http://localhost:3000`，你应该能看到 React 的欢迎页面。

---

## ✅ 方法二：手动安装 React（不推荐用于新项目）

如果你不想用 Create React App，也可以手动安装 React：

### 步骤 1：初始化项目

```bash
mkdir my-react-app
cd my-react-app
npm init -y
```

### 步骤 2：安装 React 和 ReactDOM

```bash
npm install react react-dom
```

### 步骤 3：安装 Webpack 和 Babel（可选）

如果你需要打包和编译 JSX，还需要安装：

```bash
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
```

然后配置 `webpack.config.js` 和 `.babelrc` 文件。

---

## ✅ 方法三：使用 Vite 创建 React 项目（更快）

Vite 是一个更现代、更快的前端构建工具，适合新项目。

### 步骤 1：安装 Vite

```bash
npm create vite@latest my-react-app --template react
```

选择 `react` 模板后，进入项目目录并启动：

```bash
cd my-react-app
npm install
npm run dev
```

---

## 🧾 总结

| 工具 | 优点 | 适用场景 |
|------|------|----------|
| Create React App | 快速上手，开箱即用 | 新项目、学习 React |
| Vite | 更快的构建速度 | 需要高性能的项目 |
| 手动安装 | 灵活但复杂 | 自定义配置需求高的项目 |

---

如果你告诉我你使用的具体环境（如 VS Code、WebStorm、或想用 TypeScript），我可以提供更详细的安装步骤。需要吗？