Tutorialspoint

Grab New Skills at lowest price! Use: SKILL8

Create a chess game in react

person icon Amir Shahbabaie

4.2

Create a chess game in react

using react and redux we will build a game of chess.

updated on icon Updated on Feb, 2025

language icon Language - English

person icon Amir Shahbabaie

category icon Development ,Web Development,JavaScript

Lectures -18

Duration -4.5 hours

Lifetime Access

4.2

price-loader

Lifetime Access

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

Having already served as a starting point with HTML, CSS, JavaScript, and now, some basic knowledge of React, you want to take this further by going much deeper into much more advanced technologies. And that's why you're here: you're passionate about React and on a mission: learning React better by accomplishing what seems like a rather arduous exercise.

I will be there to help you fulfill your mission. This means more than 20 years of experience in developing software applications and extensive teaching expertise guarantee that you can rely on my approach. In my long career, I have developed experience in many technologies so that I know exactly what is needed to learn it and how to get you there.

There will be 18 in-depth lessons to this course. We will step by step go through each challenge, making a completely working chess game with all the rules and subtleties of the game. Throughout this course, we will use Redux as our state management system and pair it with React's Context API for a modern efficient approach.

Each lesson has been planned to work as building blocks from one lesson to the next so you can learn a concept in its entirety and completely. Each lesson's code will be available for you to scan, practice, and expand upon as you wish.

By the end of this course, you will build a stunning chess game, but beyond that, you will deep-dive into the implementation of advanced React concepts and state management techniques. You are good to go tackle tough projects and propel your career forward as a React developer.

Take it easy, relax, and let's move it up a notch.

Goals

Break down a complicated task to smaller pieces
Convert chess rules to coding logic
Connect different pieces of a game together
Setup a controller entity to govern the game movesBreak down a complicated task to smaller pieces
Convert chess rules to coding logic
Connect different pieces of a game together
Setup a controller entity to govern the game movesBreak down a complicated task to smaller pieces
Convert chess rules to coding logic
Connect different pieces of a game together
Setup a controller entity to govern the game moves

Prerequisites

basic knowledge of react, javascript and beginner level of css

Create a chess game in react

Curriculum

Check out the detailed breakdown of what’s inside the course

Chess game

18 Lectures
  • play icon 01 - Setup Board 21:46 21:46
  • play icon 02 - Add the pieces to their correct position 22:33 22:33
  • play icon 03 - Drag and drop pieces 24:31 24:31
  • play icon 04 - Add reducer function and contextAPI 18:27 18:27
  • play icon 05 - Setup arbiter controller and move rook logic 29:45 29:45
  • play icon 06 - Setup arbiter controller and move rook logic 08:28 08:28
  • play icon 07 - How to move the bishop 02:07 02:07
  • play icon 08 - Moving the queen 02:49 02:49
  • play icon 09 - How kings move in a chess game 04:00 04:00
  • play icon 10 - Pawns move and simple capture 11:10 11:10
  • play icon 11 - What is en-passant and how to include it in the game logic 12:57 12:57
  • play icon 12 - Promotion 31:19 31:19
  • play icon 13 - Castling rules and logic 18:00 18:00
  • play icon 14 - Checking the king 19:12 19:12
  • play icon 15 - Stalemate rule and how to write the code for it 20:19 20:19
  • play icon 16 - Insufficient material 09:35 09:35
  • play icon 17 - Checkmate 07:25 07:25
  • play icon 18 - Notation and Take back 23:03 23:03

Instructor Details

user profile image

Amir Shahbabaie

Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515