# 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`

   ​

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80OG0wKOPO2edA9QxQty%2Fuploads%2F2dxfDAHhbkoKURUxRQBE%2Fimage.png?alt=media&#x26;token=70369d2b-b363-4d0f-b547-85205cd5d101" alt=""><figcaption></figcaption></figure>

### Console Local Project <a href="#console-local-project" id="console-local-project"></a>

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`

   <figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80OG0wKOPO2edA9QxQty%2Fuploads%2Fk6mnHyjxFJ8dqSNs0ReP%2Fimage.png?alt=media&#x26;token=3ad9a17b-be3e-4ab7-ae9c-24a8f25bcd4f" alt=""><figcaption></figcaption></figure>
4. Select CRA ( create-react-app )

   <figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80OG0wKOPO2edA9QxQty%2Fuploads%2F6AUIzMYfIhjkLqASqrm5%2Fimage.png?alt=media&#x26;token=4844813a-c53c-40ca-917e-a5d7b06c16a4" alt=""><figcaption></figcaption></figure>
5. Type in cmd/terminal the following:
   1. 1.cd react-cra
   2. 2.npm install
   3. 3.npm start

### Expected Dapp View <a href="#expected-dapp-view" id="expected-dapp-view"></a>

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

**Screenshots from the Dapp**

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80OG0wKOPO2edA9QxQty%2Fuploads%2Ff3FrYfEbz4uIAUQLxw8i%2Fimage.png?alt=media&#x26;token=7beedd5e-3b7a-49b1-9009-bbef5fdc7011" alt=""><figcaption><p>Log-In View</p></figcaption></figure>

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80OG0wKOPO2edA9QxQty%2Fuploads%2FbBY1GdFT8jGW4BF2AbBI%2Fimage.png?alt=media&#x26;token=1ad14478-5578-4604-886f-14b380304f2a" alt=""><figcaption><p>Logged In View​​</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.degenlab.io/gamefistacks/workshop/nft-web-app-integration/creating-the-react-dapp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.