react-tutorial

本文由ss根据react官方教程翻译过来,地址为:tutorial

项目准备

我们要干什么

今天,我们要做一个具有交互功能的三连棋游戏。
如果你想看最终的项目,可以点击下面这个链接:Final Result.如果你看不懂上面的代码,或者不是很熟悉语法,也不用着急,我们会通过这个教程,一步一步地做这个项目。
尝试玩游戏。 您还可以点击移动列表中的链接,以及“撤回”,看看在移动完成后,板子看起来像什么。
一旦你熟悉了游戏,可以随时关闭该标签,因为我们将从下一节中的一个更简单的模板开始。

先决条件

我们假设你熟悉HTML和JavaScript,但即使您以前没有使用过这些也可以一直跟着学。
如果您想复习JavaScript,我们建议您阅读本指南。 请注意,我们还在使用最新版本的ES6 ES6中的一些功能。 在本教程中,我们使用的是箭头函数,类,let和const语句。 您可以使用Babel REPL来检查ES6代码编译的内容。

如何跟随

完成本教程有两种方法:您可以直接在浏览器中编写代码,也可以在机器上设置本地开发环境。 您可以选择任何一种选项,具体取决于哪一种更适合您自己。

如果你喜欢在浏览器中编写代码

这是最快的入门方式!
首先,在新选项卡中打开此启动器代码。 它应该显示一个空的tic-tac-toe字段。 我们将在本教程中编辑该代码。
现在,您可以跳过下一节—了解如何设置本地开发环境,并直接浏览概述。

如果您想在编辑器中编写代码

或者,您可以在计算机上设置项目。

注意:这是完全可选的,不需要本教程!

这是更多的工作,但让您从编辑器的舒适工作。

如果你想这样做,这里是要遵循的步骤:

  • 确保您安装了最新版本的Node.js。
  • 按照安装说明创建一个新项目。
  • 删除新项目的src /文件夹中的所有文件。
  • 在具有此CSS代码的src /文件夹中添加一个名为index.css的文件。
  • 在src /文件夹中使用此JS代码添加一个名为index.js的文件,然后在其顶部添加三行:
    1
    2
    3
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';

现在,如果您在项目文件夹中运行npm启动,并在浏览器中打开http:// localhost:3000,则应该看到一个空的tic-tac-toe游戏文本。

我们建议按照以下说明配置编辑器的语法高亮。

如果你卡住了

如果您遇到困扰,请查看社区支持资源。 特别是,Reactiflux聊天是获得快速帮助的好方法。 如果您在任何地方找不到好的答案,请提出问题,我们会帮您解决。

有了这个,让我们开始吧!

概括

什么是react?

React是用于构建用户界面的声明性,高效和灵活的JavaScript库。

React有几种不同的组件,但是我们将从React.Component里面的子类开始:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}

// Example usage: <ShoppingList name="Mark" />

我们将利用很少的世界去学习类似XML这样有趣的标签。 你的组件会让React呈现你想要渲染的内容 - 然后当数据更改时,React将有效地更新和呈现正确的组件。

在这里,ShoppingList是一个React组件类,或者是React组件类型。 组件接收参数,称为props,并返回通过render方法显示的视图层次结构。
渲染方法返回您要渲染的内容的描述,然后React会将该描述呈现给屏幕。 特别地,渲染返回一个React元素,这是一个重要的描述。 大多数React开发人员使用一种名为JSX的特殊语法,可以更容易地编写这些结构。 在构建时将<div />语法转换为React.createElement(’div’)。 上面的例子相当于:

1
2
3
4
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);

如果您很好奇,createElement()在API引用中会有更详细的描述,但我们不会在本教程中直接使用它。相反,我们将继续使用JSX。
您可以在JSX内的括号内放置任何JavaScript表达式。每个响应元素都是一个真正的JavaScript对象,您可以在变量中存储或传递程序。
ShoppingList组件只呈现内置的DOM组件,但是您可以通过编写< ShoppingList / >来轻松地编写自定义的反应组件。每一个组件都封装起来,这样它就可以独立运行,这允许您构建复杂的ui,而不是简单的组件。

开始

从这个示例开始:启动代码
它包含了我们今天所建造的东西的外壳。我们已经提供了样式,因此您只需要担心JavaScript。
特别是,我们有三个组成部分:

  • Square

  • Board

  • Game
    Square组件呈现一个单一的<button>,Board呈现9个正方形,Game组件呈现一个带有一些占位符的Board,我们将在后面填充。在这一点上,没有任何组件是交互的。

    通过props传输数据

    让我们尝试将一些数据从板组件传递到正方形组件。
    在renderSquare方法中,更改代码,将值支持传递给Square:

    1
    2
    3
    4
    class Board extends React.Component {
    renderSquare(i) {
    return <Square value={i} />;
    }

    然后,更改Square的render方法,以用{this.props.value}替换{/* TODO */} 来显示这个值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
      class Square extends React.Component {
    render() {
    return (
    <button className="square">
    {this.props.value}
    </button>
    );
    }
    }

    之前的样子:

    改过之后:

    查看当前代码

    一个交互式组件

    当你点击它的时候,我们让正方形组件填入一个“X”。试着改变在渲染()函数中返回的按钮标签:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    class Square extends React.Component {
    render() {
    return (
    <button className="square" onClick={() => alert('click')}>
    {this.props.value}
    </button>
    );
    }
    }

    如果你现在点击一个正方形,你应该在你的浏览器中得到一个警告弹框。
    这使用了新的JavaScript箭头函数语法。注意,我们正在传递函数作为onClick的一个属性。onClick = { alert(' click ')}将会立即发出警报弹框,而不是单击按钮。
    React 组件可以通过构造函数中的this.state来设置状态。状态是组件的私有属性。让我们将square的当前值存储在状态中,并在单击square时更改它。
    首先,在类中添加一个构造函数来初始化状态:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}

render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}

在JavaScript中,在定义子类的构造函数时,您需要显式地调用super().
现在,更改Square的render方法来显示当前状态的值,并单击单击:

  • <button>标签里面,把this.props.value替换成this.state.value
  • 将() => alert()替换成() => this.setState({value: ‘X’})
    现在<button>标签应该是下面这样:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    class Square extends React.Component {
    constructor() {
    super();
    this.state = {
    value: null,
    };
    }

    render() {
    return (
    <button className="square" onClick={() => this.setState({value: 'X'})}>
    {this.state.value}
    </button>
    );
    }
    }
    this.setState被调用的时候,
    组件会按照预定的被更新,这会引起React合并之前的state,更新并且渲染这个组件以及它的后代节点。当组件更新过后,this.state.value会显示X,你就能在栅格里面看到X了。
    你现在点击表格的任何地方,X都会在上面显示。
    (查看现在的代码)[https://codepen.io/gaearon/pen/VbbVLg?editors=0010]