Two-player Tic-tac-toe game in React.js

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;







up vote
2
down vote

favorite












I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.

Since I'm new to React, could anybody give me feedback on how I implemented these features?



https://codepen.io/anon/pen/bjVeJG?editors=0110



function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);

function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);

class Board extends React.Component

constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;


handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)

renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);


handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);

lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);

render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');


return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);



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

ReactDOM.render(
<Game />,
document.getElementById('root')
);


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;







share|improve this question

















  • 4




    The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
    – Mast
    Jul 13 at 10:45
















up vote
2
down vote

favorite












I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.

Since I'm new to React, could anybody give me feedback on how I implemented these features?



https://codepen.io/anon/pen/bjVeJG?editors=0110



function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);

function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);

class Board extends React.Component

constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;


handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)

renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);


handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);

lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);

render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');


return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);



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

ReactDOM.render(
<Game />,
document.getElementById('root')
);


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;







share|improve this question

















  • 4




    The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
    – Mast
    Jul 13 at 10:45












up vote
2
down vote

favorite









up vote
2
down vote

favorite











I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.

Since I'm new to React, could anybody give me feedback on how I implemented these features?



https://codepen.io/anon/pen/bjVeJG?editors=0110



function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);

function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);

class Board extends React.Component

constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;


handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)

renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);


handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);

lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);

render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');


return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);



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

ReactDOM.render(
<Game />,
document.getElementById('root')
);


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;







share|improve this question













I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.

Since I'm new to React, could anybody give me feedback on how I implemented these features?



https://codepen.io/anon/pen/bjVeJG?editors=0110



function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);

function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);

class Board extends React.Component

constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;


handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)

renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);


handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);

lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);

render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');


return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);



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

ReactDOM.render(
<Game />,
document.getElementById('root')
);


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;









share|improve this question












share|improve this question




share|improve this question








edited Jul 13 at 13:28









200_success

123k14143399




123k14143399









asked Jul 13 at 10:21









Luca

111




111







  • 4




    The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
    – Mast
    Jul 13 at 10:45












  • 4




    The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
    – Mast
    Jul 13 at 10:45







4




4




The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
– Mast
Jul 13 at 10:45




The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
– Mast
Jul 13 at 10:45















active

oldest

votes











Your Answer




StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);








 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f198415%2ftwo-player-tic-tac-toe-game-in-react-js%23new-answer', 'question_page');

);

Post as a guest



































active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes










 

draft saved


draft discarded


























 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f198415%2ftwo-player-tic-tac-toe-game-in-react-js%23new-answer', 'question_page');

);

Post as a guest













































































Popular posts from this blog

Chat program with C++ and SFML

Function to Return a JSON Like Objects Using VBA Collections and Arrays

Will my employers contract hold up in court?