Hands-On Smart Contract Development with Solidity and Ethereum

Chapter 9. Connecting the UI to Our Contracts

Let’s get started with creating our DApp’s UI. We’ll use a frontend framework called React to implement the features we need to allow our users to interact with the blockchain. React will help us to easily create a frontend application with different routes for a user to navigate through, input forms and buttons for them to submit data, and more. In this chapter, we’ll learn how to use React to work with the blockchain and submit functions that will read and write to the blockchain.

Why React?

First of all, what is React? React is a JavaScript library built by Facebook that is used to build frontend applications or the client side of an application. If your application uses React, anything that a user sees—the view layer—is being served from the React application. React uses components and data management, such as reducers and actions, along with providing JSX (a syntax extension) and a Virtual DOM, not to mention easily reusable library code that will help you build out the frontend to your application fast.

If you do become a blockchain engineer, most likely you’ll need to be familiar with Web3 and React to develop Web3 applications. To learn more about React, take a look at its official site.

Why do we want to use React? React is the most widely used frontend framework with Truffle. Because it is so widely used, it’ll make finding documentation and answers to your questions so much easier. Most of the questions you’ll find on Stack ...