React 19 Mastery: Build Modern Web Apps with Latest Features

Set up a real ecommerce app with React 19 by generating a new project with npm create at latest and run the dev server with npm run dev.

Learn to set up Tailwind CSS in a React app, including installation, config integration, root CSS import, and verification with a sample component.

Create header and footer as reusable React components using JSX, export them, and import into App.jsx while styling with Tailwind to keep the footer at the bottom.

Discover how props pass data into React components and make a product grid reusable by mapping mock data, using keys, and validating with prop types.

Install the prop types package, import it, define product grid prop types as an array of objects with id, title, price, and image using shape, and destructure props.

Master hooks and state with useState to filter products, updating the product grid as you toggle between under $500 and all products on the left.

Learn to filter products with React state by wiring onClick buttons to show under $500 items or all products, using useState and the array filter to update the UI.

Refactor the app by extracting the filters into a separate component, wiring it through props to a unified handle filter function, and resolve prop types for future real API data.

Learn how APIs enable apps to communicate, explore the fake store API for products, and practice making HTTP requests with get, post, put, patch, and delete using Postman.

Fetch real product data in a React app using axios and display it in a products grid, replacing hardcoded data with an API call.

Learn to manage the loading state in React with useState and conditional rendering to show loading indicators while fetching products. Apply try-catch and finally for robust error handling.

Use React 19's use hook to fetch data with axios and simplify loading, avoiding useEffect and useState. Wrap fetch calls in suspense with a fallback and handle errors with try-catch.

Leverage TanStack Query to fetch products with automatic caching, loading and error handling by configuring a query client provider and a useQuery with a unique key and fetch function.

Enhance a product listing by adding category filters using the fake store API. Build a three-component structure (App, products, filters) and fetch categories with useQuery.

Learn to build a dynamic category filter for products by displaying categories, rendering clickable buttons, handling loading and error states, and wiring filters to fetch products by category.

Add category, sort, and max price filters to a React app, enabling dynamic product listings with query parameters for sorting. Use previous state to preserve category while applying sort.

Extract api calls into a centralized http client and http service to boost reusability and maintainability, enable easy package replacement, and centralize error handling and product and category fetching.

Define and export custom hooks like use categories to encapsulate data fetching and reuse across components, then refactor products and categories logic to rely on them.

Improve the loading experience by implementing skeleton loading for products and filters, using a skeleton product grid and skeleton filters to maintain layout and enhance user experience.

Learn to implement client-side routing in a React app using React Router, install the library, and configure routes with a layout, header, footer, and outlet for dynamic content.

Set up the checkout route and move product pages into a dedicated pages directory, then implement header navigation with React Router to switch between product and checkout pages.

Learn to implement dynamic routing for product pages by fetching a single product using its id from a fake store API, with React Router dynamic segments and the useParams hook.

Learn to use link vs nav link in React Router for product items, route to /products/{id}, and add hover shadows and transitions; customize logo and title in index.html.

Master route handling in React Router by implementing a 404 not found page, a catch-all route, and an index route.

Navigate React apps with React Router, the industry standard. Learn about legacy hooks like useCallback and useMemo, now deprecated, and automatic optimization with React 19 DevTools.

Master state management in react, using the use state hook, for component data, and switch from prop drilling to a centralized context for a shopping cart workflow.

Create a cart context and cart provider to manage shopping cart state in a React app. Wrap routes with the provider, expose items via value, and access them through children.

Build add to cart using a cart provider and useContext API in React 19, storing product details and quantity, and update existing items by increasing quantity.

Improve user feedback by showing a cart-added notification and removing unnecessary spacing. Explore css in js with emotion and styled components to style the alert with a fade-in animation.

Create a shopping cart component using a cart context to manage items, render the cart page, and connect to a separate checkout route with a styled, tailwind-based interface.

Learn to update cart items and quantities by modifying a central cart provider, adding remove and update quantity functions, and reflecting changes in the cart user interface.

Compute the cart count by summing item quantities from the cart context and expose it with the cart total for real-time updates near the cart icon.

Persist cart state across sessions by saving items to local storage with useEffect, JSON.stringify, and restore them with JSON.parse on load to keep the cart intact.

Learn to handle forms in react 19 with form actions, build a checkout submission, and create orders via post to the cart api, returning 201 status with axios.

Create a checkout page with a credit card form and a cart summary in a responsive two-column grid, using cart context for items and total, and a handleCheckout submit handler.

Create a React cart summary component with PropTypes for items and cart total, render item title, price, and quantity, and display the cart total in a styled flex layout.

Build a checkout form component in React 19, using an onSubmit prop and PropTypes. Implement labeled name, email, and address fields in a two-column grid with a place order button.

Master handling form submissions in React 19 with form actions, manage pending state, extract form data, build and post order data via a checkout mutation.

Learn to build a checkout success page in a React 19 app, redirect after order, and reset the cart using a clear card method and React Router navigation.

Enhance the cart and checkout by rounding totals to two decimals and multiplying by item quantity, then build production and deploy the dist folder to Vercel for a live site.

Recap core React concepts: component-based structure, JSX, props, state, and the virtual Dom, plus API integration with Axios and React Query, routing, Context API, and form management.