Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Bringing the Pattern into React

via egghead.io

Overview

It's time to introduce a "View" to our codebase so that we can present the values in the DOM. Since React is the most popular View library, we'll convert our basic JavaScript project to a React project to demonstrate how this pattern fits.
We'll create several hooks (useCallback, useListener, useBroadcaster) in this section to see how you could implement the pattern in react terms.
By the end of the section, you'll know how user input is handled and how to fetch resources in React with this pattern
You're in Section 06 of Composing Closures and Callbacks in JavaScript

Syllabus

  • Adding React to a Vanilla Parcel Project
  • Create a Broadcaster in React with useState and useEffect Hooks
  • Create a Custom useBroadcaster Hook
  • Pass a Listener to a useCallback Hook
  • Create a Custom useListener Hook Around useCallback
  • Explaining the useListener Code
  • Map a Sequence of Values in React with useBroadcaster
  • Handling an Enter Keypress with useListener and React
  • Map a Sequence Based on Input Text in React
  • Creating a Debounce Operator to Limit Listener Calls
  • Wrap Fetch in a Broadcaster in React
  • Cancel a Fetch Request with a Broadcaster and React
  • Map an Error to a Broadcaster Value in React

Taught by

John Lindquist

Reviews

4.9 rating at egghead.io based on 11 ratings

Start your review of Bringing the Pattern into React

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.