二、使用 Create React App 高效引导 React 应用
您将在本书中了解的第一个 React 工具是创建 React 应用。令人惊讶的是，它是一个命令行实用程序，可以帮助您创建 React 应用。这听起来似乎不需要太多帮助，但当您使用此工具时，有很多配置您不再需要考虑。在本章中，您将学习：
- 在您的系统上安装创建反应应用工具
- 引导创建 React 应用
- 创建新应用时安装了哪些软件包
- 使用应用创建的目录组织和文件
安装 CreateReact 应用
第一步是安装Create React App，这是一个 npm 包：create-react-app。此软件包应全局安装，因为它在您的系统上安装了用于创建 React 项目的命令。换句话说，create-react-app实际上不是 React 项目的一部分，而是用来初始化 React 项目的。
以下是您如何在全球范围内安装Create React App：
$ npm install -g create-react-app
注意命令中的-g标志，这确保了create-react-app命令是全局安装的。安装完成后，您可以通过运行以下命令确保该命令正常运行：
$ create-react-app -V
> 1.4.1
现在，您可以使用此工具创建第一个 React 应用了！
创建您的第一个应用
我们将在本章剩余部分使用创建 React 应用创建您的第一个 React 应用。别担心，这非常容易做到，所以这将是一个简短的章节。创建 React 应用的目标是尽快开始为您的应用构建功能。如果要花时间配置系统，则无法执行此操作。
创建反应应用提供了所谓的零配置应用。这意味着我们提供应用的名称，然后它将安装我们需要的依赖项，并为我们创建样板目录结构和文件。让我们开始吧。
指定项目名称
您需要为创建 React App提供的唯一配置值是名称，以便它能够引导您的项目。这被指定为create-react-app命令的参数：
$ create-react-app my-react-app
这将在当前目录中创建一个my-react-app目录，如果它不存在的话。如果该目录已存在，则将使用该目录。在这里，您可以找到与应用相关的所有内容。创建目录后，它将安装包依赖项并创建项目目录和文件。以下是create-react-app命令输出的简化版本：
Creating a new React app in 02/my-react-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
+ react-dom@16.0.0
+ react@16.0.0
+ react-scripts@1.0.14
added 1272 packages in 57.831s
Success! Created my-react-app at 02/my-react-app
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 my-react-app
npm start
Happy hacking!
这个输出向您展示了许多有趣的事情。首先，它显示安装了哪些东西。其次，它向您显示可在项目中运行的命令。从下一章开始，您将在本书中学习如何使用这些命令。现在，让我们来看看刚才创建的项目，看看它包含了什么。
自动依赖关系处理
让我们来看看作为引导程序的一部分安装的依赖项。您可以通过运行npm ls --depth=0来列出您的项目包。--depth=0选项表示您只想查看顶级依赖项：
├── react@16.0.0
├── react-dom@16.0.0
└── react-scripts@1.0.14
这里没有太多，只有两个您需要的核心 React 库，以及一个名为react-scripts的库。后一个包包含您希望与此项目一起运行的脚本，例如启动开发服务器和进行生产构建。
接下来，让我们看看由创建反应应用创建的package.json文件：
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
这里是跟踪依赖关系的地方，这样你就可以在没有Create React app的不同机器上安装你的应用。您可以看到，dependencies部分与npm ls --depth=0命令的输出相匹配。scripts部分指定了可用于此项目的命令。这些都是react-scripts命令-react-scripts作为依赖项安装。
Create React App的一个更强大的方面是它为您简化了package.json配置。与其拥有几十个必须自己维护的依赖项，不如拥有少于一把的依赖项。react-scripts包为您处理动态配置方面。
例如，当您运行 React 开发服务器时，您通常需要花费大量时间来处理 Web 包配置，并确保安装了适当的 Babel 插件。因为react-scripts在运行中为这些东西创建了一个标准配置，所以您不必担心。相反，您可以开始编写应用代码。
react-scripts包还处理许多通常需要自己处理的依赖项。您可以使用npm ls --depth=1了解此软件包为您提供了哪些依赖项：
└─┬ react-scripts@1.0.14
├── autoprefixer@7.1.2
├── babel-core@6.25.0
├── babel-eslint@7.2.3
├── babel-jest@20.0.3
├── babel-loader@7.1.1
├── babel-preset-react-app@3.0.3
├── babel-runtime@6.26.0
├── case-sensitive-paths-webpack-plugin@2.1.1
├── chalk@1.1.3
├── css-loader@0.28.4
├── dotenv@4.0.0
├── eslint@4.4.1
├── eslint-config-react-app@2.0.1
├── eslint-loader@1.9.0
├── eslint-plugin-flowtype@2.35.0
├── eslint-plugin-import@2.7.0
├── eslint-plugin-jsx-a11y@5.1.1
├── eslint-plugin-react@7.1.0
├── extract-text-webpack-plugin@3.0.0
├── file-loader@0.11.2
├── fs-extra@3.0.1
├── fsevents@1.1.2
├── html-webpack-plugin@2.29.0
├── jest@20.0.4
├── object-assign@4.1.1 deduped
├── postcss-flexbugs-fixes@3.2.0
├── postcss-loader@2.0.6
├── promise@8.0.1
├── react-dev-utils@4.1.0
├── style-loader@0.18.2
├── sw-precache-webpack-plugin@0.11.4
├── url-loader@0.5.9
├── webpack@3.5.1
├── webpack-dev-server@2.8.2
├── webpack-manifest-plugin@1.2.1
└── whatwg-fetch@2.0.3
通常，您不会在应用代码中与这些包中的大多数进行交互。当您必须主动管理不直接使用的依赖项时，它会让您感觉像一个巨大的时间接收器。创建 React 应用有助于消除这种感觉。
目录结构
此时，当您使用create React App创建项目时，您已经了解了作为项目一部分安装的依赖项。除了依赖项之外，Create React App还设置了一些其他样板文件和目录。让我们快速浏览这些内容，以便在下一章中开始编码。
顶级文件
在应用的顶层创建的文件只有两个，您需要担心：
README.md：此降价文件用于描述项目。这是一个很好的地方来解释为什么你的项目存在，以及人们如何开始使用它，特别是如果你计划让你的应用成为一个 GitHub 项目。package.json：此文件用于配置将应用作为 npm 包分发的各个方面。例如，您可以在这里添加新的依赖项或删除过时的依赖项。如果您计划将应用发布到主 npm 注册表，则此文件是关键。
静态资产
创建反应应用为您创建一个公共目录，其中包含一些文件。这就是静态应用资产的用途。默认情况下，它包含以下内容：
favion.ico：这是显示在浏览器选项卡中的 React 徽标。在发货之前，您需要将其替换为代表您的应用的内容。index.html：这是提供给浏览器的 HTML 文件，也是 React 应用的入口点。manifest.json：某些移动操作系统在将应用添加到主屏幕时使用此选项。
源代码
由create-react-app创建的src目录是应用中最重要的部分。这是您创建的任何 React 组件将活动的位置。开箱即用，这个目录中有一些源文件可以帮助您继续前进，尽管在前进的过程中，您显然会替换大部分源文件。以下是默认情况下您将看到的内容：
App.css：这定义了一些简单的 CSS 来设置App组件的样式App.js：这是呈现应用 HTML 的默认组件App.test.js：这是App组件的基本测试index.css：定义应用范围的样式index.js：这是应用呈现App组件的入口点logo.svg：由App组件呈现的动画 React 徽标registerServiceWorker.js：在生产构建中，这允许从脱机缓存加载组件
为您创建这些默认源文件有两个好处。首先，您可以快速启动应用，以确保一切正常，并且没有犯任何基本错误。其次，它为您的组件设置了一个基本模式。在本书中，您将看到将模式应用于组件实际上是如何辅助工具的。
总结
在本章中，您学习了如何在您的系统上安装Create React App工具。创建 React 应用是引导现代 React 应用的首选工具。创建 React 应用的目标是让开发人员在最短的时间内从无到有地创建 React 组件。
安装此工具后，您就使用它创建了第一个 React 应用。您必须提供的唯一配置是应用名。一旦工具安装完依赖项并创建样板文件和目录，您就可以开始编写代码了。
然后，我们研究了react-scripts以及这个包为您处理的依赖关系。然后，您将对为您创建的应用的整体结构进行旋风式的了解。
在下一章中，我们将开始开发一些 React 组件。为此，我们将启动开发服务器。您还将学习如何启动并运行create-react-app开发环境。
版权属于：月萌API www.moonapi.com，转载请注明出处
