React Jam and Why React Is Awesome for Making Games

Hey, everyone. I'm Bjarke Felbo, co-founder and CTO of Dusk. Most importantly in this context, I'm co-organizer of React Jam. I'm super excited to talk to you all about React Jam. Why React is awesome for making games. I'll talk about a few different things in this lightning talk. Start off with a high-level intro to React Jam, how it's possible to make games using not only DOM, but also WebGL and WebView, all within the context of using React.

Then I'll talk about how easy it is to get into making games with React and the awesome libraries that you can build upon. I'll talk a bit about some of the things to be aware of, and then I'll finally talk about how you can get started by remixing open-source games. Let's get into it. First off, what is React Jam? React Jam is an online event for React devs where you make games in 12 days. You can win cash prizes and it's also just loads of fun. Lots of devs cheering each other on and making incredible games using React. Just collaborating, helping each other out. It's awesome.

The last React Jam just ended, so definitely go check out the winners. They're crazy impressive. I wanted to highlight that there's many different ways of making games with React. You can do DOM-based games, plain React, but you can also use ReactPixie to make 2D games or React FreeFiber to make 3D games. Both of these libraries are using WebGL and WebGPU under the hood, but you have it easy as you can just use the high-level abstraction. And the beauty of all this is that you just share a link to your game with anyone and it just runs. It's much, much faster for the player to get right into the action compared to, for instance, making a game with Unity on Unreal. You can make really beautiful games.

Here's the Dusk multiplayer challenge winner of the Winter React Jam. It's running inside a Dusk app, which helps make the game multiplayer. The game is called Cooking Frenzy and it's made by MotherPix. It's a beautiful multiplayer 3D game where you're playing together, trying to cook recipes that this hungry panda wants to eat. And the crazy thing is, this game was made using React FreeFiber in just 10 days. Here's another great game, Pipeline Panic, made using plain React by Jason and Gustavo. It's a multiplayer game where you're together building a pipeline to the React water.

This game won the Dusk multiplayer challenge in the Fall edition of React Jam. And this retro-style game was made using good old React that you all know about. It's very easy to get into making a plain React game because you don't even have to learn the framework or anything. And as you can see, they can look beautiful.

Building games in React is a really easy way to try out game devs. You don't need to learn Unity, Unreal, don't need to learn a new language, don't even need to learn a new JS framework. You literally just use the components like you're used to. It's important to highlight that we take all these DX things for granted, hot reloading, unit tests, all the power of React dev tools. But that's actually not a common thing in the game dev world. If you want to make a game using Unity, it's actually really painful to, for instance, get hot reloading and fast builds working nicely. And it just comes for free in this web dev context.

There's lots of great libraries for all sorts of things for React, and you can use all of them for a game dev. Rerendering is always important, as you know, for any app, but it's particularly important to avoid in games, as the game state may change frequently, up to 60 times per second for fast-paced games. So you've got to be super careful that you're only rerendering the exact components that you need using some of the React optimizations like memorization, if you're building a fast-paced game. If you're building a slower-paced game, you can be more chill.

Another tricky thing that can be a little hard to do in games made using React is imperative changes. Doing a sequence of changes like this can be a little tricky in React. But actually, one of the React Gem winners shared this nice library called Timeline Composer to do sequences of imperative changes like that in React-based games. So it's really cool to see the ecosystem help out, alleviate any pain points around games with React by building all these different libraries. The best way to get started is by messing with other people's code. There's lots of great open-source games already out there made using React. In fact, I helped start this initiative to set aside $100,000 in grants to make more open-sourced web games. And if you search for Dusk open-source grants, you'll find a long list of open-source games that you can be inspired from. And many of these games are made using React. You can even apply to get a grant yourself to make an open-source game. Finally, I just want to call out the obvious.

You can even apply to get a grant yourself to make an open-source game. So it's really cool. Definitely check it out.

Finally, I just want to call out the obvious. Games are a really fun way to improve your React skills and show off your programming chops, both to any future employers, but also to the community. So instead of making another blog or making a new website, I highly recommend trying out making a game with React.

So yeah, it was great telling you a little bit about making games using React. We have a super warm community of devs just having fun, messing around with React, making games together. So I definitely hope that you'll join in for the fun. If not by making games, then just join the community to check out all the awesome games that people are making. You can sign up for the email list on reactjam.com. You can see the winners for all the previous Jams and also get advice on making games with React. So definitely check out the website. I'll be around in the React Summit Discord if you have any questions. You can also always find me on Twitter or on the Dusk Discord. Thank you.