8169  Reviews star_rate star_rate star_rate star_rate star_half

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