二、前置准备与环境搭建
2.1 安装Node.js与npm
在开始React开发之前，我们需要确保Node.js和npm（Node Package Manager）已经安装在我们的计算机上。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而npm则是Node.js的包管理器，用于安装和管理JavaScript库和工具。
安装Node.js:
- 访问Node.js官方网站 https://nodejs.org/。
- 根据您的操作系统选择合适的版本进行下载。通常有两种版本可供选择：LTS（长期支持版）和Current（最新版）。对于大多数用户来说，LTS版本是推荐的选择，因为它提供了更稳定的更新和支持。
- 下载相应的安装包后，运行安装程序并按照提示完成安装过程。
- 安装完成后，打开命令行工具（Windows上的CMD或PowerShell，macOS或Linux上的Terminal），输入以下命令来验证安装是否成功：
如果命令行显示了Node.js和npm的版本号，那么恭喜您，安装成功！node -v npm -v
2.2 创建第一个React应用
接下来，我们将使用create-react-app脚手架来创建我们的第一个React应用。create-react-app是一个官方提供的脚手架工具，它可以快速地搭建出一个React应用的基础结构，省去了手动配置环境的时间。
使用create-react-app创建项目:
- 确保您的计算机上已经安装了Node.js和npm。
- 打开命令行工具，输入以下命令来全局安装create-react-app：
npm install -g create-react-app - 安装完成后，使用以下命令创建一个新的React应用：
将create-react-app my-react-appmy-react-app替换为您希望的项目名称。 - 创建完成后，导航到项目目录：
cd my-react-app - 启动本地开发服务器：
这将自动打开默认浏览器，并显示React应用的初始页面。如果您没有看到页面打开，可以手动访问npm starthttp://localhost:3000。
2.3 解析create-react-app生成的项目结构
create-react-app为我们生成了一个完整的项目结构，下面是一些关键目录和文件的介绍：
public/：这个目录包含静态资源，如HTML文件和图标。index.html：应用的主HTML文件，所有的React组件都会渲染在这个文件中。
src/：这个目录包含应用的源代码。index.js：应用的入口文件，所有的React组件都是从这里开始渲染的。App.js：应用的主组件，通常在这里定义应用的路由和主布局。components/：存放应用中使用的所有React组件。
package.json：这个文件列出了项目的依赖关系和脚本命令。README.md：项目的说明文件，通常包含项目的介绍和使用指南。
2.4 进阶环境配置
对于希望进行更高级配置的开发者，create-react-app也支持自定义配置。您可以通过以下步骤来实现：
- 在项目目录中运行以下命令，将
react-scripts从devDependencies移动到dependencies：npm uninstall --save-dev react-scripts npm install --save react-scripts - 接下来，您可以使用
react-scripts提供的各种命令来自定义构建过程，例如：- 构建生产版本：
npm run build - 运行测试：
npm test - 格式化代码：
npm run format
- 构建生产版本：
通过上述步骤，现在应该已经成功地搭建了React开发环境，并且准备好开始构建第一个React应用了。随着对React的进一步学习，你可以根据需要添加更多的依赖和工具来扩展和优化开发环境。
