Using Drizzle (Truffle) with React Hooks

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() 

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.

Before you can get the box

You will need to install Node.js, create-react-app and Truffle, as stated in the original tutorial — see “Setting up the development environment”.

Unboxing instructions

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.

To use this box

• Change into the client directory. Run

  npm install

• In the main project directory, enter

  truffle develop

• Then, in the Truffle console, enter

  compile

  and then

  migrate

The Solidity contracts should now be on your test blockchain and the DApp should be available at http://localhost:3000.

Errors

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

Contact

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.