How to create chessboard using React js in 2023?

Post author:ajayverma128
Post published:July 11, 2023
Post category:Frontend / React.js

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: [
    "&#9820;",
    "&#9822;",
    "&#9821;",
    "&#9819;",
    "&#9818;",
    "&#9821;",
    "&#9822;",
    "&#9820;"
  ],
  1: Array(8).fill("&#9823;"),
  6: Array(8).fill("&#9817;"),
  7: [
    "&#9814;",
    "&#9816;",
    "&#9815;",
    "&#9813;",
    "&#9812;",
    "&#9815;",
    "&#9816;",
    "&#9814;"
  ]
};

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.