React入门教程：概述和演练

lemonChen
922 阅读21分钟

导语

此文为翻译文章，原文地址：www.taniarascia.com/getting-sta…

react入门的基本指南. 本演练教程将使你从零开始在React中构建应用程序，并且学习state，props 和 components

从我一开始学习javascript的时候，我就一直在听说react，但是我承认我看了一会，它吓到我了。我看到了看起来像一堆HTML 和 Javascript的混合思想，这难道不是我们一直努力在避免的 ？ react 有什么大不了的？

相反地，我专注于学习原始的javascript并在工作中使用jquery,经过几次挫败，失败的尝试开始使用React之后，我终于开始使用它了,然后我开始明白为什么我可能想使用react 而不是原始的JavaScript或者jQuery

我试着将我所学习的所有东西记录下来，分享给你们，以下就是

提前须知

在开始使用react之前，有一些需要提前了解的知识点，如果你之前从来没使用过JavaScript 和 DOM，在你使用react之前，你应该先熟悉一下这些

以下是我觉得使用react之前要先了解的东西：

目标

  • 学习基本的react概念和相关术语，例如babel，webpack，JSX，components,props,state和生命周期
  • 构建一个非常简单的react程序来了解上面的概念

以下是源文件和示例：

React是什么

  • React是一个javascript库 - 在github上star超过100000的最受欢迎的库之一
  • React不是一个架构
  • React是由Facebook创建的一个开源项目
  • React被用来在前端创建用户界面
  • React是MVC应用程序的视图层

React最重要的方面之一就是你可以创建自定义，可复用的HTML元的组件，快速有效的构建用户界面.React还使用state和props简化了数据存储和处理方式

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

引用 and 安装

有几种引用React的方法，我会在这里展示两种方式以便你们更好的了解其工作原理、

静态 HTML 文件

第一种引用React的方式不是很受欢迎并且不是本教程其余部分的工作方式，但是如果你曾经使用过Jquery库，就会感觉这种方式很熟悉和很容易理解，并且如果你不熟悉webpack、babel和node.js，这是最好的学习方式.

开始我们创建一个index.html文件，在头部引入第三方CDNS地址 - react、react-dom和babel。然后创建一个id为root的div，最后我们将在你自定义代码的位置创建一个script标签

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title>Hello React!</title>
			<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
			<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.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 - 一个让我们在旧浏览器中使用es6+语法的Javascript编译器

我们应用程序的入口起点是按照惯例命名的root div元素，同时还有使用babel必备的text/babel脚本类型

现在，让我们编写React的第一个代码块，我们将用ES6 class语法创建一个名为App的组件

class App extends React.Component {
}

现在，我们将添加一个render函数，在一个class 组件中唯一需要的函数，用来渲染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 class添加到id为root的div中

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

以下是index.html文件的全部代码：

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

在浏览器打开index.html,可以看到创建h1标签被渲染到DOM

棒!你已经做到了，你现在会发现学习React不是那么难的一件事。它仅仅是可以添加到我们的HTML的JavaScrip帮助库

出于演示目的，我们介绍了这种方法，但是从现在开始，我们将使用另外一种方法： Create React App

Create React App

我刚才使用过的将javascript库引入到静态HTML文件并即时渲染React和Babel的方法不是有效率的，并且很难维护

幸运的是，facebook开发了Create React App,一个预配置了构建React应用程序所需的一切的环境。它将创建一个开发服务器，使用webpack自动编译React、JSX和ES6，自动前缀css文件，并且用ESlint规范代码

在你的终端，执行以下代码来安装create-react-app，react-project为你希望项目所在的目录

npx create-react-app react-project

安装完成之后，进入react-project目录并且启动工程

cd react-project && npm start

当你执行这个命令的时候，会自动在浏览器打开http://localhost:3000/, 展示react内容

Create React App 非常适合初学者和大型企业应用程序入门，但是它不是对每个工作流程都是完美的，你也可以会React创建你自己的webpack配置

看项目结构，可以看到一个/public和 /src 目录，还有常规的node_modules，.gitignore，README.md 和 package.json

在/public中，最重要的文件是index.html，跟我们之前只添加了一个div元素的index.html很相似。在这个文件中，没有引入库和javascript。/src包含了我们所有的React代码

想看看React代码是怎么被自动编译和更新的，在/src/App.js中找到下图这行代码：

edit `src/App.js` and save to reload

更改以上文本，然后保存文件，你会看到http://localhost:3000/编译了并且文本内容改变了

继续并从/src目录中删除所有文件，我们将构建我们自己的不包含其他多余的文件。我们只保留index.css和index.js

对于index.css,我仅仅就复制粘贴了Primitive CSS的内容到其中，如果你需要的话，你可以使用bootstrap或者其他任何你想使用的css框架，或者什么都不用，我仅仅是因为觉得它好用

在index.js,我们导入React,React DOM和css文件

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

让我们再次创建我们的App组件，之前我们只有一个h1,现在我添加一个带有class的div元素，可以发现我们使用className而不是class，这是第一个表明我们写的代码是Javasript而不是html的提示

class App extends React.Component{
	render(){
 		return <div className='App'><h1>hello world</h1></div>
	}
}

最后我们要将App渲染到root中去

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

以下是index.js文件的全部代码，这里我们将引入React的一个属性Component,因此我们不再需要继承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 world</h1></div>
	}
}

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

如果你返回去看http://localhost:3000/，你会看到跟之前一样的hello world,现在我们开始使用React了

React Developer Tools

有个叫React Developer Tools的扩展工具让你在使用React变得更加轻松。下载React DevTools for Chrome,或者其他你使用的浏览器

你安装以后，当你打开devtools，你可以看到一个reacttab，点击它，并且你可以在编写组件的时候检查它们.你也可以去elementstab,去看真实的DOM输出。现在看起来似乎没什么大不了的，但是随着应用程序越来越复杂，使用它就变得越来越有必要

现在我们有了使用react需要的所有工具和配置

JSX: JavaScript + XML

可以看到，在我们的reactcode中我们使用了类似HTML的代码，但是它是不完全的HTML.这是JSX,指的是JavaScript XML

使用JSX，我们可以写看起来像HTML的代码，同时我们也可以创建和使用我们自己的 XML-like 标签。以下是JSX分配给变量的样子

const heading = <h1 className='heading'>hello,react</h1>

写React使用JSX不是强制性的，在引擎中，通过creatElement方法，包含一个标签，包含属性的对象和组件的子元素，会渲染出相同的信息。以下代码将会和上面JSX代码输入相同的内容

React.creatElement('h1',{className:'heading'},'hello,react')

JSX更接近于javascript,而不是HTML,因为在你们写的时候，这里有几点需要特别注意的：

  • 当添加css的class属性是使用className而不是class，因为在JavaScript中class是一个保留的关键字
  • 属性和方法在JSX使用驼峰写法 - onclick写成onCLick
  • 自闭合标签必须以/结尾 - 例如

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

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

JSX比创建和添加大量的元素在原始的JavaScript中更容易编写和理解，这也是React如此受欢迎的原因之一

Components

到这里，我们已经创建了一个组件- App组件,在React中几乎一切皆组件，包含class components 和 **simple components **

大部分React应用程序包含很多小的组件，并且把所有的文件引入到主要的App组件中.组件同时也包含自己的文件，让 我们用这种方式来编写我们的工程代码吧

吧index.js中的class 移除，如下图所示：

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

我们将创建一个叫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中引入它，将组件拆分成一个个文件不是必须的，但是如果我们不这样做的话，应用程序将会变得笨拙和混乱。

Class Components

我们再来创建另外一个组件，我们将创建一个table,首先添加一个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;

我们创建了一个自定义class组件，我们将自定义组件的名称大写，主要是为了跟html元素做区分.然后使用import在App.js中引入Table.js

import Table from './Table'

然后在App的render函数中引用它，也就是之前我们写‘hello,react’的地方.同时我也修改了外层容器的class

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

class App extends Component {
	render(){
    	return (
        	<div className='App'>
            	<Table />
        	</div>
        )
	}
}
export default App

然后查看浏览器，可以看到页面渲染了这个表格

现在我们知道了一个自定义组件是什么了，并且我们可以重复使用这个组件.但是，由于这个组件里面的数据是固定的，所以现在它也没有很大的用处。

Simple Components

React中其他一种类型的组件是simple components，它是一个函数。这类型的组件不用class关键字。让我们来编写Table,并且为它创建两个组件 - 一个表格头和一个表格体

我们将使用ES6的箭头函数来创建这些组件，首先是table header

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

然后是body：

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文件是下面的样子.注意TableHeader和TableBody在同一个文件中，并被Tablecalss组件使用.

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

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

现在浏览器页面内容应该跟之前一样。你可以看到，组件可以被另一个组件使用，并且simple components和class components可以混合使用

一个class compoent 必须包含render(),并且return必须包含一个父级元素

作为一个总结，我们来比较一下一个simple componet和class component：

// simple component
const SimpleComponent = ()=>{
	return <div>Example</div>
}

//class component
class ClassComponent extends Component {
    render() {
      return <div>Example</div>
    }
}

注意如果return中只有一行，就不需要写括号()

Props

现在我们有一个Table组件，但是它里面的数据是写死的。React强大之处之一就是如何处理数据，通过属性(称为props)和state来处理数据.现在我们通过props来处理数据

首先，删除TableBody组件中的所有的数据

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

然后我们把数据放在一个数组中，就像引入一个基于JSON的API.我们把这个数组写在render()中

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开发者工具并且审查Table组件，可以在属性中看到一个数组数据.这个数据以虚拟DOM的方式存储，这是一种将数据与真实DOM同步的快速与高效的方式

不过该数据还没存在真实DOM中.在Table，我们可以获取所有的props通过this.props.我们只传递了一个props，characterData,所以我们将使用this.props.characterData来获取该数据

我将使用ES6语法将this.props.characterData赋值给一个变量

const {characterData} = this.props

由于我们的Table组件实际上是由两个更小的simple组件组成，我将通过props将数据传递给TableBody

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

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

现在TableBody不带有任何参数并且返回一个单个标签

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

我们将props作为参数传递，然后map遍历这个数组返回一个个table row 对应着数组中的每个对象。每一行的映射将被包含在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>
}

如果你在应用程序中查看，可以看到所有的数据全都渲染了

你应该已经注意到我给每个row都添加了一个key.你在react中编写列表的时候总是会使用keys，因为它们被用来标识列表中的每一项.我们也可以发现在我们操作列表项的时候，添加key是很有必要的

Props是将现有数据传递给React组件的一种有效方式，但是组件不能修改props - 它们是只读的.下一章节，我们将学习如何使用state来进一步控制react中的数据处理

state

现在，我们以数组的形式将character数据存储在一个变量中，并且让它作为一个props传递.这是一个很好的开始，但是你想一下假如我们想删除数组中的一项的时候.props是单向数据流的，但是使用state，我们可以修改一个组件中的私人数据

你可以把state想象成是可以被保存和修改但是不必被添加到数据库中的任何数据 - 例如，在确认下单时，给你的购物车添加和删除东西

首先，我们创建一个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
      },
    ],
  }
}

我们的数据被添加到state中，因为我们想可以做到删除其中的某一项，我们将在父级Appclass中添加一个removeCharacter方法

访问state，我们可以使用之前使用过的ES6语法来获取this.state.characters. 修改state，我们可以使用this.setState() - 一个操作state的内置方法，我们将使用filter方法根据index过滤掉我们想删除的一项，然后返回新的数组

你必须使用this.setState()来修改数组.简单的将新值赋值给this.state.property将不起作用

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

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

filter不会改变原数组而是创建一个新数组，并且在javascript中是一个修改数组更好的方法.这个方法主要是用来过滤掉不满足返回条件的一项，然后返回剩余项

现在我们必须把该函数传递给组件，给需要调用该函数的每一项旁边添加一个button。我们将removeCharacter作为一个props传递给Table

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

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

因为我们将通过Table传递给TableBody,我们需要再次将它作为属性传递给TableBody,就跟我们传递characterData一样

除此之外，因为在我们的工程中，唯一具有自己states的组件是App和Form,所以将Table组件从class组件转换成simple组件将是一个最好的实践

const Table = (props) => {
  const {characterData, removeCharacter} = props

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

这里会出现我们在removeCharacter中定义的index，在TableBody组件中，我们将key/index作为一个参数传递，因此filter方法知道应该删除哪一项，我们将添加一个绑定onClick的button来传递事件

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

onClick函数必须通过返回一个removeCharacter方法的函数进行传递，否则他将会自动运行

现在，我们有删除按钮，并且我们可以删除其中一项来修改state

我删了mac

现在你应该知道怎么初始化state和修改state了

Submitting Form Data

现在我们已经在state存储数据了，并且我们可以删除state中的任一项，但是如果我们想添加一项到数据中呢，在真正的应用程序中，我们经常是从一个空的state开始然后往里面添加数据，例如一个代办事项或者一个购物车

在做其他事之前，我们首先删除掉characters中的所有固定数据，因为我们将通过form来更新他们

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

现在我们继续，创建一个叫form.js的新组件

我们首先在form中设置一个初始化state，它是一个班喊了一些空属性的对象，然后将它赋值给this.state

import React, {Component} from 'react'

class Form extends Component {
  initialState = {
    name: '',
    job: '',
  }

  state = this.initialState
}

以前，在React的class组件中是必须包含一个constructor()，但是现在不再是必须的

我们的目标是当我们每次修改form中的一处时，可以更改form中的state，并且当我们提交的时候，所有的数据都会被传递给Appstate,然后更新Table

首先，我们添加一个函数，让每次更改input的时候都会运行，event将会被传递，然后我们将Form的state设置为输入的name(key)和value

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

在我们提交form之前，我们继续编辑文件。在render中，获取state中的两个属性值，然后作为值分配给对应的key。然后将handleChange方法负责给input的onChange,然后导出Form

render() {
  const { name, job } = this.state;

  return (
    <form>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        value={name}
        onChange={this.handleChange} />
      <label htmlFor="job">Job</label>
      <input
        type="text"
        name="job"
        id="job"
        value={job}
        onChange={this.handleChange} />
    </form>
  );
}

export default Form

在App.js,我们在Table下面添加form

import Form from './Form'

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

现在，我们去浏览器查看应用程序，然后我们可以看到一个还没有提交按钮的form.修改一些文件你可以看到本地的state被修改了

最后我们要允许提交数据并且更新父级state,在App中创建一个名为handleSubmit()的函数来更新state，通过使用ES6分隔符 给原有的this.state.characters添加一项

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

接着我们确认一下在Form中把它作为一个参数传递了

<Form handleSubmit={this.handleSubmit} />

现在在Form中，我们添加一个名为submitForm()的方法调用这个方法，并且把我们之前定义好的Formstate作为一个参数传递进去，然后重置state为initial state，在提交表单之后清除数据

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

最后，我们添加一个提交按钮提交表单，我们会使用onClick而不是onSubmit,因为我们没有使用标准的提交功能.这个click将调用我们创建的submitForm

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

最后，app完成了，我们可以创建，添加和移除table中的用户.因为Table和TableBody可以读取state中的数据，所以他可以正确的显示.

如果你以上诉方式中出现了一下问题，你可以在github中查看完整的代码

提取API数据

React最常用的用法之一是从API中提取数据.如果你不熟悉什么是API或者怎么连接到一个API,我建议你阅读How to Connect to an API with JavaScript,它将带你了解什么是APIs以及如何将它们与原始JavaScript一起使用.

作为测试，我们创建一个新的文件Api.js,然后创建一个新的应用程序，我们可以测试的公共API是Wikipedia API.我有一个URL端点,可以进行随机*搜索.你可以点击这个链接查看这个API-确保你已经在你的浏览器中安装了JSONVIEW.

我们将使用javascript's built-in Fetch从该URL端收集数据并展示它.你可以在我们创建的应用之间切换，并且这个测试文件只需要在index.js改变引入URL-import App from './Api'

我不会一行一行的去讲解代码，因为我们已经学习了创建一个组件，渲染和通过一个state数组映射数据.这个代码的新方面是componentDidMount(),一个React生命周期函数.lifecycle是在React中调用方法的顺序.Mounting是指某一项被添加到DOM中.

当我们从API中提取数据，我们想用componentDidMount,因为我们要在引入数据之前确保组件已被渲染.在下面的片段中，您将看到我们如何从Wikipedia API引入数据，并将其显示在页面上.

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

一旦你保存并且在本地服务器上面运行，你可以看到Wikipedia API的数据显示在DOM中

React还有其他生命周期函数，你可以在本文章之外去了解它们，你可以在这里阅读更多关于react组件.

构建和部署React应用程序

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

现在，如果你仅仅想要解析所有的React代码并且把它放在某个地方的一个文件夹的根目录，你需要做的就是执行下面的一行代码：

npm run build

这将会创建一个包含你的应用程序的build文件夹，将文件夹的内容放在任意地方，然后搞定.

我们还可以更进一步，使用npm为我们部署，我们将构建到GitHub页面，因此你必须已经熟练使用git并且将你的代码上传到gitHub

确保你已经退出本地React环境，因此代码此刻不是运行状态。首先，我们在package.json文件中添加一个homepage,它对应的url是我们向我们的应用程序代码存放的地址

"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

完成了，你可以在taniarascia.github.io/react-tutor…. 查看效果

Conclusion

这个文章将起到一个引导作用，让你对React,simple和class组件,state,props,处理数据，提取API数据和部署一个应用程序有了初步的了解。React还有更多需要学习的地方，但是我希望你现在可以自己对于研究和使用React充满自信

avatar
文章
阅读
粉丝