react基础教程

安装及使用

全局安装react

首先要安装node.js
npm install -g create-react-app

切换到项目目录

1
2
3

create-react-app my-first-react-app
cd my-first-react-app
npm start

到此，一个本地的react项目诞生了

基础使用教程

教程实现了一个井字格游戏，跟着教程练习可以了解关于react的基本知识

基础教程功能完善

1.以 “(1, 3)” 坐标的方式记录每一步，而不是格子序号 “6”。

这个功能简单来说就是参考history历史记录的实现方式即可。

1）首先history在Game组件的构造函数状态中定义了一个history的空数组，我们在这里定义一个axisHistory的空数组，二维数组用来存储坐标
定义数组

2）点击事件

我们用calAxis函数得到当前点击的坐标

function calAxis(i) {
  if (i<3) {
    return [0, i]
  } else if (i<6) {
    return [1, i]
  } else {
    return [2, i]
  }
}

3）最后一步，显示在页面上，render函数修改如下
render

效果如下：

参考React井字棋游戏完整功能示例
官方实现方法比我的就要简单得多了，能从简就从简吧

点击事件
页面渲染

效果如下：

2.在棋步记录列表里加粗显示当前选中的项目。

这一步用vue的思想，我觉得应该是这样，在列表记录的li标签上写一个可以加粗的类，选中列表的记录用一个状态保存当前选中的列表的index，然后再列表上判断，如果列表的index等于当前选中列表的index，这个类就激活

官方上的功能代码如下，几步就搞定了

效果如下：

3.在 Board 组件中用两个循环渲染出 9 个 Square 格子组件

<div>
    <div className="board-row">
      {this.renderSquare(0)}
      {this.renderSquare(1)}
      {this.renderSquare(2)}
    </div>
    <div className="board-row">
      {this.renderSquare(3)}
      {this.renderSquare(4)}
      {this.renderSquare(5)}
    </div>
    <div className="board-row">
      {this.renderSquare(6)}
      {this.renderSquare(7)}
      {this.renderSquare(8)}
    </div>
</div>