React入门 - 概述和演练教程

最新推荐文章于 2022-05-09 23:40:39 发布

多纤果冻

最新推荐文章于 2022-05-09 23:40:39 发布

阅读量419

点赞数

分类专栏： React

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React入门 - 概述和演练教程

api javascript 库的反应

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

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

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

先决条件

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

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

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

目标

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

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

什么是React？

React是一个JavaScript库 - 最受欢迎的库之一，在GitHub上有超过100,000颗星。
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 +

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

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

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

现在我们将添加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我们创建的类呈现到rootHTML中的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。

凉！既然你已经完成了这个，你可以看到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.2Node.js中有或更高。

npx create-react-app react-tutorial

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

cd react-tutorial
npm start

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

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

在/public，我们的重要文件是index.html，它与index.html我们之前制作的静态文件非常相似- 只是一个rootdiv。这次，没有加载任何库或脚本。该/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，或者您喜欢使用的任何浏览器。

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

现在我们拥有了实际开始使用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类，而不是classJavaScript中的保留关键字。
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加载的内容。

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

简单组件

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同步。

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

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

const { characterData } = this.props

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

Table.js

Table.js
class Table extends Component {
  render() {
    const { characterData } = this.props

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    )
  }
}

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

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

我们将作为参数传递道具，并通过数组映射以返回数组中每个对象的表行。此映射将包含在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中制作列表时应始终使用键，因为它们有助于识别每个列表项。我们还将在我们想要操作列表项的那一刻看到这是如何必要的。

道具是将现有数据传递给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()一种内置的方法来操作状态。我们将根据我们传递的数组过滤数组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()方法的函数，否则它将尝试自动运行。

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

我删除了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更新的本地状态。

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

App.js

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

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

<Form handleSubmit={this.handleSubmit} />

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

Form.js

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

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

<input type="button" value="Submit" onClick={this.submitForm} />

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

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

引入API数据

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

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

我们将使用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数据。

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

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

构建和部署React应用程序

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

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

npm run build

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

我们还可以更进一步，为我们部署npm。我们将构建到GitHub页面，因此您必须熟悉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://www.taniarascia.com/getting-started-with-react/

多纤果冻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录