React - Learn React with Hooks by creating a Roguelike game

Open your terminal, scaffold a new React app named react rogue with create react app, then tidy the project by deleting unnecessary files and verify it runs with npm start.

Learn modern React by building a roguelike canvas component with arrow function syntax and JSX. Create a 256 by 256 canvas with a border and wire it into index.js.

Pass width, height, and tile size as props to a React roguelike component, destructure them, and use useRef and useEffect to render on a canvas.

Move a black square by handling keyboard input with an input manager and the observer pattern in a React roguelike. Subscribe to input, update state, and render on a canvas.

In this React rogue-like lesson, build a player class that draws itself, tracks health, uses tile coordinates for movement, and renders a red at symbol.

Build a 2d world with width, height and tile size using a 2d array of 0s and 1s; render walls as tiles and generate dungeon with a cellular map generator.

Integrate the player into the world object and manage walls, monsters, and items as entities while preventing wall collisions with a copy move and ensuring the player starts in space.

Learn how to build an entity base class that the player, monsters, and loot inherit from, with attributes, drawing logic, and ascii symbols, plus a spawner to populate loot.

Implement an inventory system in a React roguelike by adding an inventory array, supporting add and remove, and rendering loot items on screen as a list.

Create a monster class and a basic roguelike combat loop with health and attack. Remove defeated monsters and log combat events, while spawning new foes from a table.

Fix a zero-based placement bug that lets a dragon appear in walls while constraining loot to 0..weight-1, and prevent overlaps by checking occupancy with GetEntityAllocation.