How to Use React.js for Game Development - Tutorial

Live demo : https://jslegenddev.github.io/react-k...
Live demo controls :
Arrow keys to move around.
Use the space key to close the text box once it appears.

Source code : https://github.com/JSLegendDev/react-...

Get the assets + fonts here : https://github.com/JSLegendDev/react-...

RESOURCES :
How to Display an HTML Based UI on Top of a JavaScript Game Made With Kaplay : https://jslegenddev.substack.com/p/ho...
Kaplay docs : https://kaplayjs.com
React docs : https://react.dev
Jotai docs : https://jotai.org/
Framer Motion docs : https://www.framer.com/motion/

CREDITS :
Peter's X : https://x.com/petergencur
Peter's GitHub : https://github.com/imaginarny
Tileset based of : https://the-pixel-nook.itch.io/gb-stu... and https://the-pixel-nook.itch.io/gb-stu...
Gameboy font used is from : https://www.dafont.com/early-gameboy....

💼 Business Inquiries: [email protected]

CHAPTERS :

0:00 Intro
4:14 Project Setup
17:05 Implementing The Game Example
48:38 Using Jotai to Pass Data Between React and The Game
54:36 Writing CSS to Make UI Scale with Canvas
1:02:59 Building our React UI + Connecting it with Jotai