Skip to content

Learn React Hooks

By Building A Real Application

Learn React Hooks by building key features of a realistic app. After teaching this content to thousands, we've packaged it up into and on-demand course just for you.

Brought to you by
Michael JacksonMichael Jackson
Ryan FlorenceRyan Florence

Beginner Level

If all you've done is the official React tutorial then you are ready for this course. We'll be starting from the fundamentals and working our way into hooks basics pretty quickly. Hooks allow us to cover topics that are ordinarily advanced sooner. It might feel a little fast but that's what the pause button is for!

Intermediate/Advanced Level

If you're a seasoned React developer, there's no better way to get caught up on Hooks and what it means for your code and team than this course. You’ll get priceless insights into how hooks will help you build great abstractions for your team that will work in new and mature code-bases.

7 Hours of Video
9 Exercises
9 Solutions
Of Awesome

You’re not going to just watch some videos and type along with us, nah, that’s not how you learn. We teach a concept with real-world code, then hand it over to you to do an exercise on your own--which is where the real learning happens. When you’re done, we’ll solidify your understanding as we go deeper into the concepts in the solution videos.

  • React's Fundamental Composition Model
  • All of the New Hooks
  • Thinking In Effects, Not Lifecycles
  • Composing and Sharing Non-Visual Behavior
  • Data Loading and Caching
  • App-Wide State Management
  • Realtime Updates and Subscriptions
  • Clientside Authentication
  • Performance Considerations and Optimizations
  • Animation
Trusted by these brands
GoogleAppleNetflixPayPalSlackAdobeWalmartGitHubMicrosoft

Lessons

  1. Rendering
    1. Hello world
    2. It’s Just JavaScript
    3. Create Element
    4. JSX
    5. Using Components
    6. Defining Components
    7. Component Reuse with Props
    8. Children Prop
    9. Data Flow
    10. Custom Events
    11. Code-a-long
  2. State and Updates
    1. What it means to be declarative
    2. useState introduction
    3. Multiple states
    4. What to do when anything happens
    5. How React Updates the Page
    6. Exercise: Show password field checkbox
    7. Solution
    8. Demystifying hooks w/ Phony Hooks
  3. Effects
    1. Handling events with React
    2. useRef
    3. The problem with "Thinking in events"
    4. useEffect introduction
    5. Governing side-effects
    6. useEffect dependency array
    7. Custom hooks
    8. Reusable hooks
    9. Composing hooks and functional composition
    10. Exercise: Save and retrieve state to local storage
    11. Solution
  4. Data Loading
    1. Fetching data
    2. Cleanup functions
    3. Cleaning up a promise
    4. Using async/await in effects
    5. Cleaning up subscriptions
    6. Remember the render props
    7. Render props vs. Hooks
    8. More hook composition
    9. Exercise: Loading User Authentication Data
    10. Solution
  5. Compound Components
    1. Customize component positions
    2. Too many props!
    3. Replacing props with component composition
    4. Component communication with Context
    5. Multiple contexts
    6. High-level components composed from low-level components
    7. React.Children
    8. Exercise: Internationalized Date Fields
    9. Solution
  6. Application State and What about Redux?
    1. Why reducers?
    2. Normal array.reduce
    3. useReducer
    4. What if Context and useReducer had a baby?!
    5. Exercise: Fetch data with reducers and actions
    6. Solution
  7. Exercise: Implementing a status feed
    1. Data loading
    2. Pagination
    3. Real-time updates with subscriptions
    4. Dual Pagination (top and bottom)
    5. Persisting state (and scroll) between mounts
    6. useState and useReducer versions
  8. Animation
    1. Animation intro
    2. Creating a useTween hook
    3. Animating pixels and ... sounds?
    4. React Spring Shallow dive
    5. Animating Non-React elements from React
  9. Performance
    1. Lazy refs
    2. Minimizing re-calculations with useMemo
    3. React devtools profiler
    4. Optimizing components with React.memo
    5. Not breaking optimizations with useCallback
    6. useEffect vs. useMemo
    7. Goodbye world!

Testimonials


React Router

Michael Jackson and Ryan Florence create the React libraries that you use in your apps like React Router and Reach UI. All of our trainers are experts in React and JavaScript so let us share our knowledge with you and your team!

I Love React
© React Training 2020