【React 入门实战篇】从零开始搭建与理解React应用-二、前置准备与环境搭建

二、前置准备与环境搭建

2.1 安装Node.js与npm

在开始React开发之前，我们需要确保Node.js和npm（Node Package Manager）已经安装在我们的计算机上。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而npm则是Node.js的包管理器，用于安装和管理JavaScript库和工具。

安装Node.js:

1. 访问Node.js官方网站 https://nodejs.org/。
2. 根据您的操作系统选择合适的版本进行下载。通常有两种版本可供选择：LTS（长期支持版）和Current（最新版）。对于大多数用户来说，LTS版本是推荐的选择，因为它提供了更稳定的更新和支持。
3. 下载相应的安装包后，运行安装程序并按照提示完成安装过程。
4. 安装完成后，打开命令行工具（Windows上的CMD或PowerShell，macOS或Linux上的Terminal），输入以下命令来验证安装是否成功：

   node -v
   npm -v
   1
   2

   如果命令行显示了Node.js和npm的版本号，那么恭喜您，安装成功！

2.2 创建第一个React应用

接下来，我们将使用create-react-app脚手架来创建我们的第一个React应用。create-react-app是一个官方提供的脚手架工具，它可以快速地搭建出一个React应用的基础结构，省去了手动配置环境的时间。

使用create-react-app创建项目:

1. 确保您的计算机上已经安装了Node.js和npm。
2. 打开命令行工具，输入以下命令来全局安装create-react-app：

   npm install -g create-react-app
   1

3. 安装完成后，使用以下命令创建一个新的React应用：

   create-react-app my-react-app
   1

   将my-react-app替换为您希望的项目名称。
4. 创建完成后，导航到项目目录：

   cd my-react-app
   1

5. 启动本地开发服务器：

   npm start
   1

   这将自动打开默认浏览器，并显示React应用的初始页面。如果您没有看到页面打开，可以手动访问http://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也支持自定义配置。您可以通过以下步骤来实现：

1. 在项目目录中运行以下命令，将react-scripts从devDependencies移动到dependencies：

   npm uninstall --save-dev react-scripts
   npm install --save react-scripts
   1
   2

2. 接下来，您可以使用react-scripts提供的各种命令来自定义构建过程，例如：
   • 构建生产版本：

     npm run build
     1

   • 运行测试：

     npm test
     1

   • 格式化代码：

     npm run format
     1

通过上述步骤，现在应该已经成功地搭建了React开发环境，并且准备好开始构建第一个React应用了。随着对React的进一步学习，你可以根据需要添加更多的依赖和工具来扩展和优化开发环境。