Integrate React with Dojo: A Quick Start Guide

Dive into this straightforward example to understand how to meld React with Dojo.

This integration taps into the powerful libraries designed by Lattice:

• recs

Initial Setup

The repository already contains the dojo-starter as a submodule. Feel free to remove it if you prefer.

Prerequisites: First and foremost, ensure that Dojo is installed on your system. If it isn't, you can easily get it set up with:

curl -L https://install.dojoengine.org | bash

Followed by:

dojoup

For an in-depth setup guide, consult the Dojo book.

Launch the Example in Under 30 Seconds

After cloning the project, execute the following:

1. Terminal 1 - Katana:

cd dojo-starter && katana --disable-fee

2. Terminal 2 - Contracts:

cd dojo-starter && sozo build && sozo migrate

// Basic Auth - This will allow burner Accounts to interact with the contracts
sozo auth writer Position move
sozo auth writer Position spawn
sozo auth writer Moves move
sozo auth writer Moves spawn

3. Terminal 3 - Client:

cd client && yarn && yarn dev

4. Terminal 4 - Torii:

Uncomment the 'world_address' parameter in dojo-starter/Scarb.toml then:

cd dojo-starter && torii

Upon completion, launch your browser and navigate to http://localhost:5173/. You'll be greeted by the running example!

🛠 Tech Stack

This project utilizes a range of modern technologies to deliver optimal performance and user experience:

• Framework:
  • React
• Language:
  • TypeScript
• Package Manager:
  • bun
• Build Tool:
  • Vite
• UI:
  • Shadcn
  • TailwindCSS

Shadcn

Use the add command to add components and dependencies to your project.

bunx shadcn-ui@latest add [component]```