【全栈React】第12天: 创建React应用

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3822
原文：https://www.fullstackreact.com/30-days-of-react/day-12/

今天，我们将添加一个构建过程来存储常见的构建操作，以便我们可以轻松地开发和部署我们的应用。

React小组注意到运行一个React应用需要很多配置（并且社区帮助臃肿 - 包括我们也是如此）。幸运的是，React团队/社区中的一些聪明人员聚集在一起，构建/发布了一个官方的生成器应用，使其更容易上手并快速运行。

创建React应用

通过Facebook发布的create-react-app项目可帮助我们快速启动并运行我们系统上的React应用，无需自定义配置我们的一部分

该软件包作为Node软件包发布，可以使用npm进行安装。

nvm 和 n的一个插件

如果您的系统上尚未安装该节点，Node主页有如何安装node的简单文档。

我们建议使用nvm或n版本管理工具。这些工具使您可以随时在系统上安装/使用多个版本的节点变得非常简单。

在我们的系统上安装了 node 后，我们可以安装create-react-app包：

`npm install --global create-react-app`

使用全局方式安装的create-react-app ，我们可以在终端的任何地方使用create-react-app 命令。

我们创建一个我们称之为30days的新应用，使用我们刚刚安装的 create-react-app 命令。 在要创建应用的目录中打开终端窗口。

在终端中，我们可以使用该命令创建一个新的React应用，并为要创建的应用添加一个名称。

create-react-app 30days && cd 30days

让我们在浏览器中启动我们的应用。create-react-app 软件包附带了一些为我们创建的内置脚本（在 package.json 文件中）。 我们可以使用npm start命令_start_使用内置的网络服务器编辑我们的应用：

npm start

该命令将在Chrome中打开一个窗口，使其在我们应用中运行默认url：http://localhost:3000/。

我们来编辑新创建的应用。看看它创建的目录结构，我们将看到我们有一个运行public/index.html 的基本节点应用，以及构成我们正在运行的应用的src/ 目录中的几个文件。

我们打开 src/App.js 文件，我们将看到我们有一个非常基本的组件，应该都很熟悉。它有一个简单的渲染功能，它返回我们在Chrome窗口中看到的结果。

index.html文件有一个 #root的 <div />节点，这个应用本身将被自动挂载（这是在src/index.js文件中处理的）。任何时候，我们要添加webfonts，样式，标签等，我们可以将它们加载到index.html文件中。

Shipping（运输）

我们将在几周内进行部署，但暂时知道生成器创建了一个构建命令，因此我们可以创建我们的应用的最小化，优化版本，我们可以将其上传到服务器。

我们可以使用我们项目根目录下的npm run build 命令构建我们的应用：

`npm run build`

因此，我们现在有一个实时重新加载的单页应用（SPA）可以开发。 明天，我们将使用这个新的应用程序, 我们构建在运行时呈现多个组件