第十五章 react脚手架

React脚手架是一个用于快速搭建React应用程序的工具。它提供了一个基本的项目结构和一些常用的配置，使得开发人员可以更快地开始编写代码，而不必从头开始构建整个项目。

简要概括

• react脚手架：用来帮助程序员快速创建一个基于react库的模板项目

  1）包含了所有需要的配置（语法检查、jsx编译、devServer…）

  2）安装好了所有相关依赖包

  3）可以直接运行一个简单的效果

• react提供了一个用于创建react项目的脚手架库：create-react-app

• 项目的整体技术架构为：react + webpack + es6 + eslint

• 使用脚手架开发的项目的特点：模块化、组件化、工程化

---

使用脚手架创建一个项目并启动

• 步骤1：全局安装：npm i create-react-app -g
• 步骤2：切换到相应创建项目的目录，使用命令：create-react-app react-staging

Success! Created react_staging at D:\MyWorkSpace\ReactStudy\react_staging
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react_staging
  npm start

Happy hacking!

• 步骤3：进入项目文件夹：cd react-staging
• 步骤4：启动项目：npm start
• 步骤5：浏览器查看地址：http://localhost:3000
• 步骤6：具体效果：

---

相关命令介绍

• npm start

如果您想要运行我们的React项目，您可以按照以下步骤进行操作：

1. 打开终端并进入项目目录。
2. 运行npm start命令。

这将启动一个本地开发服务器，您可以在其中编写和测试您的React应用程序。如果您需要更改配置，可以编辑./config/webpack.config.js文件。如果您需要添加新的依赖项，可以编辑./package.json文件。如果您需要更改项目的入口点，可以编辑./src/index.js文件。

---

• npm run build

如果您已经开发完成，想要构建我们的React项目，您可以按照以下步骤进行操作：

1. 打开终端并进入项目目录。
2. 运行npm run build命令。

这将使用Webpack打包您的React应用程序，并将其输出到./build目录中。您可以将此目录中的文件部署到Web服务器上，以便在生产环境中运行您的应用程序。

---

• npm run test

如果您想要运行我们React项目的测试，您可以按照以下步骤进行操作：

1. 打开终端并进入项目目录。
2. 运行npm run test命令。

这将启动测试运行器，并运行所有测试用例。我们的测试用例可以在./src目录下的__tests__文件夹中找到。如果您需要添加新的测试用例，可以在该文件夹中创建一个新的测试文件。

---

• npm run eject

如果您想要 eject 我们的 React 项目，您可以按照以下步骤进行操作：

1. 打开终端并进入项目目录。
2. 运行npm run eject命令。

这将从我们的 React 项目中移除脚手架，并将其转换为常规的 Webpack 配置。这将允许您更深入地定制您的项目，但也会使您失去脚手架提供的许多便利功能。

在运行 npm run eject 命令之后，您将看到一个新的 config 文件夹和一个新的 scripts 文件夹。这些文件夹包含了您需要修改的所有配置和脚本。

请注意，一旦您 eject 了项目，就无法再次使用脚手架。如果您需要重新启用脚手架，请创建一个新的 React 项目并将您的代码复制到其中。