Ethereum dApp Tutorial 2/2: Frontend (React) Section

Jimmy Chu
WTF Studio
Published in
4 min readMay 8, 2019

--

This is part 2/2 of the series on the dApp development tutorial.

Part 1/2 on the smart contract development can be seen in this post.

In the last post, we covered about Solidity smart contract implementation, and we have the factory and actual lottery contract implemented. We will now implement the frontend so it interact with these smart contracts.

Our UI will look as followed:

Fig. 1) Main UI, with React component structure
Fig. 2) Modal dialog for creating a new lottery pot
Fig. 3) Modal dialog for participating in a lottery pot

Some notes:

  • This is a simple app to demonstrate how to build a dApp interact with ethereum blockchain. So there is only one main screen showing different lottery pots. There are then a modal dialog for users creating a lottery pot and a modal dialog for users participating in a lottery.
  • The highlighted red border is how the UI is structured as React components.

Here is the project for the frontend:

We will be using React for the frontend development, with the smart contracts served as our backend. We assume readers have basic understanding on React development. If not, please refer to the reference on where to learn more about React development.

Some notes about the actual implementation:

  • We use the presentational and container components pattern on React component implementation.
  • There are a few states on each lottery pot:
    — the lottery pot is created and open for participation.
    — the lottery pot has passed its closed time, and winner is not…

--

--