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.

Understand how architecture enables production-ready apps by ensuring reliability, maintainability, observability, and safe deployments as complexity and team size grow.

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.

Learn advanced routing patterns in React Router, including nested routes, layout routes, params, search params, and navigation for scalable, state-driven apps.

Explore modern React UI component systems, focusing on headless libraries, composition vs configuration, customization, and design system-driven theming for scalable, accessible apps.

Build polished React UIs using shadcn/ui and Tailwind: set up styling, create reusable components, implement responsive layouts, and support accessibility and dark mode.

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.

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.

Learn to distinguish remote (server) state from local state in apps, understanding their characteristics, usage, and best practices for reliability and maintainability.

Master React Query fundamentals: manage server state with queries, caching, background sync, and DevTools for fast, consistent, and scalable data-fetching in React apps.

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.

Master advanced query patterns in React Query: use dependent/parallel queries, prefetching, invalidation, and tune caching options to optimize data fetching, performance, and UI.

Learn to implement advanced React Query features: dynamic keys, dependent queries, prefetching, and URL-synced filters for scalable and responsive data fetching.

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.

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.

Learn effective state persistence, safe hydration, and how to use selectors, derived state, and memoization for predictable, efficient, and scalable React app state management.

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.

Understand authentication and authorization, common login flows, session and token management, token storage tradeoffs, expiration, renewal, and revocation for secure user access.

Learn to implement authentication in React using Context for shared auth state, token persistence, login/logout, and robust form validation and error handling.

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.

Learn to implement protected routes, redirect after login, and create auth-aware UI in React, ensuring secure access and smooth, user-friendly navigation.

Discover the difference between queries and mutations, and learn strategies for keeping UI consistent during data changes using invalidation, optimistic updates, and rollback.

Learn to implement server mutations with React Query, handling cache updates, optimistic UI, and rollback for fast, responsive user experiences.

Learn how to identify and address React performance issues using rendering insights, memoization, transitions, and code splitting for responsive, efficient apps.

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.

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.

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.

Learn to build, preview, and deploy Vite React apps, use environment variables, perform production QA, and understand basic CI/CD with Vercel or Netlify.