安装react

直接通过命令安装：npm install -g create-react-app

创建本地服务器

直接通过命令安装：create-react-app first-demo(first-demo为app名称)

启动运行

直接通过命令安装：

cd first-demo

npm start

修改测试

按照提示修改程序app.js文件，修改后页面会自动刷新。

三子棋游戏

初始化

删除src目录下所有文件

复制https://github.com/zacSuo/react-demo/archive/1.0.zip中的index.css和index.js文件

启动查看npm start

增加交互

使用数组将历史数据存储在最上层的game中，可以访问历史步骤，代码如下：（由于格式原因 大家可以复制到自己的编辑器上 但是代码平时一定要自己多敲 尽可能少复制药）

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

function Square(props){

return (

<button className="square" onClick={props.onClick}>

{props.value}

</button>

);

}

function calculateWinner(squares){

const lines = [

[0, 1, 2],

[3, 4, 5],

[6, 7, 8],

[0, 3, 6],

[1, 4, 7],

[2, 5, 8],

[0, 4, 8],

[2, 4, 6],

];

for (let i=0;i<lines.length;i++){

const [a,b,c] = lines[i];

if(squares[a] && squares[a] == squares[b] && squares[a] == squares[c])

{

return squares[a];

}

}

return null;

}

function getStrByNext(flag){

return flag?'X':'O';

}

class Board extends React.Component {

renderSquare(i) {

return (

<Square

value={this.props.squares[i]}

onClick = {() => this.props.onClick(i)}

/>

);

}

render() {

return (

<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>

);

}

}

class Game extends React.Component {

constructor(){

super();

this.state = {

history:[{

squares:Array(9).fill(null),

}],

xIsNext:true,

currentIdx:0,

};

}

handleClick(i){

const history = this.state.history;

const squares = history[this.state.currentIdx].squares.slice();

const lastSquares = history[history.length - 1].squares;

if(calculateWinner(lastSquares) || lastSquares[i]){

return;

}

squares[i] = getStrByNext(this.state.xIsNext);

this.setState({

history:history.concat([{

squares:squares

}]),

xIsNext: !this.state.xIsNext,

currentIdx: this.state.currentIdx + 1,

});

}

jumpTo(step){

this.setState({

currentIdx:step,

xIsNext:(step % 2)?false:true,

})

}

render() {

const history = this.state.history

const squares = history[this.state.currentIdx].squares;

const winner = calculateWinner(squares);

const moves = history.map((step,move) =>{

const desc = move?'Move #'+move:'Game Start';

return(

<li key={move}>

<a href="#" onClick={() => this.jumpTo(move)} >{desc}</a>

</li>

)

})

let status;

if(winner){

status = 'Winner: ' + winner;

}else{

status = 'Next player: ' + getStrByNext(this.state.xIsNext);

}

return (

<div className="game">

<div className="game-board">

<Board

squares={squares}

onClick={(i) => this.handleClick(i)}

/>

</div>

<div className="game-info">

<div>{ status}</div>

<ol>{ moves}</ol>

</div>

</div>

);

}

}

// ========================================

ReactDOM.render(

<Game />,

document.getElementById('root')

);

最终效果

记得关注公众号呦！！！“诗壹锅儿”

原文链接：react 开发入门_真相很简单-CSDN博客_mobx+rn