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)