Wondering how to implement Drizzle using React Hooks? I have converted the completed version of 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. this 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 and . 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 and then compile 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 . The following command may be useful if you encounter issues with this: Github 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 to see the box configuration. Github repo
