/advanced-react

Primary LanguageJavaScript

Advanced React

Version: 1.0.0, September 2023
By: Chris Minnick

Introduction

In this class, students learn the most advanced and up-to-date techniques and tools in React development. Students will be challenged throughout the course with hands-on exercises, during which they'll get hands-on experience with the topics covered in lectures and demos.

Target Audience

This course is designed for developers who are already familiar with React and want to learn how to make the best use of it and move past the basics.

About the Author

Chris Minnick has been a full-stack developer for over 25 years, and a professional author and trainer for 15 years. He has been the lead front-end React developer for several startup companies and has been building web and mobile user interfaces with React since 2015. Chris has produced online video courses for Pluralsight and O'Reilly Media and is the author of JavaScript All-In-One For Dummies and Beginning React JS Foundations.

Objectives

All students will:

  • Gain a deeper understanding of Redux
  • Learn to write tests for Redux code
  • Learn how to improve Redux UI performance
  • Use server-side rendering
  • Learn about advanced routing techniques
  • Understand micro-frontends
  • Learn about security and accessibility concerns
  • Learn React best practices

Duration

3-day

Outline

  1. Introduction
  2. React Component Lifecycle
    • Mounting Phase
    • Updating Phase
    • Unmounting Phase
    • Error Handling Phase
    • Lifecycle Methods in Hooks
    • Lifecycle Best Practices
  3. Function vs. Class Components
    • useState
    • useEffect
    • Custom Hooks
    • State Management in Class Components
    • State Management in Function Components
    • Lifecycle Methods in Class Components
    • useEffect
    • Performance Optimization in Class Components
    • Performance Optimization in Function Components
  4. React Router
    • Router Component
    • Routes Component
    • Route Component
    • Link and NavLink Components
    • Navigate
    • Dynamic Routing
    • Outlet Components
    • Nested Routes
    • Implementing Protected Routes
    • Using the Redirect component
    • Hooks in React Router
  5. Redux
    • Actions
    • Reducers
    • Store
    • Redux Middleware
    • Redux Thunk
    • Async Actions
    • Redux Saga
    • Redux Toolkit
      • createAction
      • createReducer
      • createSlice
      • createSelector
    • Redux DevTools
    • react-redux
    • Hooks API
  6. Testing Redux
    • Types of Tests in Redux
    • Jest
    • React Testing Library
    • Unit Testing Actions
    • Unit Testing Reducers
    • Testing Middleware
    • Mocking Middleware
    • Spy Functions
    • Integration Testing
    • Store Integration
    • Component Integration
    • Snapshot Testing
    • Best Practices
  7. Server-Side Rendering
    • Client-Side Rendering vs Server-Side Rendering
    • Tools for SSR in React
    • Implementing SSR with Next.js
    • Advantages of SSR
    • Drawbacks of SSR
  8. Code Splitting
    • Dynamic Imports
    • React.lazy() and Suspense
    • Route-based Code Splitting
    • Preloading Code
    • Webpack Chunking
  9. Micro-frontends
    • What are Micro-frontends?
    • Strategies for Micro-frontends
    • Micro-frontends with React
    • Routing in Micro-frontends
    • Testing Micro-frontends
    • Deployment and CI/CD
  10. Performance Optimization
    • Measuring Performance
    • Optimizing Rendering
    • Lazy Loading
    • Memoization
    • Data Fetching Strategies
      • SWR
      • React Query
    • Web Workers
    • Throttling and Debouncing
    • Optimizing event handlers
    • API calls
    • Server-Side Rendering (SSR)