摘要：本文转载自众成翻译译者链接原文今天，我们将添加一个构建过程来存储常见的构建操作，以便我们可以轻松地开发和部署我们的应用。在要创建应用的目录中打开终端窗口。文件有一个的节点，这个应用本身将被自动挂载这是在文件中处理的。
本文转载自：众成翻译
译者：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的 节点，这个应用本身将被自动挂载（这是在src/index.js文件中处理的）。任何时候，我们要添加webfonts，样式，标签等，我们可以将它们加载到index.html文件中。
Shipping（运输）我们将在几周内进行部署，但暂时知道生成器创建了一个构建命令，因此我们可以创建我们的应用的最小化，优化版本，我们可以将其上传到服务器。
我们可以使用我们项目根目录下的npm run build 命令构建我们的应用：
`npm run build`
因此，我们现在有一个实时重新加载的单页应用（SPA）可以开发。 明天，我们将使用这个新的应用程序, 我们构建在运行时呈现多个组件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84686.html
摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。为了获得更多的性能和简单性，同样允许我们使用正常的函数创建纯粹的，无状态的组件。在中，功能组件被称为一个参数的类似于构造函数类，它们是它所调用的，以及组件树的当前。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3819原文：https://www.fullstackrea...
摘要：在我们的应用中添加太多的复杂度来加载外部数据之前今天我们将快速了解如何在应用中重复组件元素。出于性能原因使用虚拟尝试限制在重新视图时需要更新的元素的数量。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...
摘要：无论何时状态改变通过，组件将重新投递。在调用函数之后，我们可以将第二个参数传递给函数，该函数将在状态更新后保证被调用。今天，我们更新了我们的组件以使其处于状态状态，现在有必要处理如何使组件成为状态。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...
摘要：代表基本上是常规。第次更新，在年完成。几乎完全支持所有主要的浏览器。但这将是一段时间，直到较旧版本的浏览器逐步停止使用。这意味着将转换为。在组件的情况下，写入的将如下所示在我们在第一个作出反应组件使用的语法是语法。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....
阅读 2457·2021-11-24 09:39
阅读 3501·2019-08-30 15:53
阅读 577·2019-08-29 15:15
阅读 2880·2019-08-26 13:23
阅读 3190·2019-08-26 10:48
阅读 618·2019-08-26 10:31
阅读 733·2019-08-26 10:30
阅读 2308·2019-08-23 18:32
