Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udacity

Intermediate React

via Udacity

Go to class Write review

Overview

Build professional-grade web applications by moving beyond the basics of React. You will start by architecting production-ready apps and implementing modern routing patterns that keep your user experience seamless. Rather than just building interfaces, you’ll focus on the logic that powers them. You will manage complex data fetching with React Query, optimize performance, and master the crucial distinction between remote and local state. You'll also integrate secure user authentication and build polished UI components using industry-standard tools like Tailwind and shadcn/ui. By the end of this course, you will apply these skills to a capstone retail application, incorporating rigorous testing practices to ensure your code is ready for the real world.

Syllabus

  • Introduction to Intermediate React
    • This lesson describes what you will learn throughout the course, along with the necessary prerequisites and the tools and development environment you will use.
  • Understanding Production Application Architecture
    • Understand how architecture enables production-ready apps by ensuring reliability, maintainability, observability, and safe deployments as complexity and team size grow.
  • Understanding Modern React Routing
    • Learn modern React Router v6+: client-side routing, nested routes, layout patterns, navigation tools, and using the URL as part of your app's shareable, predictable state.
  • Implementing Advanced Routing Patterns
    • Learn advanced routing patterns in React Router, including nested routes, layout routes, params, search params, and navigation for scalable, state-driven apps.
  • Understanding Modern UI Component Systems
    • Explore modern React UI component systems, focusing on headless libraries, composition vs configuration, customization, and design system-driven theming for scalable, accessible apps.
  • Building UI with shadcn/ui and Tailwind
    • Build polished React UIs using shadcn/ui and Tailwind: set up styling, create reusable components, implement responsive layouts, and support accessibility and dark mode.
  • Error Handling and Loading States
    • Discover how to design resilient UIs by handling errors, managing loading states, providing recovery actions, clear messaging, and basic observability for a reliable user experience.
  • Implementing Robust Error and Loading UX
    • Learn to enhance React UX by handling render errors with Error Boundaries, using skeletons for loading states, and providing user-friendly error messages and recovery actions.
  • Remote State vs Local State
    • Learn to distinguish remote (server) state from local state in apps, understanding their characteristics, usage, and best practices for reliability and maintainability.
  • Understanding React Query Fundamentals
    • Master React Query fundamentals: manage server state with queries, caching, background sync, and DevTools for fast, consistent, and scalable data-fetching in React apps.
  • Setting Up and Fetching Data with React Query
    • Learn to set up React Query in a React app, implement data fetching with useQuery, and handle loading, error, and empty states for robust server-state management.
  • Advanced Query Patterns and Optimization
    • Master advanced query patterns in React Query: use dependent/parallel queries, prefetching, invalidation, and tune caching options to optimize data fetching, performance, and UI.
  • Implementing Advanced Query Features
    • Learn to implement advanced React Query features: dynamic keys, dependent queries, prefetching, and URL-synced filters for scalable and responsive data fetching.
  • Understanding useReducer for Complex State
    • Explore how useReducer manages complex, related state in React by centralizing update logic with actions, pure reducers, and immutable state transitions for predictability and testability.
  • Building a Reducer for Application State
    • Learn how to design, write, and integrate a reducer for managing local UI or app state, ensuring pure, immutable updates, with clear separation of concerns and events-driven logic.
  • Understanding State Persistence and Selectors
    • Learn effective state persistence, safe hydration, and how to use selectors, derived state, and memoization for predictable, efficient, and scalable React app state management.
  • Combining Context, Reducer, and Persistence
    • Learn to combine context, reducer, persistence, and selector hooks to manage and persist shared state in React apps while keeping reducers pure and components maintainable.
  • Understanding Authentication
    • Understand authentication and authorization, common login flows, session and token management, token storage tradeoffs, expiration, renewal, and revocation for secure user access.
  • Implementing Authentication with Context
    • Learn to implement authentication in React using Context for shared auth state, token persistence, login/logout, and robust form validation and error handling.
  • Understanding Route/Screen Protection
    • Learn to protect routes/screens to control access, ensure security, and guide user flow with redirect/resume patterns and auth-aware navigation for seamless user experiences.
  • Implementing Protected Routes and Auth-Aware UI
    • Learn to implement protected routes, redirect after login, and create auth-aware UI in React, ensuring secure access and smooth, user-friendly navigation.
  • Understanding Query Mutations
    • Discover the difference between queries and mutations, and learn strategies for keeping UI consistent during data changes using invalidation, optimistic updates, and rollback.
  • Implementing Mutations and Optimistic Updates
    • Learn to implement server mutations with React Query, handling cache updates, optimistic UI, and rollback for fast, responsive user experiences.
  • Understanding React Performance Optimization
    • Learn how to identify and address React performance issues using rendering insights, memoization, transitions, and code splitting for responsive, efficient apps.
  • Implementing Performance Optimizations
    • Learn to profile React apps and optimize performance by memoizing data, stabilizing props, reducing re-renders, and keeping UI responsive with transitions and deferred updates.
  • Understanding Testing in Mobile Applications
    • Learn effective mobile app testing: use a balanced test pyramid, focus on user-visible behavior, and apply React Testing Library's real-user, async-first testing approach.
  • Writing Tests with Vitest and React Testing Library
    • Learn to write and organize unit, hook, and integration tests in React apps using Vitest and React Testing Library for robust, user-focused test coverage.
  • Production Build and Deployment
    • Learn to build, preview, and deploy Vite React apps, use environment variables, perform production QA, and understand basic CI/CD with Vercel or Netlify.
  • Project: React Retail
    • React Retail is a storefront app where users browse products, view details, manage a cart, log in, access protected checkout, place a mock order, and see a confirmation.

Taught by

Andrew Wong

Reviews

Start your review of Intermediate React

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.