30天入坑React ---------------day12 Create-React-App

这篇文章是30天React系列的一部分。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

30天入坑React ---------------day12 Create-React-App

CREATE-反应应用

在Github上编辑此页面

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

React团队注意到需要很多配置（并且社区帮助膨胀 - 包括我们）来运行React应用程序。幸运的是，React团队/社区中的一些聪明人聚在一起构建/发布了一个官方的生成器应用程序，使得更容易快速启动和运行。

打包

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

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

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

CREATE-反应应用内

通过Facebook发布的create-react-app项目帮助我们在我们的系统上使用React应用程序快速启动和运行，而无需我们自定义配置。

该软件包作为节点包发布，可以使用npm。

插头nvm和n

该节点主页有关于如何安装节点，如果你不已经在系统上安装简单的文档。

我们建议使用nvm或n版本管理工具。这些工具使您可以非常轻松地在系统上安装/使用多个版本的节点。

同 nodecreate-react-app

npm install --global create-react-app

30天入坑React ---------------day12 Create-React-App

通过create-react-app全局安装，我们将能够create-react-app在终端的任何位置使用该命令。

让我们创建一个新的应用程序，我们将使用create-react-app刚刚安装的命令调用30天。在要创建应用程序的目录中打开终端窗口。

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

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

30天入坑React ---------------day12 Create-React-App

在我们的新项目中，我们可以运行 npm start

30天入坑React ---------------day12 Create-React-App

让我们在浏览器中启动我们的应用程序。该create-react-app软件包附带了一些为我们创建的内置脚本（在package.json文件中）。我们可以使用内置的webserver使用以下命令开始编辑我们的应用程序npm start：

npm start

30天入坑React ---------------day12 Create-React-App

此命令将在Chrome中打开一个窗口，显示它为我们在url运行的默认应用程序：http：// localhost：3000 /

30天入坑React ---------------day12 Create-React-App

让我们编辑新创建的应用程序。查看它创建的目录结构，我们将看到我们有一个基本的节点应用程序，其中包含一个public/index.html和几个文件src/

30天入坑React ---------------day12 Create-React-App

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

30天入坑React ---------------day12 Create-React-App

该index.html文件有一个<div />id为的节点#root，其中app将自动为我们安装（这在src/index.js文件中处理）。无论何时我们想要添加webfonts，样式标签等，我们都可以将它们加载到index.html文件中。

30天入坑React ---------------day12 Create-React-App

让我们看看create-react-app为我们提供的一些功能。

我们过去曾使用过多个组件。让我们在第4天使用标题和内容（略微简化 - 将className更改notificationsFrame为App并删除内部组件）拉入我们所经历的示例：

import React from 'react'

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

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

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

现在，让我们在他们各自的文件中写下两个组件。一，Header组件在src/components/Header.js：

import React, {Component} from 'react';

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

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

import React, {Component} from 'react';

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

通过对这两个组件定义进行小的更新，我们可以将import它们放入我们的App组件（in src/App.js）中。

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

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

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

和Content组件：

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

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

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>
    )
  }
}

在这里，我们使用命名导出来从它们各自的文件中提取两个组件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类来更新我们的组件，并再次简化我们对类文件的定义。让我们把Content组件放在src/components/Content.js：

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;