React入门 - 概述和演练教程

本是古典何须时尚 2021-09-30 08:18 223阅读 0赞

![20190728234953600.png][]![aHR0cHM6Ly93d3cudGFuaWFyYXNjaWEuY29tL3N0YXRpYy9kNjk1ZmU2OTE5OGNjNDU1ODI4NGU5YWVjMWE0ODkyYy80MTQ4ZS9yZWFjdC5wbmc][]

# React入门 - 概述和演练教程 #

[api][][javascript][][库的][Link 1][反应][Link 2]

自从我第一次开始学习JavaScript以来，我一直听说过React，但我承认我只看了一眼就吓到了我。我看到看起来像是一堆混有JavaScript和思想的HTML，*这不是我们一直试图避免的吗？React有什么大不了的？*

相反，我专注于学习vanilla JavaScript并在专业环境中使用jQuery。经过几次沮丧，尝试开始使用React之后，我终于开始尝试了，我开始明白为什么我可能想要使用React而不是使用vanilla JS或jQuery。

我试着将我学到的所有内容浓缩成一个很好的介绍与你分享，所以在这里。

先决条件

在开始使用React之前，您应该事先知道一些事情。例如，如果您以前从未使用过JavaScript或DOM，那么在尝试解决React问题之前，我会更熟悉它们。

以下是我认为是React的先决条件。

*  基本熟悉[HTML和CSS][HTML_CSS]。
 *  [JavaScript][]和编程的基础知识。
 *  [对DOM的][DOM]基本了解。
 *  熟悉[ES6语法和功能][ES6]。
 *  [Node.js和npm][Node.js_npm]全局安装。

目标

*  了解基本的React概念和相关术语，例如Babel，Webpack，JSX，组件，道具，状态和生命周期。
 *  构建一个非常简单的React应用程序，演示上述概念。

这是最终结果的来源和现场演示。

*  [在GitHub上查看源代码][GitHub]
 *  [查看演示][Link 3]

## **什么是React？** ##

*  React是一个JavaScript库 - 最受欢迎的库之一，[在GitHub上][GitHub 1]有[超过100,000颗星][GitHub 1]。
 *  React不是一个框架（与Angular不同，它更加自以为是）。
 *  React是一个由Facebook创建的开源项目。
 *  React用于在前端构建用户界面（UI）。
 *  React是MVC应用程序的**视图**层（模型视图控制器）

React最重要的一个方面是，您可以创建**组件**（类似于自定义，可重用的HTML元素），以快速有效地构建用户界面。React还使用**状态**和**道具**简化了数据的存储和处理方式。

我们将在整篇文章中详细介绍所有这些内容，让我们开始吧。

## **设置和安装** ##

有几种方法可以设置React，我会告诉你两个，这样你就可以很好地了解它是如何工作的。

### **静态HTML文件** ###

第一种方法不是设置React的流行方式，也不是我们将如何完成本教程的其余部分，但是如果您曾经使用过像jQuery这样的库，它将会很熟悉且易于理解，而且它是如果你不熟悉Webpack，Babel和Node.js，那么最简单的方法就是入门。

让我们从制作基本`index.html`文件开始。我们将在-React `head`，React DOM和Babel中加载三个CDN 。我们还打算`div`使用一个被调用的id `root`，最后我们将创建一个`script`标记，您的自定义代码将存在。

**的index.html**

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
    
        <title>Hello React!</title>
    
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
      </head>
    
      <body>
        <div id="root"></div>
    
        <script type="text/babel">
          // React code will go here
        </script>
      </body>
    </html>

在撰写本文时，我正在加载最新的稳定版本的库。

*  [React][] - React顶级API
 *  [React DOM][] - 添加特定于DOM的方法
 *  [Babel][] - 一种JavaScript编译器，允许我们在旧浏览器中使用ES6 +

我们的应用程序的入口点将是`root`div元素，它按惯例命名。您还会注意到`text/babel`脚本类型，这对于使用Babel是必需的。

现在，让我们编写我们的第一个React代码块。我们将使用ES6类来创建一个名为的React组件`App`。

class App extends React.Component {
      //...
    }

现在我们将添加[`render()`][render]方法，这是类组件中唯一需要的方法，用于呈现DOM节点。

class App extends React.Component {
      render() {
          return (
              //...
          );
      }
    }

在里面`return`，我们将把看起来像一个简单的HTML元素。请注意，我们不会在此处返回字符串，因此请勿在元素周围使用引号。这被称为`JSX`，我们将很快了解它。

class App extends React.Component {
      render() {
        return <h1>Hello world!</h1>
      }
    }

最后，我们将使用React DOM `render()`方法将`App`我们创建的类呈现到`root`HTML中的div中。

ReactDOM.render(<App />, document.getElementById('root'))

这是我们的完整代码`index.html`。

的index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
    
        <title>Hello React!</title>
    
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
      </head>
    
      <body>
        <div id="root"></div>
    
        <script type="text/babel">
          class App extends React.Component {
            render() {
              return <h1>Hello world!</h1>
            }
          }
    
          ReactDOM.render(<App />, document.getElementById('root'))
        </script>
      </body>
    </html>

现在，如果您`index.html`在浏览器中查看，您将看到`h1`我们创建的标记呈现给DOM。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70][]

凉！既然你已经完成了这个，你可以看到React并不是那么疯狂的开始。它只是一些我们可以加载到HTML中的JavaScript帮助程序库。

我们这样做是出于演示目的，但从现在开始我们将使用另一种方法：创建React App。

### **创建React应用程序** ###

我刚刚用于将JavaScript库加载到静态HTML页面并动态渲染React和Babel的方法效率不高，而且难以维护。

幸运的是，Facebook创建了[Create React App][]，这是一个预先配置了构建React应用程序所需的一切的环境。它将创建一个实时开发服务器，使用Webpack自动编译React，JSX和ES6，自动加载CSS文件，并使用ESLint来测试和警告代码中的错误。

要进行设置`create-react-app`，请在终端中运行以下代码，该目录位于您希望项目所在的目录之上。确保`5.2`Node.js中有或更高。

npx create-react-app react-tutorial

完成安装后，移动到新创建的目录并启动项目。

cd react-tutorial
    npm start

运行此命令后，将`localhost:3000`使用新的React应用程序弹出一个新窗口。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 1][]

如果你考虑项目结构，你会看到一个`/public`和`/src`目录，与正规一起`node_modules`，`.gitignore`，`README.md`，和`package.json`。

在`/public`，我们的重要文件是`index.html`，它与`index.html`我们之前制作的静态文件非常相似- 只是一个`root`div。这次，没有加载任何库或脚本。该`/src`目录将包含我们所有的React代码。

要查看环境如何自动编译和更新您的React代码，请在以下位置找到如下所示的行`/src/App.js`：

To get started, edit `src/App.js` and save to reload.

并将其替换为任何其他文本。保存文件后，您会注意到`localhost:3000`使用新数据进行编译和刷新。

继续并删除`/src`目录中的所有文件，我们将创建自己的样板文件，没有任何膨胀。我们会保持`index.css`和`index.js`。

因为`index.css`，我只是将[Primitive CSS][]的内容复制并粘贴到文件中。如果需要，可以使用Bootstrap或任何您想要的CSS框架，或者根本不使用。我发现它更容易使用。

现在`index.js`，我们正在导入React，ReactDOM和CSS文件。

**SRC / index.js**

SRC / index.js
    import React from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'

让我们`App`再次创建我们的组件。在此之前，我们刚刚有一个`<h1>`，但现在我添加了一个带有类的div元素。你会注意到我们用`className`而不是`class`。这是我们第一次暗示这里编写的代码是JavaScript，而不是HTML。

class App extends Component {
      render() {
        return (
          <div className="App">
            <h1>Hello, React!</h1>
          </div>
        )
      }
    }

最后，我们将`App`像以前一样渲染到根。

ReactDOM.render(<App />, document.getElementById('root'))

这是我们的全部`index.js`。这次，我们将加载`Component`作为React的属性，因此我们不再需要扩展`React.Component`。

**SRC / index.js**

SRC / index.js
    import React, { Component } from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <h1>Hello, React!</h1>
          </div>
        )
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'))

如果你回去`localhost:3000`，你会看到“你好，反应！” 就像以前那样。我们现在开始使用React应用程序了。

### **反应开发人员工具** ###

有一个名为React Developer Tools的扩展程序，可以让您在使用React时更轻松。下载[适用于Chrome的React DevTools][Chrome_React DevTools]，或者您喜欢使用的任何浏览器。

安装后，当您打开DevTools时，您将看到React的选项卡。单击它，您将能够在编写组件时对其进行检查。您仍然可以转到Elements选项卡以查看实际的DOM输出。现在看起来似乎不是很多，但随着应用程序变得越来越复杂，使用它将变得越来越必要。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 2][]

现在我们拥有了实际开始使用React所需的所有工具和设置。

## **JSX：JavaScript + XML** ##

正如您所见，我们在React代码中使用的是HTML，但它并不是HTML。这是**JSX**，代表JavaScript XML。

使用JSX，我们可以编写看似HTML的内容，还可以创建和使用我们自己的类似XML的标记。这是JSX看起来分配给变量的内容。

**JSX**

JSX
    const heading = <h1 className="site-heading">Hello, React</h1>

编写React不是强制使用JSX。在引擎盖下，它正在运行`createElement`，它接受包含属性的标记，对象和组件的子项，并呈现相同的信息。以下代码将具有与上述JSX相同的输出。

**非JSX**

非JSX
    const heading = React.createElement('h1', { className: 'site-heading' }, 'Hello, React!')
    JSX实际

JSX实际上更接近JavaScript，而不是HTML，因此在编写时需要注意几个关键的区别。

*  `className`用于代替`class`添加CSS类，而不是`class`JavaScript中的保留关键字。
 *  JSX中的属性和方法是camelCase - `onclick`将成为`onClick`。
 *  自动关闭标签*必须*以斜线结尾 - 例如`<img />`

JavaScript表达式也可以使用花括号嵌入JSX中，包括变量，函数和属性。

const name = 'Tania'
    const heading = <h1>Hello, {name}</h1>

JSX比在vanilla JavaScript中创建和附加许多元素更容易编写和理解，这也是人们喜欢React的原因之一。

## **组件** ##

到目前为止，我们已经创建了一个组件 - `App`组件。React中的几乎所有内容都由组件组成，组件可以是**类组件**或**简单组件**。

大多数React应用程序都有许多小组件，所有内容都加载到主要`App`组件中。组件也经常得到自己的文件，所以让我们改变我们的项目来做到这一点。

`App`从中移除类`index.js`，所以它看起来像这样。

**SRC / index.js**

SRC / index.js
    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
    import './index.css'
    
    ReactDOM.render(<App />, document.getElementById('root'))

我们将创建一个名为的新文件`App.js`并将组件放入其中。

**SRC / App.js**

SRC / App.js
    import React, { Component } from 'react'
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <h1>Hello, React!</h1>
          </div>
        )
      }
    }
    
    export default App

我们将组件导出为`App`并加载`index.js`。将组件分离到文件中并不是强制性的，但如果不这样做，应用程序将开始变得笨拙和失控。

### **类组件** ###

让我们创建另一个组件。我们要创建一个表。制作`Table.js`并填写以下数据。

**SRC / Table.js**

SRC / Table.js
    import React, { Component } from 'react'
    
    class Table extends Component {
      render() {
        return (
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Job</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Charlie</td>
                <td>Janitor</td>
              </tr>
              <tr>
                <td>Mac</td>
                <td>Bouncer</td>
              </tr>
              <tr>
                <td>Dee</td>
                <td>Aspiring actress</td>
              </tr>
              <tr>
                <td>Dennis</td>
                <td>Bartender</td>
              </tr>
            </tbody>
          </table>
        )
      }
    }
    
    export default Table

我们创建的这个组件是一个自定义类组件。我们将自定义组件大写，以区别于常规HTML元素。返回`App.js`，我们可以在表中加载，首先导入它：

import Table from './Table'

然后将它加载到`render()`of `App`，之前我们有“Hello，React！”。我还改变了外容器的类。

return (
      <div className="container">
        <Table />
      </div>
    )

如果您回来查看您的实时环境，您将看到已`Table`加载的内容。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 3][]

现在我们已经看到了自定义类组件是什么。我们可以反复使用这个组件。但是，由于数据是硬编码的，因此目前不太有用。

### **简单组件** ###

React中的另一种组件是**简单组件**，它是一个函数。此组件不使用`class`关键字。让我们`Table`为它做两个简单的组件 - 表头和表体。

我们将使用ES6箭头函数来创建这些简单的组件。首先是表头。

const TableHeader = () => {
      return (
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
      )
    }

然后是身体。

const TableBody = () => {
      return (
        <tbody>
          <tr>
            <td>Charlie</td>
            <td>Janitor</td>
          </tr>
          <tr>
            <td>Mac</td>
            <td>Bouncer</td>
          </tr>
          <tr>
            <td>Dee</td>
            <td>Aspiring actress</td>
          </tr>
          <tr>
            <td>Dennis</td>
            <td>Bartender</td>
          </tr>
        </tbody>
      )
    }

现在我们的`Table`班级将会是这样的。

class Table extends Component {
      render() {
        return (
          <table>
            <TableHeader />
            <TableBody />
          </table>
        )
      }
    }

一切都应该像以前一样出现。如您所见，组件可以嵌套在其他组件中，并且可以混合使用简单组件和类组件。

> 类组件必须包含`render()`，并且`return`只能返回一个父元素。

作为总结，让我们将一个简单的组件与一个类组件进行比较。

**简单组件**

简单组件
    const SimpleComponent = () => {
      return <div>Example</div>
    }

**类组件**

类组件
    class ClassComponent extends Component {
      render() {
        return <div>Example</div>
      }
    }

请注意，如果`return`包含在一行中，则不需要括号。

## **道具** ##

现在，我们有一个很酷的`Table`组件，但数据是硬编码的。关于React的一个重大交易是它如何处理数据，它使用属性（称为**props**）和state来实现。首先，我们将专注于使用道具处理数据。

首先，让我们从`TableBody`组件中删除所有数据。

**Table.js**

Table.js
    const TableBody = () => {
      return <tbody />
    }

然后让我们将所有数据移动到一个对象数组，就好像我们引入了一个基于JSON的API一样。我们必须在我们的内部创建这个数组`render()`。

**App.js**

App.js
    class App extends Component {
      render() {
        const characters = [
          {
            name: 'Charlie',
            job: 'Janitor',
          },
          {
            name: 'Mac',
            job: 'Bouncer',
          },
          {
            name: 'Dee',
            job: 'Aspring actress',
          },
          {
            name: 'Dennis',
            job: 'Bartender',
          },
        ]
    
        return (
          <div className="container">
            <Table />
          </div>
        )
      }
    }

现在，我们将`Table`使用属性将数据传递给子组件（），以及如何通过使用`data-`属性传递数据。我们可以随意调用该属性，只要它不是保留关键字，所以我会去`characterData`。我正在传递的数据是`characters`变量，我会在它周围加上花括号，因为它是一个JavaScript表达式。

return (
      <div className="container">
        <Table characterData={characters} />
      </div>
    )

现在数据正在传递给`Table`我们，我们必须努力从另一方面访问它。

**Table.js**

Table.js
    class Table extends Component {
      render() {
        const { characterData } = this.props
    
        return (
          <table>
            <TableHeader />
            <TableBody characterData={characterData} />
          </table>
        )
      }
    }

如果打开React DevTools并检查`Table`组件，您将在属性中看到数据数组。这里存储的数据称为**虚拟DOM**，这是一种快速有效的方法，可以将数据与实际DOM同步。

[![屏幕截图2018 08 19 at 5 43 39 PM][2018 08 19 at 5 43 39 PM]][2018 08 19 at 5 43 39 PM_2018 08 19 at 5 43 39 PM]

但是，这些数据还没有在实际的DOM中。在`Table`，我们可以访问所有道具`this.props`。我们只传递一个道具，通过characterData，所以我们将用它`this.props.characterData`来检索那些数据。

我将使用ES6属性的简写来创建一个包含的变量`this.props.characterData`。

const { characterData } = this.props

由于我们的`Table`组件实际上由两个较小的简单组件组成，我将`TableBody`再次通过道具传递给它。

**Table.js**

现在，不`TableBody`带任何参数并返回单个标签。

const TableBody = () => {
      return <tbody />
    }

我们将作为参数传递道具，并[通过数组映射][Link 4]以返回[数组][Link 4]中每个对象的表行。此映射将包含在`rows`变量中，我们将其作为表达式返回。

const TableBody = props => {
      const rows = props.characterData.map((row, index) => {
        return (
          <tr key={index}>
            <td>{row.name}</td>
            <td>{row.job}</td>
          </tr>
        )
      })
    
      return <tbody>{rows}</tbody>
    }

如果您查看应用程序的前端，则现在正在加载所有数据。

你会注意到我已经为每个表行添加了一个键索引。在React中制作列表时应始终使用[键][Link 5]，因为它们有助于识别每个列表项。我们还将在我们想要操作列表项的那一刻看到这是如何必要的。

道具是将现有数据传递给React组件的有效方法，但是组件不能更改道具 - 它们是只读的。在下一节中，我们将学习如何使用state来进一步控制React中的处理数据。

## **州** ##

现在，我们将字符数据存储在变量中的数组中，并将其作为道具传递。这很好开始，但想象一下我们是否希望能够从数组中删除一个项目。使用props，我们有单向数据流，但有了状态，我们可以更新组件中的私有数据。

您可以将状态视为应保存和修改的任何数据，而无需将其添加到数据库中 - 例如，在确认购买之前在购物车中添加和删除项目。

首先，我们要创建一个`state`对象。

class App extends Component {
      state = {}
    }

该对象将包含您要在状态中存储的所有内容的属性。对我们来说，就是这样`characters`。

class App extends Component {
      state = {
        characters: [],
      }
    }

移动我们之前创建的整个对象数组`state.characters`。

class App extends Component {
      state = {
        characters: [
          {
            name: 'Charlie',
            // the rest of the data
          },
        ],
      }
    }

我们的数据正式包含在该州。由于我们希望能够从表中删除一个字符，因此我们将`removeCharacter`在父`App`类上创建一个方法。

要检索状态，我们将`this.state.characters`使用与以前相同的ES6方法。为了更新状态，我们将使用`this.setState()`一种内置的方法来操作状态。我们将根据我们传递[的数组过滤数组][Link 6]`index`，并返回新数组。

> 您必须使用`this.setState()`修改数组。简单地应用新值`this.state.property`将无效。

**App.js**

App.js
    removeCharacter = index => {
      const { characters } = this.state
    
      this.setState({
        characters: characters.filter((character, i) => {
          return i !== index
        }),
      })

`filter`不会变异而是创建一个新数组，并且是在JavaScript中修改数组的首选方法。这个特殊的方法是测试一个索引与数组中的所有索引，并返回除了传递的所有索引之外的所有索引。

现在我们必须将该函数传递给组件，并在每个可以调用该函数的字符旁边呈现一个按钮。我们将把这个`removeCharacter`功能作为道具传递给`Table`。

**App.js**

App.js
    render() {
      const { characters } = this.state
    
      return (
        <div className="container">
          <Table characterData={characters} removeCharacter={this.removeCharacter} />
        </div>
      )
    }

由于我们向下传递到`TableBody`从`Table`，我们将不得不再次通过它通过为道具，就像我们做了与字符数据。

**Table.js**

Table.js
    class Table extends Component {
      render() {
        const { characterData, removeCharacter } = this.props
    
        return (
          <table>
            <TableHeader />
            <TableBody characterData={characterData} removeCharacter={removeCharacter} />
          </table>
        )
      }
    }

这是我们在`removeCharacter()`方法中定义的索引的位置。在`TableBody`组件中，我们将键/索引作为参数传递，因此filter函数知道要删除的项。我们将创建一个带有一个按钮`onClick`并通过它。

**Table.js**

Table.js
    <tr key={index}>
      <td>{row.name}</td>
      <td>{row.job}</td>
      <td>
        <button onClick={() => props.removeCharacter(index)}>Delete</button>
      </td>
    </tr>

> 该`onClick`函数必须通过一个返回该`removeCharacter()`方法的函数，否则它将尝试自动运行。

真棒。现在我们删除了按钮，我们可以通过删除一个字符来修改我们的状态。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 4][]

我删除了Mac。

现在您应该了解状态如何初始化以及如何修改状态。

## **提交表格数据** ##

现在我们将数据存储在状态中，我们可以从州中删除任何项目。但是，如果我们希望能够向州添加新数据呢？在真实世界的应用程序中，您更可能从空状态开始并添加到其中，例如使用待办事项列表或购物车。

在其他任何事情之前，让我们删除所有硬编码数据`state.characters`，因为我们现在将通过表单更新。

class App extends Component {
      state = {
        characters: [],
      }
    }

现在让我们继续`Form`在一个名为的新文件中创建一个组件`Form.js`。我们将创建一个类组件，并且我们将使用a `constructor()`，这是迄今为止我们尚未完成的。我们需要`constructor()`使用`this`，并接收`props`父母的。

我们将设置初始状态为`Form`具有一些空属性的对象，并将该初始状态指定给`this.state`。

Form.js

import React, { Component } from 'react'
    
    class Form extends Component {
      constructor(props) {
        super(props)
    
        this.initialState = {
          name: '',
          job: '',
        }
    
        this.state = this.initialState
      }
    }

我们对此表单的目标是更新`Form`每次在表单中更改字段的状态，并且当我们提交时，所有数据将传递到`App`状态，然后将更新状态`Table`。

首先，我们将创建每次对输入进行更改时运行的函数。该`event`会穿了过去，我们将设置的状态`Form`有`name`和（密钥）`value`的输入。

handleChange = event => {
      const { name, value } = event.target
    
      this.setState({
        [name]: value,
      })
    }

在我们继续提交表单之前，让我们开始工作。在渲染中，让我们从状态中获取两个属性，并将它们指定为与正确的表单键对应的值。我们将该`handleChange()`方法作为`onChange`输入运行，最后我们将导出该`Form`组件。

render() {
      const { name, job } = this.state;
    
      return (
        <form>
          <label>Name</label>
          <input
            type="text"
            name="name"
            value={name}
            onChange={this.handleChange} />
          <label>Job</label>
          <input
            type="text"
            name="job"
            value={job}
            onChange={this.handleChange} />
        </form>
      );
    }
    
    export default Form;

在`App.js`，我们可以渲染表格下方的表格。

**App.js**

App.js
    return (
      <div className="container">
        <Table characterData={characters} removeCharacter={this.removeCharacter} />
        <Form />
      </div>
    )

现在，如果我们转到应用程序的前端，我们将看到一个尚未提交的表单。更新一些字段，您将看到`Form`更新的本地状态。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 5][]

凉。最后一步是允许我们实际提交该数据并更新父状态。我们将创建一个名为`handleSubmit()`on 的函数`App`，它将通过使用[ES6扩展运算符][ES6 1]获取现有`this.state.characters`并添加新`character`参数来更新状态。

**App.js**

App.js
    handleSubmit = character => {
      this.setState({ characters: [...this.state.characters, character] })
    }

让我们确保我们将其作为参数传递给`Form`。

现在`Form`，我们将创建一个`submitForm()`调用该函数的方法，并将`Form`状态作为`character`我们之前定义的参数传递。它还会将状态重置为初始状态，以便在提交后清除表单。

**Form.js**

Form.js
    submitForm = () => {
      this.props.handleSubmit(this.state)
      this.setState(this.initialState)
    }

最后，我们将添加一个提交按钮来提交表单。我们使用的是`onClick`而不是`onSubmit`因为我们没有使用标准提交功能。点击将调用`submitForm`我们刚刚制作的。

就是这样！该应用程序已完成。我们可以在表格中创建，添加和删除用户。由于`Table`并且`TableBody`已经从状态拉出，它将正确显示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 6][]

如果您在途中迷路了，可以[在GitHub上][GitHub]查看[完整的源代码][GitHub]。

## **引入API数据** ##

React的一个非常常见的用法是从API中提取数据。如果您不熟悉API是什么或如何连接到一个API，我建议您阅读[如何使用JavaScript连接到API][JavaScript_API]，它将引导您了解API以及如何将它们与vanilla JavaScript一起使用。

作为一个小测试，我们可以创建一个`Api.js`文件，并`App`在那里创建一个新文件。我们可以测试的公共API是[Wikipedia API][]，我[在这里][Link 7]有一个[URL端点][Link 7]用于随机\*搜索。您可以转到该链接查看API - 并确保在浏览器上安装了[JSONView][]。

我们将使用[JavaScript的内置Fetch][JavaScript_Fetch]从该URL端点收集数据并显示它。您可以我们创建的应用程序，这个测试文件之间仅通过更改URL中的切换`index.js`\- `import App from './Api';`。

我不打算逐行解释这个代码，因为我们已经学会了通过状态数组创建组件，渲染和映射。这段代码的新方面是`componentDidMount()`React生命周期方法。**生命周期**是React中调用方法的顺序。**安装**是指插入DOM的项目。

当我们引入API数据时，我们想要使用`componentDidMount`，因为我们希望在引入数据之前确保组件已呈现给DOM。在下面的代码片段中，您将看到我们如何从Wikipedia API引入数据，并将其显示在页面上

**Api.js**

Api.js
    import React, { Component } from 'react'
    
    class App extends Component {
      state = {
        data: [],
      }
    
      // Code is invoked after the component is mounted/inserted into the DOM tree.
      componentDidMount() {
        const url =
          'https://en.wikipedia.org/w/api.php?action=opensearch&search=Seona+Dancing&format=json&origin=*'
    
        fetch(url)
          .then(result => result.json())
          .then(result => {
            this.setState({
              data: result,
            })
          })
      }
    
      render() {
        const { data } = this.state
    
        const result = data.map((entry, index) => {
          return <li key={index}>{entry}</li>
        })
    
        return <ul>{result}</ul>
      }
    }
    
    export default App

在本地服务器中保存并运行此文件后，您将看到DOM中显示的Wikipedia API数据。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 7][]

还有其他生命周期方法，但是超出它们将超出本文的范围。您可以[在此处阅读有关React组件的更多信息][React 1]。

*\*维基百科搜索选择可能不是随机的。这可能是我在2005年率先发表的一篇文章。*

## **构建和部署React应用程序** ##

到目前为止，我们所做的一切都处于开发环境中。我们一直在编译，热重新加载和更新。对于生产，我们将要加载静态文件 - 没有源代码。我们可以通过构建和部署它来实现这一点。

现在，如果您只想编译所有React代码并将其放在某个目录的根目录中，那么您需要做的就是运行以下行：

npm run build

这将创建一个`build`包含您的应用程序的文件夹。将该文件夹的内容放在任何地方，你就完成了！

我们还可以更进一步，为我们部署npm。我们将构建到GitHub页面，因此您必须[熟悉Git][Git]并在GitHub上获取代码。

确保您已退出本地React环境，因此代码当前未运行。首先，我们要添加一个`homepage`字段`package.json`，其中包含我们希望我们的应用程序存在的URL。

**的package.json**

package.json
    "homepage": "https://taniarascia.github.io/react-tutorial",

我们还将这两行添加到`scripts`属性中。

"scripts": {
      // ...
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }

在您的项目中，您将添加`gh-pages`到devDependencies。

npm install --save-dev gh-pages

我们将创建`build`，它将包含所有已编译的静态文件。

npm run build

最后，我们将部署到`gh-pages`。

npm run deploy

我们完成了！该应用程序现已在[https://taniarascia.github.io/react-tutorial上发布][https_taniarascia.github.io_react-tutorial]。

翻译自:[https://www.taniarascia.com/getting-started-with-react/][https_www.taniarascia.com_getting-started-with-react]

[20190728234953600.png]: https://img-blog.csdnimg.cn/20190728234953600.png
[aHR0cHM6Ly93d3cudGFuaWFyYXNjaWEuY29tL3N0YXRpYy9kNjk1ZmU2OTE5OGNjNDU1ODI4NGU5YWVjMWE0ODkyYy80MTQ4ZS9yZWFjdC5wbmc]: /images/20210923/cc98210bc49243048edd19a5a559e424.png
[api]: https://www.taniarascia.com/tags/api/
[javascript]: https://www.taniarascia.com/tags/javascript/
[Link 1]: https://www.taniarascia.com/tags/library/
[Link 2]: https://www.taniarascia.com/tags/react/
[HTML_CSS]: https://internetingishard.com/
[JavaScript]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript
[DOM]: https://www.taniarascia.com/introduction-to-the-dom/
[ES6]: https://www.taniarascia.com/es6-syntax-and-feature-overview/
[Node.js_npm]: https://www.taniarascia.com/how-to-install-and-use-node-js-and-npm-mac-and-windows/
[GitHub]: https://github.com/taniarascia/react-tutorial
[Link 3]: https://taniarascia.github.io/react-tutorial/
[GitHub 1]: https://github.com/facebook/react
[React]: https://reactjs.org/docs/react-api.html
[React DOM]: https://reactjs.org/docs/react-dom.html
[Babel]: https://babeljs.io/
[render]: https://reactjs.org/docs/react-component.html#render
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70]: /images/20210923/0afdc3914b6e470fa0d58e698ba8acdd.png
[Create React App]: https://github.com/facebook/create-react-app
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 1]: /images/20210923/cb9a41ddb44f4ee9b798e01a07accddf.png
[Primitive CSS]: https://taniarascia.github.io/primitive/css/main.css
[Chrome_React DevTools]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 2]: /images/20210923/173dd6f977aa49a5b163b27bd2cfb5fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 3]: /images/20210923/1ae913345cfe4f2ba99d621688038f24.png
[2018 08 19 at 5 43 39 PM]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudGFuaWFyYXNjaWEuY29tL3N0YXRpYy80YTQ3MzI5MGJlZjU0MzVmYjlhYTg3ODMxNmRlMDZlZi80ZDNmMS9TY3JlZW4tU2hvdC0yMDE4LTA4LTE5LWF0LTUuNDMuMzktUE0ucG5n
[2018 08 19 at 5 43 39 PM_2018 08 19 at 5 43 39 PM]: https://www.taniarascia.com/static/4a473290bef5435fb9aa878316de06ef/69f8f/Screen-Shot-2018-08-19-at-5.43.39-PM.png
[Link 4]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
[Link 5]: https://reactjs.org/docs/lists-and-keys.html#keys
[Link 6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 4]: /images/20210923/ff1eb4342501421e98aed465e8aaf4f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 5]: /images/20210923/20f5dc3945564eff840502af3c8f7662.png
[ES6 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 6]: /images/20210923/77b43183feaa483d8e3d1d7a6c1b72e6.png
[JavaScript_API]: https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/
[Wikipedia API]: https://en.wikipedia.org/w/api.php
[Link 7]: https://en.wikipedia.org/w/api.php?action=opensearch&search=Seona+Dancing&format=json&origin=*
[JSONView]: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
[JavaScript_Fetch]: https://www.taniarascia.com/how-to-use-the-javascript-fetch-api-to-get-json-data/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70 7]: /images/20210923/821e758b9b274916ab08e2ad09623d03.png
[React 1]: https://reactjs.org/docs/react-component.html
[Git]: https://www.taniarascia.com/getting-started-with-git/
[https_taniarascia.github.io_react-tutorial]: https://taniarascia.github.io/react-tutorial
[https_www.taniarascia.com_getting-started-with-react]: https://www.taniarascia.com/getting-started-with-react/