Advanced React Training

In this hands-on React course, attendees learn the advanced features of React, including custom hooks, useReducer, events, sub-routes, and more, with an experienced instructor to guide you.
Course Details


2 days


A very strong grasp of React is essential to understand the lectures and perform the labs. Expert-level JavaScript and very solid HTML5 and CSS knowledge is also needed. Please ask about our 3-day React Fundamentals course which will prepare you for the high-level of React fluency needed for this course.

Target Audience

Experienced React developers who want to be take their React skills to the next level.

Skills Gained

  • Write React components that optimize the virtual DOM
  • Make the most of TypeScript with React apps for type safety
  • Use prop types instead of TypeScript
  • Describe all the built-in hooks
  • Write their own custom hooks
  • Speed up apps with useMemo and useCallbak
  • Solve complex state with useReducer
  • Bypass prop drilling with useContext
  • Respond to all events - even those React can't handle
  • Create navigation routes with the newest router
  • Read route parameters and query strings
  • Construct the fastest hyperlinks
  • Author sub-routes
  • Optimize loading with sub-routes
  • Make React components conform to a11y and a18n needs
Course Outline
  • Introduction
  • Understand the virtual DOM
    • Why the vDOM?
    • Reconciliation
    • How it compares
    • How to optimize your code
    • The Ivy engine
    • How hooks fit in
    • Why one-way data flow
    • Transpiling, bundling, minifying with webpack, and Rollup
  • TypeScript in React
    • JavaScript vs Java (et al.)
    • What TypeScript really does
    • TS does not provide strong typing
    • Interfaces vs types
    • Embracing functional vs OOP
    • Generics in React
    • Discriminated unions
    • CSS Properties
    • Event object
    • 3rd party libraries with no TS support
  • Proptypes
    • Built-in prop type checking
    • Making props optional
    • Setting prop types
  • Speeding up React with lazy loading
    • The best strategy
    • The lazy method
    • The Suspense component
    • Fallbacks
    • Code splitting
    • Error boundaries
  • Hooks overview
    • All built-in hooks
    • When to use the obscure ones
  • useContext for code clarity
    • Why prop drilling is evil
    • Create context
    • Reading context
    • Updating context
  • Deep dive into useEffect
    • How useEffect works
    • Simulating lifecycle events
    • Exhausting dependencies
    • useEffect belongs with its own render
  • Speeding your app with useMemo and useCallback
    • What is the difference?
    • Optimizing components with useCallback
    • Optimizing with useMemo
    • Why not just useMemo everything?
  • Fixing complex state - useReducer
    • What is useReducer?
    • Woot! No need for Redux, right?
    • How to optimize useReducer
    • When not to useReducer
  • How to write a custom hook
    • First - why?
    • The rules
    • How to write the code
    • How to best use a custom hook
  • Advanced event handling
    • React's synthetic events
    • How to handle events that React refuses to
    • Low-level power of events
    • The need to de-register events
    • Let's create an infinite scroll component
  • Routing
    • Overview of the newest React Router
    • Creating baseline routes
  • Route parameters & query strings
    • What's the difference?
    • REST and parameters
    • Creating route parameters
    • Reading route parameters
    • Reading query strings
  • Efficient hyperlinks
    • Why not use <a>?
    • How to do it the modern way
    • Relative vs absolute paths
  • Subroutes
    • Routes within routes
    • How to create relative routes
    • How this simplifies your complex navigation
  • 11y (time permitting)
    • The case for a11y
    • Specs, laws, and requirements
    • React-specific handling
  • 18n (time-permitting)
    • Globalization vs. localization
    • Detecting locale
    • How to do it in React
  • Conclusion
Upcoming Course Dates
USD $1,525
Online Virtual Class
Date: Jun 10 - 11, 2024
Time: 10 AM - 6 PM ET
USD $1,525
Online Virtual Class
Date: Jul 8 - 9, 2024
Time: 10 AM - 6 PM ET
USD $1,525
Online Virtual Class
Date: Sep 2 - 3, 2024
Time: 10 AM - 6 PM ET