Set Up a React dApp From a Starter

Ryan Harris
InstructorRyan Harris
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

Let’s create a dApp that connect to a smart contract on the Rinkeby test network!

I’ve created a starter repo ****for you. Just run git clone git@github.com:ryancharris/nftix-demo-ui.git. Then just run yarn and add the smart contract’s address to an ENV file.

Ryan C. Harris: [0:00] Now, we're going to build a dapp with React that connects to our smart contract on the Rinkeby test network. I've built out a starter repo here on the right.

[0:07] We're going to clone that to our local machine by typing git clone and pasting the address, git@github.com:ryancharris/nftix-demo-ui.git. Now, we'll navigate to that directory, cd nftix-demo-ui. We will install our Node modules by running yarn install.

[0:32] Let's open the repository in VS Code by typing code. At the root of the project, let's add a file for our environment variables, .env.development.local. We only need to add one environment variable for now, and that's REACT_APP_CONTRACT_ID. We'll set it to the address of our smart contract on the Rinkeby network.

[0:58] Now, we can go back to our terminal and run yarn start to spin up the development server. Then, if we open the browser, you can see our pre-built UI.

[1:07] In review, we've cloned this repository from GitHub, installed its Node modules, added an environment variable, and spun up a local development server.

~ 2 years ago

What changes do I need to make to allow the React dApp to work with the smart contract deployed on a different chain (e.g. polygon mumbai)?

Markdown supported.
Become a member to join the discussionEnroll Today