How to Build Tetris in React - GameDev Tutorial (with React Hooks!)

How to Build Tetris in React - GameDev Tutorial (with React Hooks!)

Learn to create a Tetris game with React Hooks in this tutorial course for beginners. You will learn how to build Tetris from scratch using hooks like useState, useEffect, useCallback and custom hooks. Styling is done with Styled Components.

💻 Starter files: https://github.com/weibenfalk/react-tetris-starter-files

❤ Course Contents ❤

⌨️ (00:00) Introduction

⌨️ (03:40) create-react-app and tooling

⌨️ (06:57) Scaffolding Components

⌨️ (15:49) Stage and Tetrominos

⌨️ (32:05) Styling with Styled Components

⌨️ (57:19) usePlayer and useStage

⌨️ (1:12:51) Stage update and player movement

⌨️ (1:37:02) Collision Detection

⌨️ (1:50:46) Player RotationG

⌨️ (2:04:12) Clear Rows

⌨️ (2:11:37) drop with useInterval

⌨️ (2:18:47) useGameStatus and React.memo

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about React Hooks

React - The Complete Guide (incl Hooks, React Router, Redux)

Modern React with Redux [2019 Update]

Best 50 React Interview Questions for Frontend Developers in 2019

JavaScript Basics Before You Learn React

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Reactjs vs. Angularjs — Which Is Best For Web Development

Overview of React Hooks

React Hooks Tutorial for Beginners: Getting Started With React Hooks

How to build a movie search app using React Hooks?

Top 10 Custom React Hooks you Should Have in Your Toolbox

State Management with React Hooks

Getting Closure on React Hooks

Using React Hooks to make API Calls

reactjs game-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Rummy Game Software Development

Rummy Game Software Development- Mobiweb Technologies is India's leading Rummy Game Software provider company having expertise in providing Rummy website and app development solutions.

Mobiweb- A Leading Ludo Game App Development Company

Mobiweb Technologies is a leading [ludo game app developmen](https://www.mobiwebtech.com/ludo-game-software-development/ "ludo game app developmen")t company that provides multiple types of ludo games in a single application. Ludo is one of the...

Card Game Development

Card Game Development Solutions-Mobiweb is an expert Card Game App and Software development company having expertise in design and development of all type of card games.

Rummy Game Development

Rummy Game Software Development- Mobiweb Technologies is India's leading Rummy Game Software provider company having expertise in providing Rummy website and app development solutions.

Card Game App Development

Card Game Development Solutions-Mobiweb is an expert Card Game App and Software development company having expertise in design and development of all type of card games.