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