Why Use React for Game Development?

React.js is a “library” for making UIs. It’s primarly used in Front-end Web Development but its application is not limited to this domain.

In fact, the React we know in webdev can be viewed as two components. React and React-DOM, the latter taking care of rendering the UI in your browser.

Because of this split, it’s very possible to use React without React-DOM. A prime example of this is React Native, which enables the usage of React for making mobile apps. It’s important to realize that apps made with React Native are not webviews that are then packaged as mobile apps.

(As a side note, if you simply want to package a web app as a mobile app you can use Capacitor.js or make a Progressive Web App. Note that PWAs have failed to take off.)

With React Native, instead of using the usual <div>, <h1> and other HTML elements, you use <View>, <Text>, <ScrollView>, etc… that are then rendered as native UI elements on iOS and Android.

It’s good to know the above, but this post is not about React Native so why did I bring it up?

When investigating if I should use React for game development and how, I came across two options : The first, consisted of using React to render your game graphics while the second, consisted of using React as a UI layer on top of an existing HTML canvas game.

Using React to Render Your Game Graphics

Similar to React Native, instead of using HTML elements to build your game with React, you would use elements that would render to graphics within an HTML canvas.

React Three Fiber is a library you can use for rendering 3D graphics on the web. It has elements like <mesh>, <boxGeometry>, etc… which are then rendered to your canvas.

For 2D, the only viable option I’ve found is Pixi-React which allows you to use elements like <Stage>, <Container>, <Sprite>, etc… and render them to your canvas. Note that, the documentation is pretty sparse for Pixi-React but development is active.

I would like to explore making games with these tools but for the time being, I don’t think they fit with my goals. I want to make 2D games relatively quickly.

If I went with the Pixi-React route, I would have to write my own collision logic, my own camera system, etc… I have already done it once as part of a YouTube tutorial on my channel about making a Pokemon game in p5.js, but it was a lot of work that can be avoided with the other options mentioned later.

Maybe in the future we could have a React Game Framework which provides a lot of Game making features out of the box and renders to a canvas. In that case, this first option would become immediately more attractive.

Using React to Render a UI on Top of Your Game

Currently for making 2D games on the web, we have game-engines/frameworks like Phaser and Excalibur.js and Libraries like Kaplay that offer a lot out of the box. For example, they have camera systems, collision systems, tilemapping systems, physics systems, etc… ready for you to use and make your games with. Phaser even offers an optional paid visual editor you can use to make your games.

Considering that these tools exist, it makes more sense to use React for what it’s really good at, making UIs. There is so much you get for free when using the DOM for your game UIs. For example : responsiveness, easy language support, accessibility, high quality font rendering, etc…

(Side note about font rendering: I can’t believe how almost all the web game frameworks/game libraries I tried using always struggle with rendering .ttf fonts without looking blurry or jagged while the DOM just renders them really well. They also struggle with rendering different languages like Arabic while the DOM gets it right.)

React is very good at managing your UI states and breaking down your UI into reusable components. There are also a plethora of libraries you can use with React to make your UIs look and feel good. For example, you can use Framer Motion to easily add animations.

In the end, that’s why you should use React.

Now, to be fair, using React this way for game development is not exclusive to React. You could very well use Svelte or Vue instead. However, I do think that React has an ecosystem advantage with all the libraries there are for it. (Framer Motion is really nice!)

How to Use React for Game Development

Now that I have presented my case for using React for Game Development, I can’t just leave you wondering how. You’re probably dying to know how it looks like in practice, right?

I recently posted a tutorial on my YouTube channel that goes over this. I explain how to overlay a React UI on top of an HTML canvas game in a way that scales regardless of the screen size. I also explain how to create a bridge between the React UI layer and the canvas based game to share data between the two.

While I use specific technologies in that tutorial, the principles still applies regardless of if you’re using Phaser instead of Kaplay or even the canvas API. Give it a watch, if you’re interested!

Hope you enjoyed this post! Consider subscribing for more written content like this.

In the meantime, here are other posts you can read :