Setup dApp project
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
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.Last modified 1yr ago