This article explains step-by-step instructions for how to use the Truffle Suite to create a React application that reads data from the blockchain. We are going to use the same smart contract described in this article. Instead of walking through the details of the smart contract, we’re going to focus on how to make a React web application that reads from the blockchain and displays the data.
There will be codebase checkpoints throughout this tutorial to let you see what your code should look like at each stage.
Create the Project
If you’ve followed this article, then you’ll have already installed the correct dependencies. If you haven’t, I highly recommend working through it to gain an understanding of smart contract development and the deployment lifecycle.
Firstly, create a new project directory and navigate to it from your terminal. I’m calling my project truffle-dapp:
We’re using Truffle Suite to create our DApp, a popular framework for developing full-stack decentralized applications on the Ethereum network.
Truffle provides some great boilerplate projects called Boxes that come pre-configured to let you focus on functionality rather than fiddling with configuration. We’re going to use the React Box, which comes with a React front end ready built. Inside your project directory, run the following:
truffle unbox react
This may take a little time, but once completed, you should see a folder structure like Figure 1 in your text editor.
client/contains our front-end React code. We’ll need to delve into here to make changes to our webpage once our contracts have been deployed.
contract/is where our Solidity smart contract code is stored. You’ll notice that there are already two smart contracts in here: one called
Migrations.soland another called
Migrations.solis used during the migration process, whereas
SimpleStorage.solis an example contract that comes with the React Truffle Box. We’ll be adding another in this walkthrough.
migrations/is where our migration logic resides.
test/is where we test our smart contracts to ensure they function as expected.
truffle-config.jscontains information about networks, compilers, file locations, and other custom configurations for the Truffle framework to know where our things are.
Open up Ganache, our local blockchain, and make a note of the Network ID and RPC Server information. Copy this information into your
truffle.config.js file in the project root directory so that it looks like Figure 2.
Make sure your network name is
development and not
Next, run the following code in your terminal to migrate the boilerplate smart contracts to our Ganache blockchain:
Once completed, run existing boilerplate tests to ensure the deployed contracts work as expected:
The output should look something like Figure 3:
Now we’re going to create our new smart contract. We’re using the same contract we used in this article. Firstly, create a new file within the
contracts/ folder in your project called
HelloWorld.sol. Copy the contents of Figure 4 into the file and save it.
Next, we need to ensure that our project deploys the correct contract. Inside the
migrations/ folder, open up
2_deploy_contracts.js and copy the code from Figure 5 into it.
Here, we’re instructing Truffle to deploy both our HelloWorld contract and the SimpleStorage contract.
Finally, run the following command to migrate the new contract to the network:
truffle migrate --reset
In the output, you should see our HelloWorld contract being deployed, as shown in Figure 6:
We’re also going to pull in a Solidity test file to test
HelloWorld.sol. Create a new file in the
test/ folder called
TestHelloWorld.sol, paste the contents of Figure 7 into it, and save.
Check that all tests pass by running the following command in your terminal:
Before we do any React coding, we need to make sure our browser can interact with sites that access the blockchain. We do this by using a browser extension called MetaMask.
MetaMask is a browser plugin that allows users to make Ethereum transactions through regular websites. Head over to their website, install the extension and create an account.
Next, click on the MetaMask icon in your browser and log in. There, you need to add a custom RPC so the extension can access your local blockchain. Use the information from Ganache, head back to MetaMask, click Custom RPC, and enter the information. You should see it appear in the list of connections as shown in Figure 8 with http://localhost:7545. Connect to this network by clicking it.
MetaMask creates a wallet address when you create an account, but you can also import other wallet addresses provided you have control of the private keys. This is great for testing because we can use the accounts provided by Ganache to interact with our local blockchain.
Head over to Ganache and copy the private key from the first address in the list. You can display the private key by clicking the key icon on the right side of the row for each account, as shown in Figure 9.
Head back to MetaMask in your browser and open the Accounts panel by clicking on the icon in the top-right corner, as seen circled in Figure 10.
Click Import Account, paste the private key in, and click Import. This will add the account to your list of accounts. Select that account. Great! Let’s test it out.
Let’s test our React client. As I mentioned earlier, the Truffle Box provides some React boilerplate. In your terminal, navigate into the
client/ folder and run the following:
npm run start
This should open a new browser tab and attempt to connect your browser to the blockchain. You’ll get a notification from the MetaMask extension attempting to connect. Confirm it. The webpage displayed should look like Figure 11.
Next, we’re going to load the new HelloWorld contract, retrieve the greeting by calling
getGreeting(), and display it on this page.
Querying the blockchain
Head over to your text editor and open up
App.js in the
First, import the compiled contract. Add the following line to the import statements:
import HelloWorld from "./contracts/HelloWorld.json";
Then we need to do the following:
componentDidMount(), we need
this.setState()to include the HelloWorld contract, where it currently only has the SimpleStorage contract.
- Once we’ve done that, we need
runExample()to use call
getGreeting()on the HelloWorld contract just as it calls
get()on the SimpleStorage contract.
- Finally, we need a new div in the
render()method to display the value.
Try this yourself and check the browser to see if your changes have the desired effect. When finished, your
App.js file should look similar to the code in Figure 12.
Congratulations! You have successfully created a Truffle project using the React Truffle Box, added a smart contract to the project, retrieved data from this contract, and displayed it in the React app. Well done! I hope this inspires you to explore blockchain development more and I encourage you to follow some of the links below to expand your knowledge.
- How to deploy your Smart Contracts to a public testnet
- How to load the Blockchain in you React app
- How to Become a Blockchain Developer
Blockchain Development Resources To Follow Right Now
A list of resources to learn Blockchain, Ethereum, and DApp development
If you enjoyed this article and want to learn more about smart contract security, blockchain development, or the blockchain space in general, I highly recommend the Blockgeeks platform. They have courses on a wide range of topics in the industry, from coding to marketing to trading. It has proven to be an invaluable tool for my development in the blockchain space.