paint-brush
Using Drizzle (Truffle) with React Hooksby@atkinsonholly
1,002 reads
1,002 reads

Using Drizzle (Truffle) with React Hooks

by HollyAugust 22nd, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The class-based Drizzle tutorial is converted to a React Hooks Truffle Box. The box 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. The box is ready for you to download, so you can get going quickly with a ready-made React HookS DApp.

Company Mentioned

Mention Thumbnail
featured image - Using Drizzle (Truffle) with React Hooks
Holly HackerNoon profile picture

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.

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.