Creating the React Dapp

We'll create a basic React Dapp and build on it to integrate NFTs and have them playable in the game. Let's start by selecting the needed options from the stacks-starters and create the project in the root folder of the repository.

Stacks Starters Website

1. 1.Go to https://docs.hiro.so/stacksjs-starters​

2. 2.On the left side select React (create-react-app)

3. 3.On the right side select

   1. 1.Connect with Wallet
   2. 2.Interact with NFTs (Non-Fungible-Tokens)
   3. 3.Call and Read from Clarity Smart-Contracts

   ​

Console Local Project

1. Open a console in the root folder of the repository

   • windows - use cmd
   • mac os - use terminal
   • linux - use terminal

2. Type npm create stacks --template react-cra

3. Select React and press Enter

   

4. Select CRA ( create-react-app )

   

5. Type in cmd/terminal the following:

   1. 1.cd react-cra
   2. 2.npm install
   3. 3.npm start

Expected Dapp View

After npm start a browser instance should start on localhost:3000 where you can log in with the Stacks wallet.

Screenshots from the Dapp

Log-In View

Logged In View​​