Create a Hello World Dapp on the Ethereum Blockchain with Rivet and React

Introduction

By the time you finish this tutorial, you’ll have a working Hello World Ethereum dapp that you can use as a starter to create front-end web3 interfaces in React.

(If you just need a vanilla starter and want to use ours, you can find and fork our completed example project on Github.

The Big Picture

You’ll start by setting up a Rivet account if you haven’t already done so.
Next, you’ll set up all the necessary dependencies, create a React application capable of connecting to the Ethereum blockchain, and configure it to do so using your Rivet endpoint.
Finally, you’ll create a plain-vanilla view that—along with a Rivet-y variant of the traditional “Hello World!” string—will display the Ethereum address of the web3 browser extension used to access it (for this tutorial, you’ll be using Metamask for Google Chrome).

1. Setting up Rivet

My Rivet endpoint: https://YourApiKey.eth.rpc.rivet.cloud/

If you see a URL above that does not contain “YourApiKey”, then you already have a Rivet account set up and you’re logged in. Nice work! Go ahead and skip to step 2.

If you don’t see a URL with your unique key in it, no worries! This will just take a moment:

First, navigate to the Rivet signup page.

When you get there, enter a nickname for your account and a valid email address to which you have access. Select submit.

Web3-savvy?

You can also create an account and top it up with credits via Web3 using the Login with Web3 button on the signup page.

Not sure what this is? Not to worry, just disregard this box for now. Pretty soon, this will make perfect sense.

On the next view, you’ll verify your email address using a code we sent to it when you selected submit. Check your email for a message from Rivet, copy the code, and paste it in.

Got it? Good.

Finally, acknowledge our terms of use—and if you have a promo code, don’t forget to add that too. (If you do forget, contact us at support@rivet.cloud and we’ll hook you up retroactively if you can tell us what the code was supposed to be.

Good to go? Great! Go ahead and hit submit, and voila! Your endpoint URL is:

https://YourApiKey.eth.rpc.rivet.cloud/

Still need help?

If you don’t see it, make sure you’re signed in. If you still don’t see it, please contact us at support@rivet.cloud and we’ll get to the bottom of it. If you recall it, please include the nickname you gave us when you signed up in your message.

Congratulations, you’re 1/3 of the way through this tutorial!

2. The Setup

First, you will need to install all of the tools and dependencies you’ll need for this project:

A. Metamask Ethereum Wallet

Most major web browsers do not currently connect to blockchain networks natively, so you’ll need to install a browser extension. Click here to install it, and click here to make sure it is enabled in your list of extensions.

If you did it correctly, you’ll see a low-res-looking fox head on an icon to the right of Chrome’s omnibox.

Still stuck?

You can connect directly with Metamask support on Twitter. (We recommend sliding into their DMs.)

Ok, on to the project dependencies.

B. Dependency Setup

i. Create a Project Directory

Go to your home directory:

$ cd

Then create a project directory—let’s call it “hello-rivet”:

$ mkdir hello-rivet

ii. Node.JS and Yarn

First thing’s first, you’ll be needing Node.js. You can check to see if you’ve already got it installed like so:

$ node -v

If you get an error, you’ll need to download and install it from the Node.js project homepage.

Next, we’re going to install Yarn, the Node.js package manager we’ll be using.

Why use Yarn?

You may be wondering why we’re asking you to go to the trouble of installing yarn—a node package manager—with npm (the default package manager).

So, here’s the thing.

There are a lot of good reasons to use yarn over npm that you can research for yourself if you’re interested. For this tutorial though, just trust us, it’s totally worth it. :)

After you complete the installation, install yarn globally using node package manager in your terminal:

$ npm install -g yarn

Easy, right? :)

iii. Create React App

After all of that setup, this one is now super-easy:

$ yarn create react-app hello-rivet

Then, set the version of Yarn for this project with the command:

$ yarn config set version berry

Is this really necessary?

yarn config set version berry will consecrate your current version of yarn as the canonical version for this specific project. You don’t really need to do it for this tutorial, but you’ll save yourself a lot of trouble later if you build good habits from the outset. Why not start now?

Next, run the create-react-app’s built-in web server to make sure that everything worked properly:

$ yarn start

It’s ALIVE! Excellent.

Next, you’ll need to update the package.json file to include all of the dependencies you need to complete this tutorial.

"name": "hello-rivet",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.3.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "web3": "^1.0.0-beta.46"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Save your changes, press CTRL-C and run:

$ yarn install

Finally, start yarn again to run the app with your dependencies installed:

$ yarn start

And that’s that! But what ARE these things we now depend on?

Web3.js - If your Ethereum dapp is a time-traveling DeLorean, this is the Flux capacitor. It makes interacting with the blockchain possible.
React Bootstrap - Bootstrap for React. Miles of style.

iv. Just a few more tweaks…

You do need to further configure your dapp to import the bootstrap styles, but no worries—it’s easy.

Hit CTRL-C to stop your server.

Then just relplace this line in your index.js file:

import './index.css';

with:

import 'bootstrap/dist/css/bootstrap.css';

Save it. Then run:

$ rm src/index.css

This will remove the old file, thereby preventing any conflicts with React Bootstrap.

Lastly, you’ll need to wipe out all of the css in src/App.css, since you don’t need any of it for this tutorial and unnecessary styles just clutter things up.

Run $ yarn start and let’s get BUIDLing!

3. The Grand Finale

So after all that setup, you can finally code this simple little dapp! Our requirements?

Say “Hello Rivet!” in a nice, big heading.
Reveal the public key (in BUIDLer parlance, the Ethereum address) of the wallet associated with the Metamask extension you installed earlier.

Let’s get started! Open src/App.js and clear out all the code, so you’re starting from a blank file.

Got a blank canvas? Good. Paste in the following code and save your file:

import React, { Component } from 'react';
import Web3 from 'web3';
import './App.css';

class App extends Component {
  componentWillMount() {
    this.loadBlockchainData()
  }



async loadBlockchainData() {
  const web3 = new Web3(Web3.givenProvider || "https://YourApiKey.eth.rpc.rivet.cloud/")
  await web3.eth.requestAccounts()
  const accounts = await web3.eth.getAccounts()
  this.setState({ account: accounts[0] })

}

constructor(props) {
  super(props)
  this.state = { account: '' }
}

render() { return (

<div className="container">

   <h1>Hello, Rivet!</h1>

   <p>Your account: {this.state.account}</p>

</div>


); } }

export default App;

Congratulations, you’re all done! So what does your code do?

It imports Web3 from ‘web3’. This allows your dapp to connect to the blockchain through your Rivet endpoint.
It calls React’s componentWillMount() function to load all the blockhain data. This function is called whenever the component will load properly the first time.
It connects to the blockchain by instantiating a new web3 connection, while passing in the url of your Rivet endpoint. As you’ll recall from earlier, these docs populate it automatically for you when you’re logged in to the Rivet Dashboard.
It loads the current account you’re using in Metamask and adds it to React’s state object, enabling it to track the current state of the component.
Finally, it reads the account from the state object and renders it within the HTML output via the render() function.

That’s all there is to it! Bask in the glory of your first dapp!

Conclusion

In future tutorials, we’ll expand from here to help you grow your creative repertoire. In the meantime, you can:

Check out the resources available in the rest of this doc site and at Ethereum.org and start dreaming up what you want to learn how to BUIDL.
style up your dapp to get some css practice (hint: Add your styles in App.css).

Congratulations!! You’re now an Ethereum BUIDLer—welcome to the community!!

—❤️Rivet