第2章：开发环境搭建

简要说明

在本章中，我们将详细介绍如何配置React开发环境。配置开发环境是React开发的第一步，掌握这一部分内容可以帮助你快速上手React开发，为后续学习打下坚实的基础。

React的开发环境依赖于Node.js和npm（Node Package Manager），因此我们需要先了解如何安装和配置这些工具。随后，我们将使用Create React App这一官方提供的脚手架工具，快速搭建一个React开发项目，并对项目的目录结构进行详细解析。

关键知识点

1. Node.js与npm的安装

Node.js是JavaScript的一个运行环境，而npm是Node.js的包管理工具，两者是React开发的基础工具栈。以下是安装步骤：

1.1 安装Node.js

访问Node.js官方网站：https://nodejs.org。
根据你的操作系统选择合适的版本进行下载和安装（推荐下载LTS版本，稳定性和兼容性更好）。
安装完成后，打开终端（Windows的命令提示符或macOS/Linux的终端），输入以下命令验证安装：
```
node -v
```
如果显示了Node.js的版本号，说明安装成功。

1.2 安装npm

npm通常会随Node.js一起安装，但建议检查版本：

npm -v

如果显示了npm的版本号，说明已经安装成功。如果没有，可以手动安装：

node install -g npm

2. 使用Create React App快速搭建项目

Create React App是React官方提供的脚手架工具，能够快速生成一个React开发环境。以下是具体步骤：

2.1 安装Create React App

在终端中运行以下命令安装Create React App（需要联网）：

npx create-react-app my-react-app

或者使用cnpm加速安装：

cnpm install -g create-react-app
npx create-react-app my-react-app

2.2 启动项目

进入项目目录并启动开发服务器：

cd my-react-app
npm start

启动后，浏览器会自动打开并显示默认的React应用界面（地址为http://localhost:3000）。

3. 项目目录结构解析

创建好的React项目默认目录结构如下：

my-react-app/
├── node_modules/             # 第三方依赖包
├── public/                   # 静态资源文件夹
│   ├── index.html            # 入口HTML文件
│   └── manifest.json         # 应用的元数据
├── src/                     # 源代码文件夹
│   ├── App.css              # 默认样式文件
│   ├── App.js               # 默认组件文件
│   ├── App.test.js          # 组件测试文件
│   ├── index.css            # 入口样式文件
│   ├── index.js             # 入口文件（配置组件与路由）
│   └── README.md            # 项目说明文件
├── package.json             # 项目依赖配置文件
└── package-lock.json        # 锁定依赖版本

3.1 核心文件解析

src/App.js：默认的主组件文件，展示了React组件的基本结构。
src/index.js：项目的入口文件，用于注册主组件并启动应用。
package.json：项目依赖和配置信息，包含React和Redux等相关依赖。

总结

通过本章节的学习，你已经掌握了React开发环境的基本配置方法，包括Node.js和npm的安装、使用Create React App搭建项目，以及项目目录结构的解析。这些知识是后续学习React核心概念和组件开发的基础，确保你能够快速上手并顺利开展React开发工作。如果在配置过程中遇到问题，可以参考React官方文档或社区资源寻求帮助。

简要说明​

关键知识点​

1. Node.js与npm的安装​

1.1 安装Node.js​

1.2 安装npm​

2. 使用Create React App快速搭建项目​

2.1 安装Create React App​

2.2 启动项目​

3. 项目目录结构解析​

3.1 核心文件解析​

总结​