In this video I show how to build a minecraft clone in Javascript using React.js, Three.js and React Three Fiber.

Play: https://minecraft-js.vercel.app

Finished Code: https://github.com/danba340/minecraft-react
Starting point for video: https://github.com/danba340/minecraft-react/tree/dev

The game supports five Minecraft block types: Dirt, Grass, Wood, Log and Glass.
You can move around using the mouse and WASD, You can click and Alt+click to add and remove blocks. The tutorial includes many React concepts such as useState, useEffect, useRef and custom Hooks for State management and Keyboard input. Zustand is used for the state management.

Timestamps:

• 0:00 Intro
• 0:45 Starting point
• 3:05 State setup
• 9:45 Cube component
• 12:50 Texturising the Cube
• 15:37 Keyboard input Hook
• 25:18 Moving the player
• 34:10 Looking around
• 38:26 Cube hover state
• 42:10 Rendering Cubes from State
• 46:23 Making glass transparent
• 47:18 Adding/Removing Cubes
• 54:33 Saving the World
• 56:00 Jumping
• 58:23 Adding IDs to Cubes
• 58:52 Lets Minecraft
• 59:28 Outro

#javascript #react #game-development #programming #developer