In this tutorial, we will create a simple chessboard pattern in react.js. This can be extended later in full-fledged chess application.
Lets begin by creating the react app.
Implementation of chessboard in react.js
Step 1. Create folder and init react repo
mkdir chessboard
npx create-reate-app .
// or
npx create-reate-app chessboard
Both approaches are acceptable. Sometimes I forget to create the repo directly from react in that case I use the 2nd line npx create-react-app .
Step 2. Add logic in app.js file
import Board from "./Board";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Chess board in React</h1>
<div className="chessboard">
<Board rows={8} cols={8} />
</div>
</div>
);
}
Let me explain it a bit. In the above code, we are using a custom Board component which takes rows and cols as props and create a board of that size.
e.g in chess board, there are 64 squares i.e its a 8 x 8 board thats why we have passed rows and cols as 8 to Board component.
Step 3. Add chess pieces html entities in data.js
export const chessData = {
0: [
"♜",
"♞",
"♝",
"♛",
"♚",
"♝",
"♞",
"♜"
],
1: Array(8).fill("♟"),
6: Array(8).fill("♙"),
7: [
"♖",
"♘",
"♗",
"♕",
"♔",
"♗",
"♘",
"♖"
]
};
In chess there are total 8 rows, in which at the start, first row (i.e row 0) and last row (i.e row 7) contains all major pieces e.g rook, knight, bishop, queen, king etc.
And row 1 and row 6 contains all pawns.
Note:- Since all entries for row 1 is same so created an array of size 8 filled with same entry.
e.g Array(3).fill(“xyz”) will result [“xyz”, “xyz”, “xyz”]
Step 4. Add logic in Board.js file
import { chessData } from "./data";
const Board = ({ rows, cols }) => {
return (
<>
{[...Array(rows)].map((_, rowIdx) => {
return (
<div key={rowIdx} className="grid">
{[...Array(cols)].map((_, colIdx) => {
return (
<div
key={colIdx}
className={`sub-grid ${
(rowIdx + colIdx) % 2 === 0 ? "even" : "odd"
}`}
dangerouslySetInnerHTML={{
__html: chessData[rowIdx] && chessData[rowIdx][colIdx]
}}
/>
);
})}
</div>
);
})}
</>
);
};
export default Board;
This component takes rows and cols as props.
It creates 8 rows and for each rows 8 cols. It assigned a class “even” or “odd” so that the squared boxes would be coloured differently. And also set the chess pieces for corresponding rows.
Step 5. Add styling in styles.css file
Complete logic and jsx are written within the App.js file which included styles.css file containing all board styling.
/* styles.css */
.App {
font-family: sans-serif;
text-align: center;
}
.chessboard {
width: 640px;
height: 640px;
margin: auto;
border: 25px solid #444;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid {
background-color: white;
display: flex;
justify-content: center;
font-size: 50px;
}
.sub-grid {
width: 80px;
height: 80px;
}
.even {
background: white;
}
.odd {
background: rgb(145, 141, 141);
}
chess board size is kept as 640 px width and height and each square is of size 80px width and height.
Conclusion
This app consists only the chessboard design but we can add logic to make it basic version of chess application. It can also be developed using the vanilla js and optimised css but I wanted to try out in react and written in my own way.
I hope you would have learned something new, please share the articles among your friends.
Stay tuned for more such articles on weekendtutorial.com
You can also access the source code at – https://codesandbox.io/s/chessboard-app-nc2zpn
And preview the UI at – https://nc2zpn.csb.app/
Here is the final version of chessboard app.
Please share the articles on –
