Mastering React 19 + E-Commerce Bootcamp + Interview Q&A

Create a custom React component from scratch, using function and arrow forms, returning JSX, exporting and importing for rendering a product component in a running app.

Create a product component from scratch, exporting it and importing into app.js, using JSX to write HTML-like code inside JavaScript for reusable UI elements.

Create a product card in a React component that displays an image, product name, code, and price, styled with a card class, flex column layout, and public assets.

Learn why JSX uses className instead of class, mapping CSS classes to HTML elements, and how className interacts with the HTML class attribute to apply styles.

Define a product object and render its dynamic values in a product card using dot notation for name, image, code, and price, demonstrating real-time updates when object values change.

Display object variables and properties in JSX using curly brackets, access properties with dot notation, and convert whole objects to strings with Json.stringify for dynamic rendering.

Render multiple products by mapping an array of objects with a product list container, using a callback that receives element, index, and array, and display cards in row with flexbox.

Use the key attribute to give each item in a rendered list a unique identity and avoid console warnings. Prefer product.id or product.code as keys over array indices.

Render dynamic array values by mapping items to elements in JSX, using the callback's element and index, and assign unique keys from element attributes rather than the index.

Learn to use React fragments to group multiple JSX elements without extra DOM nodes, including fragment syntax, the fragment component, and empty tags, while handling keys in map.

Explore how React fragments group multiple elements without adding extra dom nodes. Learn three usage options - React.Fragment, a fragment component, and empty fragments - and why map requires a keyed fragment.

Master how to use default and named exports in ES6, learn when to export single versus multiple modules, and practice proper import syntax with and without curly brackets.

Explore the difference between default and named exports in ES6. Learn when to use a single default export versus multiple named exports and how to import them.

Learn the rules of JSX in React, including returning a single parent element, using fragments to avoid extra nodes, closing tags, and camelCase attributes for readability.

Master the rules of JSX: wrap multiple elements in a single parent container, and use explicit closing and self-closing tags with camel case for variables and attributes.

Assign and render JSX as variables in React by declaring them inside or outside components, wrapping multiple elements in a parent, and injecting dynamic values with curly brackets.

Learn to assign jsx to a variable and render it using curly braces in the return statement. Also render multiple jsx elements by wrapping them in a single parent element.

Learn how to pass data from a parent to a product component using props to create dynamic, reusable UI in React and render it with JSX.

Discover how props act as component parameters in React, enabling data to flow from parent to child in strings, numbers, objects, arrays, and more, with destructuring and prop drilling explained.

Pass the products array from the parent via props to make the product component dynamic. Map in the parent and pass each product object as a prop.

Add an is active boolean to each product and render the list conditionally to show active items. Use if statements, the ternary operator, and logical and in JSX.

Explore conditional rendering in React 19 by applying if statements, logical &&, and ternary operators to render components based on conditions, and return null to render nothing for inactive items.

React handles user events with a declarative approach, using camelCase onClick and a function reference (not a string) to drive interactive UI updates.

Learn how to handle user events in React, using camelCase event names and onClick, wiring click handlers with dedicated functions, and why separate logic in JSX is best avoided.

Learn to pass parameters to React onClick handlers by wrapping the function in an arrow function, preventing early invocation in JSX and logging the parameter on click.

Learn how to pass parameters to onClick in JSX without calling the function on render by returning the handler with an arrow function, and consider normal or anonymous alternatives.

Create a dynamic React employee component that displays id, name, salary, and active status from an array using props and map, converting the boolean to string in a CSS card.

Render only the employee cards with isActive true using react conditional rendering, employing the logical and operator or a ternary expression to return the JSX or null.

Create a React button that calls a factorial function with a parameter using an arrow function in onClick, computes via a for loop, and console logs 120 for 5.

Discover how state differs from a regular variable, and learn to register a variable as state so React watches it and updates the DOM.

Understand how normal JavaScript variables behave in a React component, why React relies on state for DOM updates, and when non-state variables are useful for business logic.

Learn how to create and manage state in React with the useState hook, including initial values, destructuring the state array, and using the setter to update the UI.

Differentiate a regular variable from a state variable in React, and see how useState returns a two-element array [state, setState] like const [counter, setCounter] = useState(0) to trigger re-renders.

Understand how React state acts as a per-render snapshot: setting state triggers a rerender, with each render using the current state values. Learn to use updater functions for multiple updates.

Understand how react treats state as a snapshot that updates in the next render, so multiple setter calls still yield a single output.

Use the setter's updater function to compute the next state from the previous state. This ensures updates queue correctly and demonstrates returning an incremented value with the prev naming convention.

Use an updater function when the new state depends on the previous state; it ensures consistency with multiple updates in an event, and React processes updates before the next click.

Demonstrates managing multiple states of different data types in a single component, binding product name and toggling sections with onClick handlers, showing conditional rendering and dynamic button text.

Learn to use the initializer function to set the initial state in React with useState, avoiding calls on every render and boosting performance for large arrays or expensive calculations.

Understand how the initializer function sets the initial state in react for complex calculations or large arrays, returning the value without parentheses to prevent recreation on rerenders.

Explore using arrays as state in React: initialize with empty or values, render with map, and update by spreading existing state or using an updater function, then remove elements.

Initialize an array state with the use state hook by passing an empty or filled array. Use the spread operator or updater function to preserve existing elements when updating.

Learn how to manage object state in React by initializing, updating specific properties with spread operators, and using updater functions to preserve existing fields while rendering in the interface.

Initialize a state as an object using the useState hook and update it with the spread operator to preserve existing properties and prevent full object replacement.

Initialize the state with a 100-item array using a useState initializer function, build items like item 1 to item 100, and render them in JSX with map and index keys.

Use the updater function in the setter to add and remove elements in a React state array, employing spread, length, and slice to append or trim items.

Master event handling in React by revisiting the click event, using camelCase onClick, and passing parameters with an arrow function to prevent premature calls and log results.

Explore how React's synthetic event acts as a cross-browser wrapper around native events, using e, targeting elements, accessing innerHTML, and handling clicks and form events.

Explore how React’s synthetic event wraps the native browser event, automatically passes the event object to handlers, and use e.target.innerHTML to access the clicked element’s content.

Learn to handle input events with onChange for a text box, wiring a handleChange function to log the updated value via e.target.value.

Implement a task-based input-driven UI in React by using state to store the input value and render it in an H1 as you type, leveraging the onChange event.

Learn how to handle the change of value in an input tag using the on change event, and retrieve the data from the input box with the synthetic Event.target.value.

Explore event propagation in JavaScript, including bubbling and capturing phases, as events travel from child to ancestor—using on click capture and the bubbles property to observe behavior.

Explore event bubbling in the DOM, where a click on a child triggers events on its ancestors, and learn how bubbling and capturing phases control event flow.

learn how to stop event propagation in the dom tree using the stopPropagation method to prevent bubbling to ancestor elements, and verify with isPropagationStopped for a single button click.

Use the stopPropagation method on the event object to prevent bubbling in the DOM tree and verify with e.isPropagationStopped() returning true when halted.

Prevent default form submission in React by handling the onsubmit event and calling preventDefault, keeping UI intact and data from refreshing.

Identify how submitting a form refreshes the page and clears input data, and learn to prevent that default behavior by calling the preventDefault method on the synthetic event.

Create a React form with name and email fields using separate state hooks, display typed values in real time, and show submitted data after preventing default submission.

Create a form with first name, last name, phone number, and city inputs, store each value in separate state, update on change, and render the data below on submit.

Combine multiple form fields into a single object state, initialize with name and email, render with JSON.stringify, and update via spread and a single setData using object literals.

Manage form inputs using a single object state in React, initializing with first name, last name, phone number, and city, and update it with spread syntax while rendering via JSON.stringify.

Refactor multiple form change handlers into a single dynamic keys handler that uses the event target name to update corresponding state fields, enabling concise, scalable form input management.

Learn to manage multiple input fields with one event handler by using dynamic keys from e.target.name, updating state with spread and e.target.value in ES6 computed property keys.

Implement a single event handler for all fields using dynamic keys with e.target.name and ES6 square bracket syntax, wiring name attributes like first name, last name, phone number, and city.

Master the correct way to update form fields in React by using the updater function in the setter, receiving the previous state, and spreading prev to update the object.

Learn to handle checkbox inputs in React by using a dedicated handleCheckedChange that reads e.target.checked to set boolean values, enabling multi-option selections like category filters.

Learn how to implement radio buttons in groups to allow a single selection, using the same name attribute, handling onChange events, and retrieving color values with the value property.

Create a color selection form with four radio buttons for blue, green, yellow, and red that updates a bg color state to change the page background.

Explore how to read checkbox and radio values with event.target.checked, group radio inputs with a shared name, and compare multi-select checkboxes to single-select radios.

Build a React form with name, gender radio buttons, and an I agree checkbox that enables submit; on submit, display a greeting like Hello Mr. or Miss plus the name.

Explain the onfocus event in React, how focus triggers actions, and how to pass a handler in camelCase; reference onblur, keyup, keydown, and mouse events.

Learn how the onblur event triggers when an input loses focus, using a blur handler to log blur and focus events and demonstrate the synthetic event being passed.

Master event handling in React by implementing onfocus and onblur to toggle an input's background between yellow and white using inline styles and a focus state.

Learn how on key up and on key down events detect key presses in React, using handlers to log pressed and released keys via the event's key property.

Compare on key down and on key up events to understand timing, where down intercepts before browser's default action and can repeat while held, while up fires on release.

Learn how on mouse enter and on mouse leave detect cursor entry and exit, triggering hover actions like tooltips, demonstrated with input field handlers and console messages.

Learn to build a hover tooltip for text in react by tracking a hover state with onMouseEnter and onMouseLeave, and rendering the tooltip only when hovered.

Learn how to change styling on hover in React by using onMouseEnter and onMouseLeave to toggle an isHovered state and apply conditional styles to an element.

Explore React fundamentals with conditional rendering, props, fragments, and useState, then build a single-page CRUD app to manage products with add, edit, delete, and active/inactive filters using Tailwind via CDN.

Create a react app named crud app, resolve dependency issues with force or legacy flags, install web vitals, run the project, and prepare a blank app for the next lecture.

Set up a Tailwind CSS project via CDN, then build a header with a title and add button using flexbox and Tailwind utilities for typography and layout.

Create a static product card component in a React app, showing code 001, pineapple, and price 12, with a bordered, shadowed card and edit and delete actions.

Render a dynamic product list by mapping a static product array, pass product data as props to a product card component, and display four cards per row using a grid system.

Create an add product modal on the product listing page, using state to open and close the modal, with a backdrop and centered form for product creation.

Create a product addition form with fields for product code, product name, and price, including labeled inputs, styling, and grid spacing. Prepare for product-adding functionality.

Store add product form data in a single state object, using an input change handler with dynamic keys and a submit handler that prevents default and logs the data.

Build add product functionality in a React app using a product list state, conditional no products message, and parent-to-child data flow to update the list on form submission.

Implement delete product functionality using a product code as the unique key, calling a delete handler passed via props and filtering the array to preserve immutability in React.

Implement the edit product feature by reusing the add product form, pre-filling fields with the selected product data, and opening the modal with the selected product data passed as props.

Implement edit product functionality by conditionally editing or adding, update the product list with map by product code, reset state on close, and rename model to add edit product model.

Implement active and inactive product functionality in a React e-commerce app by adding an isActive checkbox in the add/edit form, handling checked state, and rendering it in the product card.

Render active and inactive products with conditional class names and template literals to distinguish inactive items. Then filter the products in app.js to render active first and inactive second.

Understand the React component life cycle from mounting to unmounting, including render, componentDidMount, componentDidUpdate, and componentWillUnmount, and compare class components with functional components using useEffect.

Explore the mounting, updating, and unmounting phases of the React component lifecycle, including constructor, render, componentdidmount, componentdidupdate, and componentdidunmount, with api calls on mount.

Learn how the useEffect hook replaces class lifecycle methods in functional React components, handling mount, update, and unmount with a callback and an ES6 arrow function, demonstrated via console logs.

Explore the useEffect hook through a counter app, showing how it runs on state changes and how an empty dependency array makes it run only on mount.

Learn to emulate componentDidMount in a functional component with useEffect, using an empty dependency array to run once on mount, and understand that omitting it triggers runs on every render.

Explore the dependency array in useEffect, how it compares previous and current values to rerun only on changes, with examples using counter and show state.

Limit useEffect calls by specifying a dependency array that watches chosen states to prevent calls for all states, so the effect runs only when those values change.

Explore the useEffect cleanup function by handling a mousemove listener, capturing cursor coordinates, and removing the listener on unmount to prevent memory leaks.

Learn how the useEffect cleanup function removes event listeners, timers, and network requests before unmount or re-run, aligning with componentDidMount, componentDidUpdate, and componentWillUnmount in functional components.

Master the useEffect hook in React by applying top-level usage and avoiding calls inside loops or conditions, ensuring hooks run in the same order.

Learn when to use the useEffect hook in React by avoiding it for non-external side effects, as shown in filtering items without triggering unnecessary rerenders.

Understand how React strict mode runs an extra setup and cleanup cycle to stress test useEffect. Learn to implement a cleanup function, such as clearing intervals, to mirror the setup.

Practice useEffect dependencies by avoiding object or function dependencies inside the component and removing the Fetchdata function from the dependency array to prevent maximum update depth exceeded.

Learn how useEffect runs after the DOM paint and can cause UI flicker for visual effects like tooltips, and why useLayoutEffect runs before repaint to prevent flicker.

Explore how React may run effects before browser paints when triggered by interactions, and defer work until after paint with setTimeout to ensure the user interface updates before blocking tasks.

Explore why useEffect runs only on the client and how client side rendering differs from server side rendering in Next.js, including the use client directive and server components.

Explore routing as the mechanism to access multiple pages via distinct URL paths and parameters, and learn to create a React app, resolve setup hiccups, and prepare routes with Tailwind.

Create and render three routes—home, products, and about—using URL-based navigation, build components for each route, and transition to using React Router for proper routing in React.

Configure routes in a React app using React Router by wrapping the app in BrowserRouter, then define routes for home, products, and about with path and element attributes.

Wrap your app with the BrowserRouter, configure routes using Routes and Route components, set the path to /home, and render the home component.

Explore the difference between multi-page applications and single-page applications using React Router, showing how replacing anchor tags with the Link component enables navigation without page refresh via the browser router.

Explore the differences between single-page applications and multi-page applications, including how SPA loads all routes in the first Ajax call with React Router Link, versus MPA loading pages separately.

Render the home component on the root route and build a styled navigation bar with a padded gray background, shadow, and semibold fonts.

Create a dynamic products page by rendering product cards from a products array, displaying image and name with public directory assets, styled with borders, shadows, and flex layout.

Configure a not found page for invalid URLs by adding a wildcard route in react router and rendering a 404 not found component when no route matches.

Explain how the browser router matches routes against urls using the /product path and the asterisk wildcard, showing when the not found page renders.

Learn to implement nested routes for product detail pages by turning product cards into links that navigate to /products/{name}, organizing main and child routes for a store.

Explore dynamic routing with route parameters in React Router, transforming static product routes into a dynamic /product/:id path and using useParams to render specific product data.

Configure routes with dynamic parameters using a colon syntax, access them via the useParams hook, and retrieve values like id from URLs such as /product/:id.

Create a persistent layout by nesting routes and using the outlet component. Render the product details as a child of the products route so the product cards stay visible.

Wrap child routes in a parent route and render the outlet inside the parent's JSX to create a persistent common layout for nested routes using React Router.

Explore configuring nested routes in react, making the home component a layout with child routes like /products and /about, and using the index attribute to point to the parent route.

Explore how the index attribute defaults to true, causing a child root to refer to its immediate parent and navigate to the products page from the index root.

Convert the navbar into a root layout component for the app. Assign it to the parent route and render child routes with an outlet for a cleaner structure.

Learn to pass data from a parent to a child using React Router's Outlet component with the context attribute and the useOutletContext hook, including rendering a selected product's details.

Pass the selected product data via the link component's state attribute and access it in the product details component with the useLocation hook, replacing passing the entire products array.

Pass data to child routes in React Router using outlet context with useOutletContext or the link's state with useLocation, and access it via location.state.

Create a product details card in a React 19 e-commerce app by extracting the selected product from useLocation state and rendering its image, name, description, and price.

Learn to configure React routes with the useRoutes hook by building a route array with path, element, index, and nested children for navigation and not-found handling.

Learn to configure routes with the useRoutes hook by creating an array of route objects containing path, element, and optional children for nested routes, including dynamic colon id routes.

Discover how the NavLink component in React Router highlights the active page by applying an automatic active class and using the isActive flag to conditionally style links.

Explore styling the active menu link with the nav link component by applying an active CSS class or using the class name and style attributes for the is active state.

Learn how the <Navigate> component redirects invalid URLs to routes like the home page or /products, replacing not found pages with simple programmatic navigation and previewing the useNavigate hook.

Learn how to handle not found pages in React Router with the useNavigate hook to redirect to home or back to the previous page, using clean conditional rendering.

Learn programmatic navigation in react router by comparing the navigate component and the useNavigate hook, and adopt the modern useNavigate approach to redirect to the root route.

Reorganize routes to display all products on the home page and render product details as a separate page, update app.js and links, and improve the not found page.

Refresh app ui with improved product cards, borders, and neutral 50 backgrounds; resize images, adjust grid layout, and enhance product details page and descriptions for a more vibrant interface.

Explore how props pass data from a parent to child components, and how prop drilling can burden deeply nested trees, prompting global state strategies via context API.

Prop drilling passes data from a parent to deeply nested components through intermediate props, highlighting unidirectional data flow and when to use props for local state versus global state.

Learn to implement the React context API for global state management, replacing prop drilling with a context provider and consumer, and access data across components.

Explore the Context API by creating a context, supplying data via a provider, and consuming it with a consumer, including the value attribute and default value when no provider exists.

Use the useContext hook to access context values in React, replacing the consumer component with a concise syntax. Fetch data from the app context provider in components D and B.

Learn to use the useContext hook with the context API to access context data in components. It returns the context value, offering a simpler alternative to Consumer.

Create a three-component calculator interface using the Context API to manage global state, with input, calculate, and result sections styled via Tailwind CSS.

Set up and share global state in a calculator app by creating a context and a provider to pass data across three components.

Store input fields data in a global state, managing two numbers (num1 and num2) with a context handle input change. Convert inputs to numbers using parseFloat for calculation and rendering.

Build a calculator app with the context API to manage input data and a result state, implementing add, subtract, multiply, and divide and rendering the result through context.

Explore how components using the usecontext hook rerender whenever the context value changes. Apply memoization to improve performance during global state manipulation.

Nest context providers to manage global data like theme across the app. Create a theme context with a toggle to switch light and dark modes and apply conditional styles globally.

Explore the limitations of the context API for large applications and learn how Redux and Redux Toolkit provide a centralized, immutable global state with a single store, reducers, and slices.

Explore how redux provides a centralized global store to manage complex app state, contrasted with context API, and learn why redux toolkit simplifies boilerplate and improves performance through selective updates.

Explore implementing Redux with the Redux toolkit by creating a theme slice initialized to light, wiring a store, and shifting from the context API for a calculator app.

Learn to use redux toolkit to create slices that organize redux logic, defining name, initial state, and reducers with createSlice, which generates a reducer and actions in one step.

Configure the Redux Toolkit store at the index root to create a global immutable store from reducers and the theme slice, then wrap the app with the React Redux provider.

Configure the store with redux toolkit using configureStore, listing reducers, middlewares, and enhancers. Wrap the app with the provider to make the store available to all components, ideally in index.js.

Fetch the theme value from the store using the use selector hook and a selector function that returns state theme, enabling theme-based styling.

Access the global store from a component using the useSelector hook from React Redux, with a selector function that returns the global state.

Define and export a toggle theme action in the theme slice, then dispatch it with useDispatch to switch between light and dark themes, with Redux Toolkit handling immutability.

Create actions in a slice by defining reducer functions that take state and action, export them, and dispatch using useDispatch to manipulate state.

Understand immutability in actions in redux, creating a new state object instead of mutating. See IMR and the Emer library produce a new immutable state from mutating-looking code.

Learn how immutable states stay unchanged after creation and how mutable states can change, while a slice reducer uses the emer library to draft, mutate, and produce an immutable state.

Convert the calculator into a redux slice to manage input data (num1 and num2) and a result. Dispatch handle input change with the input event payloads, updating values via parseFloat.

Learn to implement arithmetic operations in redux toolkit by adding actions in the calculator slice, dispatching them with use dispatch, and selecting results with use selector.

Implement redux toolkit to share product data across routes in a React Router app, create a product slice, configure the store, and fetch data with useSelector and useParams.

Explore the HTTP request workflow in web apps, from client side to server to database, via APIs, AJAX/XHR, and the fetch API for data retrieval.

Explore how a web application uses the client, the server, and the database to process requests and responses through APIs, HTTP methods, and Ajax calls.

Learn to replace XML HTTP requests with the fetch API, configure methods and bodies, and handle asynchronous data using async/await or promise chaining with response.json.

Learn to make Ajax calls with the fetch API in JavaScript by passing a URL and an optional options object that sets the HTTP method, headers, and body.

Fetch and render users data by storing data.users in state, using useEffect to fetch once on mount, and mapping users to Tailwind-styled cards.

Learn to send a post request with the fetch API, include a request body serialized with JSON.stringify, set content-type to application/json, and handle a 201 created response.

Update user data using the fetch API with patch and put, including headers and body, and inspect the response and JSON data to confirm changes.

Explore how to delete records with Fetch API by using an ID in the URL, remove headers and body, and verify a successful 200 response.

Learn how to handle fetch API errors by simulating a 404 not found scenario, using catch and throwing error data to display an alert, and exploring try-catch as an alternative.

Learn to handle errors in JavaScript with the try catch block in an asynchronous delete user function, replacing then with await and showing errors via console and alert.