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]