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

亦凉 2022-06-06 08:56 255阅读 0赞

原文 [Tutorial: Intro To React][Tutorial_ Intro To React]

[译文 gitbook][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)][React _ _tic-tac-toe_ _ _2]

[Tutorial_ Intro To React]: https://facebook.github.io/react/tutorial/tutorial.html
[gitbook]: https://beijiyang.github.io/react-tutorial-translation/
[Final Result]: https://codepen.io/gaearon/pen/gWWZgR?editors=0010
[React _ _tic-tac-toe_ _ _2]: http://blog.csdn.net/beijiyang999/article/details/78445968