When does class start/end?
Classes begin promptly at 9:00 am, and typically end at 5:00 pm.
Advanced React
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. Skills...
Read More
$1,460 USD
Course Code
TP3346
Duration
2 days
Available Formats
Classroom
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.
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
Who Can Benefit
Experienced React developers who want to be take their React skills to the next level.
Prerequisites
All students must have strong JavaScript, HTML5, and CSS skills and taken our introductory ReactJS course or have the equivalent knowledge.
Course Details
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
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