React Redux Tetris Tutorial

This tutorial recreates the classic arcade game Tetris with React and Redux.

Tutorial Pages

• Introduction
• Grid Square
• Grid Board
• Next Block
• Score Board
• Arranging the Page
• Controls
• Message Popup
• Actions and Reducers
• Organizing Code
• Default State and Block Shapes
• Connect Next Block
• Connect Grid Board
• Connect Controls
• Connect Message Popup
• Connect Score Board
• Rotating Blocks
• Moving Blocks
• Creating a Timer
• Game Over and Restart

Version

Vesion: 2.0.0

This tutorial was built and tested with:

• React 18.2.0
• Redux Toolki 1.9.1

Prerequisites

To create this project you will need an understanding of

• JavaScript: ES6
• React
  • Creating components
  • JSX
• HTML/CSS

Objectives

• Define Application state using Redux Toolkit and the flux pattern
• Implement React-Redux

Instructor FAQ