Setup dapp project

🌽 Create a project using create-react-app

Let's start with creating a frontend project using create-react-app.

npx create-react-app counter-dapp

This command takes a little while to complete, be pertinent. You need to confirm the installation of create-react-app if it's your first time using this command.

Once the command complete, start the web app:

cd counter-dapp
yarn start

A browser window will be opened and who the web app. You can visit http://localhost:3000/ either.

🛠️ Add counter state and buttons

We'll add a simple text to show the current value of the counter state.

"Inc" and "Dec" buttons to update the counter state.

Edit src/App.js and set the App() function looks like below:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Counter Example</h1>
        <p>
            Current value: n/a
        </p>
        <button className="CounterButton">Inc Counter</button>
        <button className="CounterButton">Dec Counter</button>
      </header>
    </div>
  );
}

Edit src/App.css and add the css class CounterButton. You can make your customizations as you like.

.CounterButton {
  background-color: #4CAF50;
  border: none;
  color: white;
  margin-top: 15px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 200px;
}

The webpage will be reloaded after you saved the files.

Now you can see we're having the basic page layout!

The source code of this chapter could be found at the revision fdb1b9e5f in the counter-dapp source repo.