react-官方井字游戏

1. 新建一个项目

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

2.删除掉生成项目中 src/ 文件夹下的所有文件
3.在 src/ 文件夹下新建一个名为 index.css 的文件并拷贝 这里的 CSS 代码 到文件中。

4. 在 src/ 文件夹下新建一个名为 index.js 的文件并拷贝 这里的 JS 代码 到文件中, 并在此文件的最开头加上下面几行代码：

   import React from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   
   

5.通过 Props 传递数据

我们先来试着从 Board 组件（九宫格）传递一些数据到 Square 组件。

在 Board 组件的 renderSquare 方法中，我们将代码改写成下面这样，传递一个名为 value 的 prop 到 Square 当中：

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

之后再修改 Square 组件的 render 方法，把其中的 {/* TODO */} 注释替换为 {this.props.value}:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

其余的参照官网一步步写吧，官网描述的很清楚【捂脸笑】

修改前：空的九宫格

修改后： 在每个格子当中你都能看到一个渲染出来的数字。

修改后.png