一个人能否有成就，只看他是否具备自尊心与自信心两个条件。——苏格拉底
今天想简单玩玩React，我们打开React官方文档：
点击入门教程
通过简单的介绍后，我们开始代码编写
打开提供的在线初始代码(我们之后再搭建本地开发环境来完成这个游戏，今天暂时只做一个简单入门)：
https://codepen.io/gaearon/pen/oWWQNa?editors=0010
打开codepen提供的在线编辑器，看到初始代码后，我们可以开始尝试编写
注意看文档，这里三个React组件Square正方形、Board画板以及Game游戏
看到代码中的结构为主入口：
// ======================================== ReactDOM.render( <Game />, document.getElementById('root') );
其中通过root这个id绑定了一个节点，包含了一个Game组件
class Game extends React.Component { render() { return ( <div className="game"> <div className="game-board"> <Board /> </div> <div className="game-info"> <div>{/* status */}</div> <ol>{/* TODO */}</ol> </div> </div> ); } }
这个Game组件又包含了Board画板组件
class Board extends React.Component { renderSquare(i) { return <Square />; } render() { const status = 'Next player: X'; return ( <div> <div className="status">{status}</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> ); } }
画板Board组件中的外部div包含了四个div分别是显示井字棋玩家状态(下次落子为X还是O)，这里用{status}获取到了上面申明的变量status
然后是三个className为board-row的div，其中每一个div又包含了三个Square组件：
class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </button> ); } }
Square正方形组件包含了一个button标签，最后形成的效果就是一个状态，九个按钮：
然后我们可以开始修改代码了
首先是在Board中给Square组件传入一个value：
class Board extends React.Component { renderSquare(i) { return <Square value={i} />; } ... }
然后再到Square中渲染出来这个value
class Square extends React.Component { render() { return ( <button className="square"> {this.props.value} </button> ); } }
修改完我们的代码，很快就渲染生效了，可以看到数字渲染了出来
我们在给每个Square中的button添加一个点击事件：
class Square extends React.Component { render() { return ( <button className="square" onClick={function() { alert('click'); }}> {this.props.value} </button> ); } }
添加完成后我们再次点击，可以看到弹出了弹框
我们接下来给Square新增一个状态state，让它可以实现我们的点击前为空，点击后渲染
class Square extends React.Component { constructor(props) { super(props); this.state = { value: null, }; } render() { return ( <button className="square" onClick={() => this.setState({value: 'X'})} > {this.state.value} </button> ); } }
现在我们每点击一次，就可以留下一个X作为标记啦
之后我们在完成剩下的部分吧~
