8351  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
Duration 2 days
Course Code TP3346
Available Formats Classroom

Overview

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

Schedule

FAQ

Does the course schedule include a Lunchbreak?

Classes typically include a 1-hour lunch break around midday. However, the exact break times and duration can vary depending on the specific class. Your instructor will provide detailed information at the start of the course.

What languages are used to deliver training?

Most courses are conducted in English, unless otherwise specified. Some courses will have the word "FRENCH" marked in red beside the scheduled date(s) indicating the language of instruction.

What does GTR stand for?

GTR stands for Guaranteed to Run; if you see a course with this status, it means this event is confirmed to run. View our GTR page to see our full list of Guaranteed to Run courses.

Does Ascendient Learning deliver group training?

Yes, we provide training for groups, individuals and private on sites. View our group training page for more information.

What does vendor-authorized training mean?

As a vendor-authorized training partner, we offer a curriculum that our partners have vetted. We use the same course materials and facilitate the same labs as our vendor-delivered training. These courses are considered the gold standard and, as such, are priced accordingly.

Is the training too basic, or will you go deep into technology?

It depends on your requirements, your role in your company, and your depth of knowledge. The good news about many of our learning paths, you can start from the fundamentals to highly specialized training.

How up-to-date are your courses and support materials?

We continuously work with our vendors to evaluate and refresh course material to reflect the latest training courses and best practices.

Are your instructors seasoned trainers who have deep knowledge of the training topic?

Ascendient Learning instructors have an average of 27 years of practical IT experience and have also served as consultants for an average of 15 years. To stay current, instructors spend at least 25 percent of their time learning new, emerging technologies and courses.

Do you provide hands-on training and exercises in an actual lab environment?

Lab access is dependent on the vendor and the type of training you sign up for. However, many of our top vendors will provide lab access to students to test and practice. The course description will specify lab access.

Will you customize the training for our company’s specific needs and goals?

We will work with you to identify training needs and areas of growth.  We offer a variety of training methods, such as private group training, on-site of your choice, and virtually. We provide courses and certifications that are aligned with your business goals.

How do I get started with certification?

Getting started on a certification pathway depends on your goals and the vendor you choose to get certified in. Many vendors offer entry-level IT certification to advanced IT certification that can boost your career. To get access to certification vouchers and discounts, please contact info@ascendientlearning.com.

Will I get access to content after I complete a course?

You will get access to the PDF of course books and guides, but access to the recording and slides will depend on the vendor and type of training you receive.

How do I request a W9 for Ascendient Learning?

View our filing status and how to request a W9.

Reviews

it was good and very informative. Instructure covered everything in detail.

very good and spcecific course and above all a very good instructor. In few days I have learned a lot.

The training was very good to understand the concepts and how to set up things .

Great and very intuitive. Better than the traditional hit the wrong button/lose points.

Brandon was a great instructor. The virtual course materials and labs provided were very informative.