Take Workshop

Ask a Question · Report Bug

• About the Workshop
  • Workshop Goals
  • Workshop Outcomes
• Prerequisites
• Pre-Workshop Instructions
• Further Learning
• Resources

Hooks are awesome because they're "first-class" utility functions provided by React to let you hook into state and other features while writing components. The cool thing about Hooks is that you can build on top of them to make your own. It’s like writing a function on top of lodash. You can gather something that might be reusable, and then package it up into a custom hook. That is the beauty of writing a shareable custom Hook in React.

After completing this workshop, you will understand how to write custom Hooks in React, and publish them as npm packages for the open source community.

By taking this workshop, you will learn how to:

1. Understand what a “first-class” Hook is and isn’t
2. Understand what a custom Hook is
3. Write a custom Hook in an existing application
4. Extract the Hook into a module
5. Test the Hook locally
6. Publish the Hook as an npm package

Although this workshop is not targeted at React experts you'll need the following:

• moderate React experience
• some familiarity with Hooks
• an npm account

Before you join us for the workshop, please make sure to the following:

1. Download Zoom
2. Clone this repo so you have it locally
3. Create an npm account (needed to publish your package)
4. Install create-react-hook globally

• npm i -g create-react-hook
• yarn add global create-react-hook
• or you can run it during the workshop using `npx create-react-hook

If you run into road blocks at anytime in the workshop or want additional resources, here's a list of things to check out:

• Wrapping your head around the bundle outputs.
  • The State of JavaScript Modules
  • What is AMD, CommonJS, and UMD?
• Know why / how you shouldn’t bundle React
  • Understanding the npm dependency model
• Hook inspiration and deciding what to make a hook of
  • usehooks.com
  • the-platform
  • awesome-react-hooks
• Default exports and named exports
  • Why we use named exports and not default exports in our package
• Understanding how Hooks work
  • Deep dive: How do React hooks really work