Skills Expanded

React State: Creating a Matching Game

What you'll learn

In this project we will use several different methods of managing the state within a mostly built application. We will cover state management within class-based components as well as functional components. We will also cover the context API, as well as hooks

Table of contents

  • Set up your local environment for this project. We'll walk you through everything you need to know to set up your local instance, and to access the code you'll be using for this project.
Hydrate the state
  • In this module we will hydrate the state of the game.
Handling click events
  • In this module we will create the handleTileClicked event handler, as well as finish wiring up the basics of the game.
Creating a custom Hook
  • In this module we will build a custom hook that uses the useRef, useState, and useHover hooks.
Refactor the App to use the Context API
  • In this module we will refactor part of the app to use the Context API. Do note that the size of this app doesn't necessarily lend itself well to using Context. We could more easily fix the issue of passing props through too many components by fixing the Apps composition. For more on this subject see the react docs:

About the author

Auggie is a Full Stack Software Engineer at Pluralsight. He was lucky enough to be gifted a Compaq Portable III when he was 10 years old, and immediately started learning how to program games in Q-Basic. Throughout his teenage years he picked up HTML, CSS, and a bit of Javascript. Developing websites for the bands he played guitar in and friends bands into his twenties, led him to his passion and ultimately seeking a career in web development.

Ready to upskill? Get started