React 创建第一个项目

封面图 • 2025-10-14 • React

在 React 中创建第一个项目，通常使用 **Create React App（CRA）** 工具，这是官方推荐的入门方式。以下是详细的步骤：

---

## ✅ 步骤 1：安装 Node.js 和 npm

确保你已经安装了 [Node.js](https://nodejs.org/)（建议安装 LTS 版本），它会自带 `npm`（Node Package Manager）。

你可以通过以下命令检查是否安装成功：

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

如果输出版本号，说明安装成功。

---

## ✅ 步骤 2：使用 Create React App 创建项目

打开终端（或命令提示符、PowerShell 等），运行以下命令：

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

> `my-first-app` 是你的项目名称，你可以替换成你喜欢的名字。

> ⚠️ 如果你遇到网络问题，可以尝试设置 npm 镜像：
>
> ```bash
> npm config set registry https://registry.npmmirror.com
> ```

---

## ✅ 步骤 3：进入项目目录

创建完成后，进入项目文件夹：

```bash
cd my-first-app
```

---

## ✅ 步骤 4：启动开发服务器

运行以下命令启动开发服务器：

```bash
npm start
```

这会自动在浏览器中打开一个页面，显示默认的 React 欢迎页面。

---

## ✅ 步骤 5：查看项目结构

项目结构大致如下：

```
my-first-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── package.json
└── README.md
```

- `src/index.js` 是入口文件。
- `src/App.js` 是主组件。

---

## ✅ 步骤 6：修改代码并查看效果

打开 `src/App.js` 文件，修改内容：

```jsx
import React from 'react';

function App() {
  return (
    <div>
      <h1>欢迎来到我的第一个 React 项目！</h1>
    </div>
  );
}

export default App;
```

保存后，开发服务器会自动重新加载页面，你会看到更新的内容。

---

## ✅ 可选：使用 VS Code 编辑器

如果你使用 [VS Code](https://code.visualstudio.com/)，可以安装以下扩展来提升 React 开发体验：

- **ESLint**
- **Prettier**
- **React Developer Tools**

---

## 🧪 小练习：添加一个按钮

尝试在 `App.js` 中添加一个按钮，并绑定点击事件：

```jsx
import React, { useState } from 'react';

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

return (
    <div>
      <h1>计数器: {count}</h1>
      <button onClick={() => setCount(count + 1)}>点击加一</button>
    </div>
  );
}

export default App;
```

---

## 📦 其他选项（可选）

如果你不想使用 Create React App，也可以使用以下工具：

- **Vite**（更快的构建工具）
- **Next.js**（用于服务端渲染）
- **Remix**（现代 Web 框架）

但对初学者来说，**Create React App** 是最简单、最推荐的方式。

---

如果你需要我帮你生成一个完整的 `App.js` 示例，或者想了解如何部署项目，请告诉我！