React

Welcome! We're so glad you're here. Join us in learning a bit more about what to expect and ways to succeed.

You are starting a challenging but rewarding journey! Take 5 minutes to read how to get help with projects and content.

In this lesson, you'll learn a bit about why React was built and the functional JavaScript concepts you'll use in React.

In this lesson, you'll build reusable React components and you'll use JSX to create user interface elements.

In this lesson, you'll learn how to manage state in React applications with props, useState, and controlled components

In this lesson, you'll learn how hooks enable state and lifecycle in React components.

In this lesson, we'll cover routing in React single-page applications using React Router

Explore how data moves in React apps, lift shared state, avoid prop drilling, and use Context for shared values to build predictable, maintainable component architectures.

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.

We will look at the course design, prerequisites, tools you'll use in the course, and take a preview look at the final project.

You’ll learn techniques to make your state more predictable by moving your state to a central location and establishing strict rules for getting, listening, and updating that state.

You’ll learn to move away from having state live in the DOM by creating a vanilla JavaScript application whose state is managed entirely by Redux.

You’ll learn to create custom middleware and add it to your Redux store. This middleware will allow you to enhance your store by hooking into and intercepting actions before they reach any reducers.

You’ll learn how to add React to a Redux application and have the state of that application be managed by Redux.

You’ll learn to better abstract asynchronous events by creating your own custom Thunk middleware and adding it to your store.

You’ll learn to leverage the react-redux bindings in order to leverage the benefits of a UI library like React and a state management library like Redux.

You’ll take your knowledge of Redux and utilize it by building a real-world Redux application. You’ll also learn advanced Redux topics like reducer composition and normalization.

We will learn how to install and run JEST using synch and async functions, use snapshots, and perform DOM tests with React Testing Library.

Congratulations on your graduation from this program! Please join us in celebrating your accomplishments.

Preview foundational concepts and the project in this lesson.

Learn how to build and style flexible, mobile views in this lesson.

Become familiar with Mobile Navigation Design by adding a library and planning for design.

Learn how to setup the Redux Toolkit, create and submit a form in React Native, and transition between mobile screens.

Learn best practices for permissions, how to enable push notifications, and prepare for publication in this lesson!

Version control is an incredibly important part of a professional programmer's life. In this lesson, you'll learn about the benefits of version control and install the version control tool Git!

Now that you've learned the benefits of Version Control and gotten Git installed, it's time you learn how to create a repository.

Knowing how to review an existing Git repository's history of commits is extremely important. You'll learn how to do just that in this lesson.

In this lesson, you'll learn how to fork another developer's project. Collaborating with other developers can be a tricky process, so you'll learn how to contribute to a public project.

Learn the importance of well documented code and see how to craft meaningful READMEs.