react完成井字棋小游戏

上次说到我们按照官方文档体验了一下React

这次我们搭建本地react开发环境，首先需要将node升级到14以上并且npm需要5.6以上，这个去官网下载安装包覆盖安装即可

然后我们按照教程创建项目

注意 第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具

然后删除src目录下的默认文件，创建一个index.css以及index.js

index.css

然后是index.js

完成后按照教程一步一步来

做到最后实现了整个功能，我还进行了总结中的拓展

如果你还有充裕的时间，或者想练习一下刚刚学会的 React 新技能，这里有一些可以改进游戏的想法供你参考，这些功能的实现顺序的难度是递增的：

1. 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)。
2. 在历史记录列表中加粗显示当前选择的项目。
3. 使用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode）。
4. 添加一个可以升序或降序显示历史记录的按钮。
5. 每当有人获胜时，高亮显示连成一线的 3 颗棋子。
6. 当无人获胜时，显示一个平局的消息。

最后我的index.js为：

完整代码放到了码云：https://gitee.com/VampireAchao/simple-react.git