本文转载自:众成翻译
译者: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应用,无需自定义配置我们的一部分
nvm
和n
的一个插件如果您的系统上尚未安装该节点,Node主页有如何安装node的简单文档。
在我们的系统上安装了 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)可以开发。 明天,我们将使用这个新的应用程序,我们构建在运行时呈现多个组件