React教程: 第12天 create-react-app

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

这篇文章是30 Days of React系列的一部分。
在本系列中，我们将从最基本的开始，逐步了解开始React所需的所有知识。如果你曾经想学习反应，这是开始的地方！

30 Days of React PDF版本下载：下载超过300页的 PDF

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

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

Packaging(包装)

---

到目前为止，在本课程中，我们只在单个脚本中编写组件。虽然它非常简单，但在多个开发人员之间共享组件可能很困难。单个文件也很难编写复杂的应用程序。

相反，我们将使用一个非常流行的打包工具Create-Reaction-app为我们的应用程序设置一个构建工具。该工具提供了一个开始开发我们的应用程序的好地方，而不需要花费太多的时间来设置我们的构建工具。

为了使用它，我们需要从安装开始。我们可以使用npm或yarn安装create-react-app：

create-react-app

---

通过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文件中。

让我们看看create-react-app为我们启用的一些功能。

我们过去使用过多个组件。让我们在第4天的示例中引入一个标题和内容（稍微简化了一点——将类名从notificationsFrame更改为App并删除内部组件）：

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Content />
      </div>
    );
  }
}

我们可以在同一个文件中定义Header和Content组件，但正如我们所讨论的，这变得相当麻烦。相反，让我们在src/目录（src/components/）中创建一个名为components/的目录，并创建两个名为Header.js以及Content.js在那里：

# in my-app/
mkdir src/components
touch src/components/{Header,Content}.js

现在，让我们将这两个组件分别写入各自的文件中。首先，src/components/Header.js中的Header组件:

import React from "react";

class Header extends React.Component {
  render() {
    return (
      <div id="header">
        <h1>Header</h1>
      </div>
    );
  }
}

现在让我们在src/components/Content.js中编写Content.js文件：

import React from "react";

class Content extends React.Component {
  render() {
    return <p className="App-intro">Content goes here</p>;
  }
}

通过对这两个组件定义进行一个小的更新，我们可以将它们import到我们的App组件中（在src/App.js).

我们将在class定义之前使用export关键字：

让我们稍微更新一下Header组件：

export class Header extends React.Component {
  // ...
}

以及Content组件：

export class Content extends React.Component {
  // ...
}

现在我们可以从src/App.js 文件 import这两个组件。让我们通过添加这两个import语句来更新我们的App.js：

import React from "react";

import { Header } from "./components/Header";
import { Content } from "./components/Content";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Content />
      </div>
    );
  }
}

在这里，我们使用命名exports从src/components/各自的文件中拉入这两个组件。

按照惯例，如果我们只有一个来自这些文件的导出，我们可以使用export default语法，这样我们就可以删除命名导出周围的{}。让我们更新这些文件中的每一个，以便在末尾添加一行以启用默认导入：

export class Header extends React.Component {
  // ...
}

export default Header;

以及Content组件：

export class Content extends React.Component {
  // ...
}

export default Content;

现在我们可以更新两个组件的导入，如下所示：

import React from "react";

import Header from "./components/Header";
import Content from "./components/Content";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Content />
      </div>
    );
  }
}

利用这些知识，我们现在还可以通过导入命名组件类Component来更新组件，并再次简化类文件的定义。让我们看看src/components/Content.js中的Content组件:

import React, {Component} from 'react'; // This is the change

export class Content extends Component { // and this allows us
                                         // to not call React.Component
                                         // but instead use just
                                         // the Component class
  render() {
    return <p className="App-intro">Content goes here</p>;
  }
}

export default Content;

Shipping（运输）

---

我们将在几周后开始部署，但暂时知道生成器创建了一个build命令，以便我们可以创建应用程序的小型优化版本，并将其上载到服务器。

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

npm run build

有了这个，我们现在有了一个实时重新加载的单页应用程序（SPA）准备开发。明天，我们将使用这个新的应用程序来在运行时渲染多个组件。

---

上一章：纯组件
下一章：重复元素

---

本教程系列的完整源代码可以在 GitHub repo, 上找到，其中包含所有样式和代码示例。
如果在任何时候你感到困扰，有进一步的问题，请随时通过以下方式与我们联系：
在原文文章末尾评论这篇文章
发送电子邮件至 [email protected]
加入我们的 gitter room
发推文给我们 @fullstackreact
REACT.JS DOM 应用 移动 JAVASCRIPT
版权声明 本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。
原文链接：全栈React: React 30天

---

如果有疑问可以直接留言评论，如果觉得对你有帮助，可以小小的赞赏一杯奶茶钱，谢谢！！