Learning React? Make a game!

Are you currently using React in your projects? If not, stop here and go check it out. It’s an awesome Javascript library that is lightweight and allows for building up a component-based UI.

I have been poking around React documentation over the past few months and ,at first, I didn’t enjoy it. My initial motivation for picking it up was a a work requirement. You can imagine that the initial tutorials I went through was a slog through new information and new ways to write old Javascript. Once I decided to ditch the “todo” tutorials and make a small game, the library’s usefulness and versatility began to woo me.

After putting in some weekends developing a small roguelike dungeon crawler, I came to this conclusion: If you are working through the learning slog that comes with every new JS framework, making a game will help you through the most difficult parts and keep you engaged.

The game logic required for even the simplest arcade entertainment will force you to dive deep into React’s anatomy; leaving you a foundational knowledge from which you can build larger web apps.

The Challenge of Game Logic

Let’s quickly discuss game logic in order to better appreciate how it will influence our internalization of React later on. The most fundamental aspect of game architecture is the game loop.

“The game loop is an important concept in any game, from the most low tech pong clong to a triple A graphics card melting FPS. An oversimplified version has three stages:

1. Take input from the player.
2. Change game state accordingly.
3. Display something to the player.”

– James Nutt

If you were to make a simple game right now, you would certainly build it in terms of these three steps. Let’s examine the classic arcade game Galaga in these terms. In this game the player has three inputs, ‘left’, ‘right’, and ‘shoot’. Step one of our game loop would listen for these inputs; say the player inputs ‘left’. Step two of our game loop would change the space ship position variable accordingly. Step three of our game loop would actually draw the space ship to the screen in its new position. Games loops generally run at a rate of 60 frames per second, so the net visual effect to the screen would be a space ship quickly gliding to the left.

Now let’s compare these steps of the generic game loop to the steps of a generic React component. The most common components will consist of three things: incoming data referred to as ‘props’ (or properties); a state which holds the current state of data passed in; and a render function that is responsible for using the data from state to display in terms of HTML.

Folks, that is a proper game loop! After I realized how similar the component structure is to the game loop, learning React has been a blast because it allows me to practice new concepts in React expressed via simple web games.

Forcing Your Focus

When making games with JS, many people to choose HTML5’s canvas element, as it can aptly handle data updates; but force yourself to stick with simpler tags like divs and spans. This will keep your learning focused on what React has to offer.

This will force you to:

• rely more on className and CSS skills, which is invaluable to coders like me who lean on JS for style manipulation..
• pass around props, maintain component states, and teach you how to lift state from child to parent

In short, limiting yourself to developing a game with only React will force you to dig deep and use React for all it’s worth.

Fundamentals as a Foundation

Your foundational knowledge will come from the Docs. If you decide to force your focus on what React is providing, the challenge of building a game with it will lead, you time and again, to their awesome documentation. By going through this process you will certainly catch tidbits of React knowledge you missed while going through the Tic Tac Toe Tutorial.

One of the tidbits I missed when going through the basics was React’s ‘shouldComponentUpdate’. My first React-based game was a simple, tile-based RPG where each game tile was it’s own component. Each level contained around 1200 of these tiny components, and with every action the player takes, all 1200 tiles would update. This resulted in a poorly optimaized game loop that took near 1000ms to render. That’s when I went into the docs, on the search for something more practical.

Making this game and keeping it optimized allowed me to internalize the ‘shouldComponentUpdate’ function and use it in more projects down the road.

So, take a chance, learn React, and make a fun game!

Until Next Time

Take it Easy