@kexinWeb 2017-09-04T20:36:21.000000Z 字数 3390 阅读 1018

React教程翻译——React简介

React 翻译

在我们开始之前

我们在建立什么

今天，我们将要建造一个互动的 tic-tac-toe 游戏。

如果你喜欢，你可以点击查看最后的结果。别担心你看不懂代码或者你遇到了不熟悉的语法。通过这个教程，我们将会学习如何一步一步地打造出这款游戏来。

试试玩玩游戏。你能点击在移动列表上的链接去到“back in time”，看看当你移动之后面板是如何改变的。

当你有点熟悉这个游戏后，随意地关闭这个选项卡。在下个章节，我们将会从一个简单的例子开始。

先决条件

我们假定你有一定的html和JavaScript基础，甚至你从来没有使用过他们。

如果你需要复习一个JavaScript，我们建议你读这个这个教程。注意，我们同时还应用了一些ES6的语法，即最新版本的Javascript。在这个教程中，我们正在使用箭头函数、类、let、const语法。你可以使用Babel REPL来看这些ES6代码编译成原生JS的样子。

如何继续跟我学习下去

有两个方式可以来完成这个教程的学习： 1、你可以直接在浏览器上面写代码。 2、你也可以选择自己搭建一个本地环境。你可以选择让你感到舒服的一个方式。

如果你更喜欢在浏览器上写代码

这是一个最快的开始码代码的方式！

开始，在新标签中打开starter code。它展示的是一个空的【井字棋】区域。我么在本教程中将会在上面编辑代码。

你可以现在跳到下个章节，关于如何构建一个本地的开发环境，然后直接去到overview那里。

如果你更喜欢在自己的编辑器里编码

很自然的，你可以在你的电脑上创建一个 project。
注意：这完全是可选的并且在本教程中不做要求

用这种方式会有很多的工作量，但是它能够使你在自己的编辑器中舒服地打代码。

如果你想要这么做，请跟着下面的步骤走：
- 1、安装最新版本的Node.js
- 2、按照安装教程创建一个新的项目
- 3、删除在src/中的所有文件
- 4、在src/文件夹中新建一个index.css，用来写css代码
- 5、在src/文件夹中新建一个index.js文件，用来写js代码。在该文件的最先几行写上：

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

现在你可以在该项目文件夹下运行npm start，并且在浏览器中打开http://localhost:3000，你能看到一个空的【井字棋】区域。

我们建议按照下列操作指示来让你的编辑器有语法高亮的功能。

求助，我被卡住了！

如果你被某个问题卡住了，看看这个互助社区。特别地，Reactiflux chat是最快最好能够获得帮助的地方。如果你在任何地方都不能找到好的答案，请发一个issue给我们，我们会帮助你解决相关问题的。

接着，我们开始吧！

概览

什么是React

React是一个直白的，高效的，灵活的javascript库，用以创建用户界面

React有少数不同类型的组件，让我们从React.component开始吧。

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 component class，或一个React component type。一个组件通过使用参数，称为props，返回一系列不同的展示内容。它是通过render这个方法来实现的。

render方法返回你想渲染的组件的描述，然后React获取这个描述并且在屏幕上渲染出来。特别地，render返回一个React element（React元素），它是一个轻量级的存在。很多React开发者使用一个特殊的语法JSX，它的目的是使组件的结构更加具有可读性。
例如：<div/>就是React.createElement('div')的变体。注意：不是document.createElement

上述例子等同于：

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

如果你很好奇，createElement()在API reference中有详细的解释。但是我们不会在这个教程中直接使用到它。我们还是继续使用JSX。

你能够在JSX中放置javascript代码，不过要把javascript代码放在大括号{}中。
每一个React元素（React Element）都是一个javascript对象，你可以把它们保存在一个变量（variable）或者是一个参数（pass）中。

ShoppingList组件只在内建的（built-in）的DOM组件中进行渲染，但你可以随意定制使用该组件，使用<ShoppingList/>语法即可。
每一个组件都被很好地封装，所以它能够独立运行。React允许你在简单的组件之外可以定制复杂的UI组件。

从这里开始

我们提供了相应的样式。
特别地，我们有三个组件：
- Square
- Board
- Game

Square组件渲染了一个简单的<buttom>，Board组件渲染了9个Square，Game组件渲染了一个Board还有一些我们之后要填充的placeHolder（占位符）。在这里，没有组件之间的互动与通信。

用Props传数据

我们已经开始迈进React的大门了，让我们来尝试从Board组件传数据到Square组件吧。在这里我们可以查看开始代码

在Board组件的renderSquare方法中，改变代码，向Square组件传一个value参数。

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

接下来改变Square的render方法，用{this.props.value}代替{/TODO/}
查看当前代码

一个可以互动的组件

让我们使Square组件在你点击它的时候，填充一个"X"。试试改变在Square组件render方法中返回的button标签。

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

如果你现在点击square，那你会看到到一个alert弹出提醒。

这里使用了ES6的箭头函数语法。注意到我们传递一个函数作为onClick的参数。

React组件还可以有state，我们可以通过在组件构造器constructor中设置this.state，它可以看成是组件的私有变量。让我们在Square组件中把当前的状态存在state中，并且当它被点击之后改变state的值。

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>
            );
    }
}

在Javascript的“类”中，当你在定义一个子类的构造函数时，你需要明确地调用super()函数。

无论什么时候调用this.setState，组件就会更新。