Create a Chess Game with ReactJS - Part 1: The board!

Hello and welcome to the series on creating a chess game with ReactJS using TypeScript! In this series we create a chess game from scratch using only ReactJS with TypeScript. Together we walk through the challenges that come with this and we come up with solutions that improve our game. The programs used in this tutorial: - NodeJS () - Visual Studio Code () The chess pieces used in this tutorial can be found on the Frontend Coding GitHub repository: You can set up the project using the following command: npx create-react-app chess-app --template typescript In this first part of the series we start by setting up the project using the command which you can see above here. Then we analyze the chess board and figure out how we are going to implement this. Then we start coding the component for the chess board. After the chess board we create a tile component which we use inside of the chess board component. To finish if off we implement a CSS grid for the chess board. We determine the number of columns and rows and which tiles are going to be black and white. The code in this video can be found on the Frontend Coding GitHub repository: Timestamps: 0:00 Introduction 0:20 Setting up the project 2:24 Analyzing the board 3:30 Creating the chess board component 8:54 Creating the tiles 16:27 Implementing the grid