carmen #4
carmen #4
Conversation
| @@ -0,0 +1,26 @@ | |||
| .container{ | |||
There was a problem hiding this comment.
The styles all reference the classnames you've assigned to elements. 💯
| return <div>A tic-tac-toe game</div>; | ||
| return ( | ||
| <div> | ||
| <h1>A tic-tac-toe game</h1> |
There was a problem hiding this comment.
The components in this code base are set up in a modular way. This separation of concerns keeps the code maintainable and accessible for other developers. 👍
| <div className="boardRow"> | ||
| {renderSquare(0)} | ||
| {renderSquare(1)} | ||
| {renderSquare(2)} | ||
| </div> | ||
| <div className="boardRow"> | ||
| {renderSquare(3)} | ||
| {renderSquare(4)} | ||
| {renderSquare(5)} | ||
| </div> | ||
| <div className="boardRow"> | ||
| {renderSquare(6)} | ||
| {renderSquare(7)} | ||
| {renderSquare(8)} |
There was a problem hiding this comment.
Creating a renderSquare() helper function is a helpful way of reducing duplicate code. 👍 . To kick this reduction of code up a notch, consider refactoring by doing something such as mapping through the boardSquares in order to render the instances of <Square/>. This would remove the need to render each square separately.
| const winningCombos = [ | ||
| [0, 1, 2], | ||
| [3, 4, 5], | ||
| [6, 7, 8], | ||
| [0, 3, 6], | ||
| [1, 4, 7], | ||
| [2, 5, 8], | ||
| [0, 4, 8], | ||
| [2, 4, 6], | ||
| ]; |
There was a problem hiding this comment.
Setting up the winning combinations makes the remainder of your code clearer. 💯
| <div className="boardSquare" onClick={props.onClick}> | ||
| {props.value} |
There was a problem hiding this comment.
This is just a matter of preference: when using multiple props, the destructuring assignment can be used to help reduce code repetition. This is especially helpful in components with an increased number of props.
| // add next turn | ||
| squares[index] = isXPlayer ? 'X' : 'O'; | ||
|
|
||
| // set the new state of the board squares |
There was a problem hiding this comment.
The inline comments can help other developer better understand the intention of this code base. Groovy. 👍
No description provided.