【全栈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进行安装。

nvmn的一个插件

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

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

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

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

【全栈React】第12天: 创建React应用_第1张图片

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

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

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

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

【全栈React】第12天: 创建React应用_第2张图片

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

npm start

【全栈React】第12天: 创建React应用_第3张图片

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

【全栈React】第12天: 创建React应用_第4张图片

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

【全栈React】第12天: 创建React应用_第5张图片

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

【全栈React】第12天: 创建React应用_第6张图片

index.html文件有一个 #root

节点,这个应用本身将被自动挂载(这是在src/index.js文件中处理的)。任何时候,我们要添加webfonts,样式,标签等,我们可以将它们加载到index.html文件中。

【全栈React】第12天: 创建React应用_第7张图片

Shipping(运输)

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

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

`npm run build`

【全栈React】第12天: 创建React应用_第8张图片

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

你可能感兴趣的:(前端工程师,前端框架,前端,react.js,javascript)