TP3346
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
Duration
2 days
Prerequisites
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
