开始学习React—概述与演练（好文翻译）

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

CSDN认证用户

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

阅读量493

点赞数 1

分类专栏：前端 JavaScript react

本文链接：https://blog.csdn.net/helloyongwei/article/details/83020389

版权

前端同时被 3 个专栏收录

77 篇文章 0 订阅

订阅专栏

JavaScript

38 篇文章 0 订阅

订阅专栏

react

2 篇文章 0 订阅

订阅专栏

这篇文章来自于Getting started with React. 以下是翻译原文.

React基本概念的概览与演示, 如components, state和props, 以及提交表单, 从API获取数据或者部署React 应用到生产环境.

自动我第一次学习JavaScript时就已经听说了React, 但是我要承认我看了它一眼就被它吓到了. 我看到它像混合着JavaScript的HTML, 这不是我们正要避免的吗? React有什么了不起的?

相反, 我专注于学习原生 JavaScript并在专业环境使用jQuery. 经历了几次入门React学习之后, 我终于学会了React, 而且我逐渐懂得了我为什么想使用React而不是原生JavaScript和jQuery.

我尝试着把我学到的所有东西精简为一个好的的介绍分享给你. 以下便是.

前提

如果以前从没有使用过JavaScript和DOM, 在你开始使用React之前有一些东西你应该预先知道. 举例来说, 我会在使用React之前先熟悉它们.

这是我认为学习React的前提

基本熟悉HTML&CSS
对JavaScript和程序基本了解
基本理解DOM
熟悉ES6的语法和特性
全局安装node.js和npm

目标

学习基本的React概念和相关术语, 如Babel, Webpack, JSX, 组件, props(属性), state(状态)和生命周期
构建一个非常简单的React应用来演示上述概念

React是什么

React是JavaScript库-最受欢迎的库之一, 在github上拥有超过100, 000 stars.
React不是一个框架(不像Angular, 它更加顽固)
React是Facebook的开源项目
React常用来在前端构建UI
React是一个MVC应用程序的视图层(Model, View, Controller)

React最重要的特征之一是, 你可以创建自定义组件, 可重用的HTML元素去快速且高效的构建UI. React还使用state和props流线化数据如何存储和处理.

我们将在文本中详细地介绍全部内容, 让我们开始吧.

安装

有许多方法建立React, 我给你展示两种方法, 这样你就能知道它是如何工作的.

静态HTML文件

第一个方法不是建立React的流行方法并且不知道在我们的教程其余部分要做什么. 但是如果你使用过jQuery这样的库就很容易理解. 如果你不熟悉Webpack, Babel和Node.js, 这是最不可怕的入门方式.

让我们通过创建基本的index.html文件开始吧. 我们在head中加载三个CDNS—React, React DOM和Babel. 我们还要创建一个id为root的div标签, 最后我们创建一个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

我们应用程序的入口将是id为root的div标签, 这由习惯命名. 你将注意到text/babel的脚本类型, 这让我们强制使用Babel.

现在, 让我们写下React的第一个代码块. 我们将使用ES6的类去创建一个叫App的React组件.

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

现在我们添加render() 方法, 在组建中这个唯一的一个必须要有的方法, 它常用来渲染DOM节点.

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

在return里面, 我们放置一个看起来简单的HTML元素. 注意我们没有在这里返回字符串, 因此不要在元素的周围使用引用. 这个叫做JSX, 我们在后面会学习更多JSX.

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

最后, 我们使用React DOM 的render()方法去渲染我们在HTML中root元素中创建App类

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

这是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辅助库.

我们这样做是为了演示, 但是从这里开始我们要使用另外一种方法: Create React App.

创建React应用程序

前面的方法我用来加载JavaScript库到静态HTML页面并渲染React和Babel, 它并不是有效率, 而且不易维护.

幸运的是, Facebook已经创建了Create React App环境, 它会预先配置你需要构建React App的所有东西. 它会创建一个现有的开发环境服务器, 并使用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, .gitignore, README.md和package.json.

在/public目录中, 我们的重要文件是index.html, 它和我们之前创建的静态index.html文件(只有一个id为root的div元素)很像. 现在, 没有库和脚本被加载. /src目录将包含我们的React代码.

去看看环境如何自动编译和更新你的React代码, 在/src/App.js中找到像这样的一行:

To get started, edit <code>src/App.js</code> and save to reload.

并用其他文本替换. 当你保存文件后, 你会注意到localhost:3000使用新的数据编译和刷新.

接着删除/src目录下的所有文件, 并且我们创建自己的模板文件, 没有任何的多于. 我们只留下index.css和index.js

对于index.css, 我仅仅复制黏贴Primitive CSS中的内容到index.css中. 如果你想, 你也可以使用Bootstrap或者任何你想用的CSS框架, 或者啥也不用. 我发现它很容易工作.

现在在index.js中, 我们引入React, ReactDOM 和CSS文件.

// 目录: src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

让我们再一次创建我们的App组件. 再次之前, 我们已经有了<h1>, 但是现在我要添加一个带有class的div元素. 你注意到我使用了className而不是class. 这是我们第一个提示, 在这里被写下的代码是JavaScript, 不是真正的HTML.

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

最终, 我们和之前一样渲染App到root元素下.

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

下面是我们完整的index.js. 此时, 我们加载Component为React的一个属性, 因此我们不在需要扩展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, 你将像以前一样看到"Hello, React!". 我们现在有了一个React应用程序了.

React开发者工具

这里有一个叫做React Developer Tools的扩展, 它们让你在使用React时更加容易. 下载React Developer for Chrome, 在你喜欢的任意浏览器上运行它.

在你安装好之后, 当你打开控制台时, 你将看见React标签. 点击它后你就可以了在写组件时检查它们. 你还可以到Elements标签看真实的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, 因此在写JSX时有一些关键的区别:

使用className而不是class添加css类. 因为css是JavaScript的保留字.
在JSX中的属性和方法使用camelCase命名——例如: onclick会变为onClick
自闭和标签必须使用斜杠(/)结束—例如: <img />

JavaScript表达式必须嵌入在JSX的大括号中, 包括变量, 函数和属性.

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

比起创建并添加元素到原生的JavaScript, JSX更容易书写和理解. 这也是人们喜欢使用React的原因之一.

组件

到目前为止, 我们已经创建了一个组件——App组件. 几乎React中所有的东西都由组件组成, 组件可以是类组件或者简单组件.

大部分React应用程序有许多的组件, 所有东西加载到重要的App组件中. 组件也经常获得它们自己的组件, 所以让我们按照那样来修改我们的项目.

从index.js中移除App类, 它看起来像这样:

// 目录: 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
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, 我们要加载Table, 首先要引入它.

import Table from './Table';

然后将其加载到App的render()函数中, 之前这个函数有我们的"Hello, React!". 我还改变了外部容器的类(className)

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

如果你回顾下生产环境, 你讲看到被加载的Table.

现在我们看见的是自定义类组件. 我们可以复用这个组件. 然而, 由于数据是写死的, 它到时候不会特别有用.

简单组件

React中的另一中组件是简单组件, 它是一个函数. 这个组件不使用class关键字. 让我们使用Table创建两个简单组件——一个table header, 一个table body.

我们将使用ES6的箭头函数创建这些简单组件. 首先, 这是table header:

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

这是table 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看起来像这样:

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

所有东西都会像以前一样出现. 如你所见, 组件可以嵌入到其他组件中, 而且简单组件和类组件可以混合使用.

一个类组件必须有render()函数, 而且return 只能返回一个父元素.

总的来说, 让我们比较下简单组件和类组件.

// simaple 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组件中移除所有数据.

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

然后让我们移动所有数据到一个对象数组中, 就像我们引入了一个基于JSON的API. 我们必须在render()中创建这个数组.

//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
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访问所有props. 我们只传递一个prop, characterData, 因此我们将使用this.props.characterData来找到这个数据.

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

const { characterData } = this.props;

由于我们的Table组件事实上由两个较小的简单组件组成, 我们再一次通过props将其传递到TableBody组件中.

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

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

现在, TableBody不带参数并返回一个单一的标签.

const TableBody = () => { 
    return <tbody></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中创建列表时应该使用keys, 因为它们能识别每个列表项. 当我们想处理列表项时, 我们会理解这是多么的必要.

props是传递已知数据给一个React组件的高效方式, 然而组件不能改变props——它们是只读的. 在下一节中, 我们将在React中学习如何使用state进一步控制数据的处理.

State

现在, 我们存储character数据在一个数组变量中, 将其作为props传递. 这是好的开始, 但是想一想如果我们想要从数组中删除数组项该如何. 使用props, 我们就有一种单向数据流, 但是我们可以从组件中更新私有数据.

你可以把state考虑作为任意数据, 这个数据可被存储和修改且没有必要添加到数据库中——例如, 在确认购买之前, 添加或删除你的购物车.

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

class App extends Component {
    state = {};

这个对象包含你想在state中存储的所有东西. 对我们来说, 它就是characters.

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

移动我们之前创建的对象中的所有数组到state.characters中.

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

我们的数据是正式包含在state中了. 因为我们想从table中移除一个character, 我们可以在父级的App类创建一个removeCharacter方法.

为了找到这个state, 我们使用this.state.characters, 这和之前的ES6方法一样. 为了更新state, 我们使用this.setState(), 这是一个为操纵state而内置的方法. 我们基于传递的index过滤数组, 并返回新数组.

你必须使用this.setState()来改变一个数组. 简单的应用一个新值给this.state.property不会工作.

//App.js
removeCharacter = index => {
    const { characters } = this.state;

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

filter不会变异而是创建一个新数组, 在JavaScript中这是一个更改数组的好方法. 这个特定的方法是测试一个索引相对于数组中的所有索引, 并返回除传递之外的所有索引.

现在我们要传递函数给组件, 在每个调用此函数旁边渲染一个按钮. 我们传递removeCharacter函数作为prop给Table.

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

由于我们将其从Table向下传递到TableBody, 我们再次将其作为prop传递, 就像我们对character 数据做的一样.

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

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

这里是我们在removeCharacter()方法中定义的索引进入的地方. 在TableBody组件中国, 我们传递key/index作为参数, 因此过滤函数知道哪个数组项该移除. 我们创建一个带有onClick的按钮并传递它.

//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方法的函数, 否则它将尝试自动运行

太棒了. 现在我们有了删除按钮, 而且我们可以通过删除character修改我们的state.

我删除了Mac.

现在你应该理解state如何初始化, 它是如何修改的.

提交表单数据

现在我们的数据存储在状态(state)中, 我们可以从state中移除任意数据项. 但是, 如果我们想要添加新数据怎么办? 在现实世界中的应用程序, 你更有可能从空state开始并向其中添加数据, 比如to-do列表或者购物车.

首先, 让我们一出state.characters中的所有写死的数据, 现在我们来通过表单更新它.

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

让我们继续在Form.js文件中创建Form组件. 我们创建一个类组件, 并在内部使用constructor(), 到目前为止我们还没有做这一步. 我们需要在constructor()中使用this接收父级传递的props.

我们开始设置Form中的state初始值为带有空属性的对象, 并将初始state赋值给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中的state. 当我们提交时, 所有的数据传递给App的state, 之后会更新Table.

首先, 们将创建函数, 它在在每次对输入进行更改时运行. event将传递, 我们设置Form中的state使input之拥有name(key)和value.

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

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

让我们在提交表单之前完成它. 在渲染时, 让我们从state中获取两个属性, 并将其作为值分配给对应的表单键. 我们将运行handleChange()并作为input的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中, 我们在table下渲染表单.

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

如果我们现在进入应用程序的前端, 我们将看到一个没有提交的表单. 更新字段后你将看见本地状态(state)正在更新.

很酷, 最后一步是允许我们实际地提交表单并更新父级状态(state). 我们在App上创建一个叫handleSubmit()的函数, 这个函数使用现有的this.state.characters更新state, 并使用ES6扩展运算符添加新的character参数.

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

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

<Form handleSubmit={this.handleSubmit} />

现在在Form中, 我们将创建一个叫submitForm()的方法调用那个函数. 将Form的state作为参数传递给我们之前定义的character. 这还会设置state为初始state, 在提交表单后清空表单.

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

最终, 我们添加一个提交按钮用于提交表单. 我们使用onClick而不是onSubmit. 因为我们没有使用标准的提交功能. 点击会调用我们穿件的submitForm函数.

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

这就是react应用程序. 这个应用程序完成了. 我们可以创建, 添加, 移除表格中的用户. 由于Table和TableBody已经从state中获取到了值, 它将正确的显示.

如果你在学习React上没有头绪, 你可以看看github上的完整源码.

获取API中的数据

一个普遍的React的用法是从API中获取数据. 如果你熟悉API是什么或者如何连接它, 我建议你读一下如何用JavaScript连接到API, 这能让你理解API是什么, 并知道如何用普通的JavaScript使用它.

有一个小测试, 我们创建一个Api.js文件, 再在这里创建一个新的App. 我们可以测试一个公共的API是维基百科的API, 我还有一个URL 端点用于随机搜索. 你可以到那个链接看API——确保你在你的浏览器中安装了JSONView.

我们使用JavaScript内置的Fetch方法从URL端点获取数据并显示. 你可以通过引入import App from './Api’的index.js中的URL来切换我们创建的应用程序和测试文件.

我不准备一行一行的解释这段代码, 因为这和我们已经学到的创建组件, 渲染及通过state数组映射y一样. 有个新的代码是componentDidMount(), 它是React生命周期的一个方法. 生命周期是方法在React中调用的顺序. Mounting指明某一项插入到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;

当你在本地服务器上保存并运行这个文件, 你将看见Wikipedia API数据呈现在了DOM中.

还有其他生命周期方法, 但是详细介绍它们会超出本文的主旨. 你可以在这里阅读更多的React 组件.

构建并部署React 应用程序

目前未知我们所做的一切都发生在开发环境. 我们一直编译, 热加载和更新. 在生产环境中, 我们要统计加载中的文件——不是源文件. 我们可以通过构建和部署去做.

现在, 如果你指向编译所有的React代码并将其放在根目录下某个地方, 你需要是运行下面一行:

npm run build

这会创建一个包含你的应用程序的文件夹. 把这个文件的内容放在任何地方, 你就做完了.

我们还可以再做一步, 用npm为我们部署. 我们去构建github页面, 因此你已经熟悉Git并且在github上获取你的代码.

确保你退出了你本地的React环境, 即代码目前没有运行. 首先, 我们添加一个homepage字段到package.json, 哪里有我们想要运行应用程序的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

我们完成了!这个应用程序现在在https://taniarascia.github.io/react-tutorial.

总结

这篇文章很好的给你介绍了React, 简单/类组件, state, props, 处理表单数据, 从API中获取数据和部署应用程序. 有许多需要学习并用React实践, 我希望你现在有信心升入学习并实践React.

View Source on GitHub

View Project

CSDN认证用户

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
开始学习React—概述与演练（好文翻译）

这篇文章来自于Getting started with ReactReact基本概念的概览与演示, 如components, state和props, 以及提交表单, 从API获取数据或者部署React 应用到生产环境.自动我第一次学习JavaScript时就已经听说了React, 但是我要承认我看了它一眼就被它吓到了. 我看到它像混合着JavaScript的HTML, 这不是我们正要避免的吗...
复制链接

扫一扫