React 实现井字棋游戏 (tic-tac-toe) 教程 (1) <译自官方文档>

原文 Tutorial: Intro To React

译文 gitbook

0-目录

写在我们开始之前

我们在创建什么

前提条件

学习建议

我卡住不会了！

概览

什么是 React

开始编写

通过 Props 传数据

交互式组件

开发者工具

状态提升

为什么不可变性很重要

函数式声明组件

轮流下棋

宣布获胜者

储存历史步骤

显示每一步棋

Key

实现穿越功能

圆满完成

1-写在我们开始之前

我们在创建什么

今天，我们将要编写一个井字棋游戏程序。

你可以在这个链接查看最终的结果：Final Result。如果你现在还看不懂代码，或者发现它使用了你不熟悉的语法，别担心。在这个教程里，我们将一步步地学习如何编写这个小游戏。

试着玩玩这个游戏。右边的列表记录了每一步棋，点击其中的链接，这样能“回退”到这步棋刚走完时棋盘的格局。

一旦你稍微熟悉了这个游戏，就可以关掉游戏页面了。在下一部分中，我们将从更为简单的模板开始学习之旅。

前提条件

我们假设你已经熟悉 HTML 和 JavaScript，但即使你还没用过它们，你也能跟着教程学习。

如果你需要复习 JavaScript，我们建议你阅读这部指南。请注意，在这个教程中，我们使用了一些ES6（JavaScript的一个新版本）的新特性，包括箭头函数、类、let和 const 关键字。你可以用 Babel REPL 查看 ES6 代码编译后的结果。

学习建议

有两种途径学习本教程：你可以直接在浏览器上写代码，也可以在你的设备上搭建本地开发环境。你怎么舒服怎么来。

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

这就是开始学习的最快途径！

首先，在新标签中打开这份初始代码。它应该能显示一份空的井字棋盘。本教程将在这个基础上展开。

你现在可以跳过关于搭建本地开发环境的部分，直接看概览了。

如果你选择在你的编辑器写代码

那么，你应该在你的设备中建立一个新项目。

注意：这部分内容选做，本教程不做硬性要求。

这么做，工作量会更大，但你得以在自己用得顺手的编辑器中写代码。

如果你想这么干，则应该遵循以下步骤：

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 实现井字棋游戏 (tic-tac-toe) 教程 (2)