Setup dApp project
Last updated
Last updated
Let's start with creating a frontend project using create-react-app.
npx create-react-app counter-dapp
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!