【全栈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）能够开发。 明天，咱们将使用这个新的应用程序, 咱们构建在运行时呈现多个组件