Modern React For Beginners | Redux + Router

Create and organize the first React component, a navigation bar, by breaking the app into multiple components, exporting and importing the bar, and rendering it with JSX.

Style a responsive React navbar with bootstrap by wrapping the app, importing main CSS, and building a collapsible, fixed-top navigation with brand, category selector, search bar, and cart button.

Learn to build a React category selector using Bootstrap, with a dropdown and dynamic category rendering via map, including keys and mobile-friendly styling.

Build and integrate a dynamic search bar in React by creating a form with a text input, handling onChange with useState, and preventing default submit for live product searches.

Create and integrate a dedicated cart button component into the navigation bar, featuring a cart icon, a check out label, and a dynamic item badge that responds to cart length.

Learn to use props to make the navbar dynamic by passing a title property to the component and destructuring props in a functional component.

Install react router v6 and wrap the app in a browser router to enable navigation; define home, single (with id), and cart routes rendering respective components.

Create a pages folder and build three route components—home, single, and cart—for your React app. Import and render them as route elements, then test the home, single, and cart pages.

Set up the home page to render all products from a data.js array via a dedicated products component. Pass data via props and map over products to display names.

Design a functional single product page in react by routing with useParams, extracting the product id from the url, loading product data, and rendering image, name, category, and price.

Set up a no-content component for the empty cart and render 'nothing in your cart' with a 'browse products' button on the cart page.

Learn to set up navigation with the useNavigate hook in react router, routing between home, cart, and product pages using clickable elements and dynamic ids.

Build a responsive home page with a row of product cards showing images, titles, and prices, plus an add-to-cart button and navigation to the single product page.

Teaches building a single product page in a two-column layout with image, title, price, description, and add-to-cart, plus a similar products section.

Design and render the cart page by building a responsive cart layout, mapping over items, and implementing a quantity selector, cart numbers, and a cart button.

Break the cart user interface into reusable React components, creating cart item, cart numbers, and cart button components, driven by JSON data, using bootstrap flexbox for a clean layout.

Create a cart numbers component for the cart page, rendering subtotal, shipping, tax, and total rows by mapping over dynamic rows, styled with Bootstrap flex utilities and responsive layout.

Build and style a full-width cart buy button in a React app, wiring an on-click handler to trigger the buying flow while using bootstrap classes for visual emphasis.

Learn how Redux provides a global cart state and eliminates prop drilling in a React app, then install and set up Redux Toolkit to manage app data across components.

Set up a Redux store and slices using Redux Toolkit, wrap the app in a provider, and configure reducers for products and cart to enable global state management.

Configure the Redux Toolkit store with a product slice and provider as a single source of truth, then use the useSelector hook to obtain products from search for rendering.

Learn to manage category state with Redux by sourcing categories from data and setting a default 'all' category. Use useSelector to drive a dynamic category selector.

Learn to manage a single page state with redux by selecting a product and its four similar products, initialize from the store, and render dynamic descriptions using lorem ipsum.

introduces a search term state in the product slice and binds the nav search input to the redux store, enabling dispatch-driven reducers to filter and order products.

Dispatch actions to update the Redux store, manage the search term with set search term, and reflect changes in the search bar and product list using useDispatch and useSelector.

Create two-way data binding between the search bar and the redux store search term, dispatch actions on input, and rank products by string similarity on name and category.

Implement category selector functionality by dispatching a set selected category action on mouse enter to update the product slice and filter products via the Redux state.

Explore how to build a single page view with redux and router, using useParams and useEffect to fetch a product by id and compute similar products.

Finish by cleaning reducers and refining search reset logic so products update correctly when categories or search terms change. Use dispatch and useSelector to manage products and selected category.

Implement a cart slice in Redux Toolkit to track cart items and totals (subtotal, shipping, tax, total) and wire add-to-cart and remove-from-cart actions for checkout.

Learn how to implement add to cart functionality in a Redux-based React app by wiring a product button to dispatch cart actions, pass product props, and track item quantity.

Implement remove from cart in a React Redux app by conditionally rendering the remove button when the item is in the cart and dispatching the remove from cart action.

learn to build a simple custom condition component for cleaner conditional rendering in React, using test, success, and fail props, and apply it to cart actions.

Implement an increment item quantity reducer for the cart using Redux actions and dispatch. Update cart item quantities by mapping items and applying the payload, then filter zeros.

Learn how to calculate cart numbers in a Redux-powered shopping cart by deriving subtotal, shipping, tax, and total from cart items and quantities using useSelector and useEffect.

Finalize and implement the price component to render all prices with a dollar sign and two decimals across product and cart views, preparing deployment.

Fix the price component by ensuring no whitespace on scroll, and automatically scroll to the top on page changes using React Router's useLocation and useEffect, addressing the dispatch dependency warning.

Finish the navbar by conditionally rendering the category selector and search bar on the home route with use location, and update the cart button to reflect cart items via Redux.

Refine the react app by fixing alt attributes, trimming long descriptions, implementing a no-content component, adding default navbar props, and refactoring cart and product components for maintainability before deployment.

Deploy a React app to production by building a production build and deploying static assets, while implementing a simple cart and buy-now flow and ensuring client-side routing with redirects.