Wondering how to implement Drizzle using React Hooks?
I have converted the completed version of this class-based Drizzle tutorial to a React Hooks Truffle Box. It’s ready for you to download, so you can get going quickly with a ready-made React Hooks DApp that already subscribes to the Drizzle store.
The original tutorial provides guidance on how to create a Truffle project with React and Drizzle from scratch and embeds Drizzle in a class-based React (D)App. The DApp subscribes to the Drizzle store, and the user is subsequently able to (set) a string on the blockchain as well as read (get) the latest stored string.
I have built on the tutorial provided by Truffle, and changed the class-based components to use React Hooks, namely
useState()
and useEffect()
. For convenience, I’ve also included enzyme, a useful JavaScript testing utility for React, with an example test.
You can download the completed React Hooks Drizzle package by following the guidelines below.
You will need to install Node.js, create-react-app and Truffle, as stated in the original tutorial — see “Setting up the development environment”.
If you already have Truffle, you can download the box as follows:
Create a new directory. In the new directory, run:
truffle unbox atkinsonholly/Drizzle-tutorial-with-React-Hooks
This should pull the box contents to the new local directory on your machine.
npm install
truffle develop
compile
and then migrate
The Solidity contracts should now be on your test blockchain and the DApp should be available at http://localhost:3000.
You may need to install Xcode to use this box on macOS, see node-gyp on Github. The following command may be useful if you encounter issues with this:
xcode-select --install
I hope you find the Trufflebox helpful! Feel free to reach out with any feedback. You can also refer to my Github repo to see the box configuration.