React 入门

举报
小米粒-biubiubiu 发表于 2020/10/22 10:34:27 2020/10/22
【摘要】 一、什么是React? React是一个JavaScript库-最受欢迎的JavaScript库之一,在GitHub上有超过100,000个星。 React不是一个框架(与Angular不同,后者更自以为是)。 React是Facebook创建的一个开源项目。 React用于在前端构建用户界面(UI)。

目录


一、什么是React?

二、React的安装方式

       (1)静态HTML文件

       (2)创建React应用

三、React开发人员工具

四、JSX:JavaScript + XML

五、组件

六、Props

         七、state

八、提交表格数据

九、提取API数据

十、构建和部署React应用


一、什么是React?

  • React是一个JavaScript库-最受欢迎的JavaScript库之一,在GitHub上超过100,000个星

  • React不是一个框架(与Angular不同,后者更自以为是)。

  • React是Facebook创建的一个开源项目。

  • React用于在前端构建用户界面(UI)。

  • React是MVC应用程序的视图层(模型视图控制器)

其中一个发生反应的最重要的方面是,你可以创建组件,这是一样的自定义,可重复使用的HTML元素,快速,高效地构建用户界面。React还使用stateprops简化了数据的存储和处理方式。

二、React的安装方式

(1)静态HTML文件

第一种方法不是设置React的流行方法,也不是本教程其余部分的工作方式,但是如果您曾经使用过jQuery之类的库,它将是熟悉且易于理解的,如果您不熟悉Webpack,Babel和Node.js,那么这是最恐怖的入门方法。

让我们开始制作一个基本index.html文件。我们将在headReact,React DOM和Babel中加载三个CDN 。我们还将创建一个div名为的ID root,最后我们将创建一个script标签,您的自定义代码将在其中存在。

<!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

这是我们的完整代码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并没有那么让人着迷。只是一些JavaScript帮助程序库,我们可以将其加载到HTML中。

我们出于演示目的完成了此操作,但是从这里开始,我们将使用另一种方法:创建React App。

(2)创建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应用程序将弹出一个新窗口。


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

在中/public,我们的重要文件是index.html,与index.html我们之前制作的静态文件非常相似-仅是一个rootdiv。这次,没有库或脚本被加载。该/src目录将包含我们所有的React代码。

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

这是我们的全部index.js。这次,我们将Componentas作为React的属性加载,因此我们不再需要extend React.Component

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应用程序的开始。

三、React开发人员工具

有一个名为React Developer Tools的扩展,可以使您在使用React时的工作更加轻松。下载适用于Chrome的React DevTools或您希望使用的任何浏览器。

安装后,当您打开DevTools时,您将看到React的标签。单击它,您将能够在编写组件时检查它们。您仍然可以转到“元素”选项卡以查看实际的DOM输出。现在看来似乎没什么大不了的,但是随着应用程序变得越来越复杂,使用它的必要性也越来越高。

 

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

四、JSX:JavaScript + XML

如您所见,我们在React代码中一直使用看起来像HTML的东西,但它并不是完全HTML。这是JSX,代表JavaScript XML。

使用JSX,我们可以编写看起来像HTML的内容,也可以创建和使用我们自己的类似XML的标签。这就是JSX分配给变量的样子。

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

编写React并非必须使用JSX。在幕后,它正在运行createElement,它接受标签,包含属性的对象和组件的子代,并呈现相同的信息。下面的代码将具有与上面的JSX相同的输出。

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

JSX实际上更接近JavaScript,而不是HTML,因此在编写时需要注意一些关键区别。

  • className用于代替class添加CSS类(classJavaScript中的保留关键字)。

  • JSX中的属性和方法为camelCase- onclick将变为onClick

  • 自闭合标签必须以斜杠结尾-例如<img />

JavaScript表达式也可以使用大括号(包括变量,函数和属性)嵌入JSX内。

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

JSX比在原始JavaScript中创建和添加许多元素更容易编写和理解,这也是人们如此热爱React的原因之一。 

将 JSX 添加到项目

将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上,添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js

在终端上跳转到你的项目文件夹,然后粘贴这两个命令:

  1. 步骤 1: 执行 npm init -y (如果失败,这是修复办法

  2. 步骤 2: 执行 npm install babel-cli@6 babel-preset-react-app@3

提示

我们在这里使用 npm 只是用来安装 JSX 预处理器,之后你不再需要它。React 和应用程序代码都可以继续使用 <script> 标签而不做任何更改。

运行 JSX 预处理器

创建一个名为 src 的文件夹并执行这个终端命令:

npx babel --watch src --out-dir . --presets react-app/prod

注意:

npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具

如果你看到一个错误消息显示为:“You have mistakenly installed the babel package”,你可能错过了上一步。在同一个文件夹中执行它,然后重试。

不要等待它运行结束 —— 这个命令启动了一个对 JSX 的自动监听器。

如果此时你用这段 JSX 入门代码创建一个 src/like_button.js 文件,监听器会创建一个预处理过的 like_button.js 文件,它包含了适用于浏览器的普通 JavaScript 代码。当你编辑带有 JSX 的源文件时,转换过程将自动重新执行。

这样,在旧浏览器上也能够使用现代 JavaScript 的语法特性,比如 class。我们刚才使用的工具叫 Babel,你可以从它的文档中了解更多。

如果你认为你已经习惯了构建工具,并希望它们能为你做更多事,下一章节描述了一些最流行和易上手的工具链。如果不使用构建工具 —— 直接以 scripts 标签的方式也可以很好地完成工作!


五、组件

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

大多数React应用程序都有许多小组件,所有内容都加载到主App组件中。组件也经常会获得自己的文件,因此让我们更改项目即可。

App从中删除该类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,并将组件放入其中。

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

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,我们可以先将其导入到表中,以加载表:

src / App.js

import Table from './Table'

 然后将其加载到的render()App,在此之前我们已经有了“ Hello,React!”。我还更改了外部容器的类。

src / App.js

import React, { Component } from 'react'
import Table from './Table'

class App extends Component {
  render() {
    return (
      <div className="container">
        <Table />
      </div>
    )
  }
}

export default App

如果您重新查看实际环境,则会看到已Table加载的环境。


现在,我们已经了解了什么是自定义类组件。我们可以反复使用此组件。但是,由于数据已被硬编码到其中,因此目前它并不太有用。

简单组件

React中的另一种类型的组件是simple component,它是一个函数。该组件不使用class关键字。让我们Table为它制作两个简单的组件-一个表头和一个表主体。

我们将使用ES6箭头功能来创建这些简单的组件。首先,表头。

src / Table.js


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

src / Table.js

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文件将如下所示。请注意,TableHeaderTableBody组件都在同一个文件中,并由Table类组件使用。

src / Table.js

const TableHeader = () => { ... }
const TableBody = () => { ... }

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包含在一行中,则不需要括号。

六、Props

现在,我们有一个很棒的Table组件,但是数据正在被硬编码。关于React的重要问题之一是它如何处理数据,它使用属性(称为props)和状态来处理数据。现在,我们将专注于使用道具处理数据。

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

src / Table.js

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

然后,将所有数据移动到对象数组中,就像我们引入基于JSON的API一样。我们必须在中创建此数组render()

src / 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,我们必须从另一端进行访问。

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

由于我们的Table组件实际上由两个较小的简单组件组成,因此我将TableBody再次通过props 将其传递给。

src / Table.js

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

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

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

src / Table.js

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

 我们将把props作为参数传递,并映射通过数组以返回数组中每个对象的表行。该映射将包含在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组件的有效方法,但是该组件无法更改道具-它们是只读的。在下一节中,我们将学习如何使用状态来进一步控制React中的数据处理。

七、state

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

您可以将状态视为无需保存或修改而不必添加到数据库的任何数据-例如,在确认购买之前在购物车中添加和删除商品。

首先,我们将创建一个state对象。

src / App.js

class App extends Component {
  state = {}
}

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

src / App.js

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

将我们之前创建的对象的整个数组移到中state.characters

src / App.js 

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将不起作用。

src / App.js

removeCharacter = index => {
  const { characters } = this.state

  this.setState({
    characters: characters.filter((character, i) => {
      return i !== index
    }),
  })
}

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

现在,我们必须将该函数传递给组件,并在每个可以调用该函数的字符旁边绘制一个按钮。我们会将removeCharacter功能作为传递给Table

src / App.js

render() {
  const { characters } = this.state

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

由于我们将其向下传递TableBodyTable,因此我们将不得不像道具数据一样再次将其作为道具传递。

src / Table.js

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

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

这就是我们在removeCharacter()方法中定义的索引的输入位置。在TableBody组件中,我们将键/索引作为参数传递,因此过滤器函数知道要删除的项目。我们将使用创建一个按钮并将其onClick传递给其他人。

src / 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我们从中删除所有硬编码数据,因为我们现在将通过表单进行更新。

src / App.js

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

现在,让我们继续Form在一个名为的新文件中创建一个组件Form.js。我们将创建一个类组件,并在constructor()其中使用,到目前为止我们还没有做过。我们需要constructor()使用this,并接收props父对象的。

我们将将的初始状态设置为Form具有一些空属性的对象,然后将该初始状态分配给this.state

src / 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会通过通过,我们会设置状态的Formname(键)和value的输入。

src / Form.js

handleChange = event => {
  const { name, value } = event.target

  this.setState({
    [name]: value,
  })
}

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

src / Form.js

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,我们可以在表格下方呈现表单。

src / App.js

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

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

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

src / App.js

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

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

<Form handleSubmit={this.handleSubmit} />

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

src / Form.js

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

最后,我们将添加一个提交按钮以提交表单。由于我们未使用标准的提交功能,因此我们使用onClick而不是onSubmit。点击将调用submitForm我们刚制作的。

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

就是这样!该应用程序已完成。我们可以在表中创建,添加和删除用户。由于TableTableBody已经从状态中拉出,因此它将正确显示。


九、提取API数据

React的一种非常常见的用法是从API提取数据。如果您不熟悉什么是API或如何连接API,我建议您阅读如何使用JavaScript连接到API,这将带您了解什么是API以及如何将它们与原始JavaScript一起使用。

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

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

我不会逐行解释此代码,因为我们已经学习了有关通过状态数组创建组件,渲染和映射的知识。该代码的新方面是componentDidMount()React生命周期方法。生命周期是在React中调用方法的顺序。挂载是指要插入DOM的项目。

提取API数据时,我们要使用componentDidMount,因为我们要确保在导入数据之前已将组件渲染到DOM。在下面的代码段中,您将看到我们如何从Wikipedia API引入数据,并将其显示在页面上

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应用

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

现在,如果您只想编译所有React代码并将其放在某个目录的根目录中,则只需运行以下行:

npm run build


这将创建一个build包含您的应用程序的文件夹。将文件夹的内容放在任何地方,就可以完成!

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

确保您退出了本地React环境,因此该代码当前未在运行。首先,我们要在中添加一个homepage字段package.json,该字段具有我们希望应用程序继续存在的URL。

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


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。