Build a Custom E-Commerce Site in React + JavaScript Basics

Learn how to use external JavaScript by placing functions in a separate file, linking it with a script tag and the src attribute for easier maintenance and faster loads.

Learn how JavaScript constants fix values like numbers and strings, see how the browser outputs results, and observe how changing a constant alters the output.

Explore how JavaScript variables act as named containers that store numbers and strings, using X, Y, and Z as examples. Learn to declare unique identifiers and output results with getElementById.

Understand the JavaScript assignment operator, where the equal sign assigns the right-hand value to the left variable. See how numbers and strings interact when concatenating in code and browser preview.

Learn how JavaScript strings store text, use single and double quotes, handle quotes inside strings, and output variables in a browser with practical examples of line breaks and apostrophes.

Learn to round decimals to the nearest integer with the Math.round function, using 15.4 and 15.6, and explore rounding down with Math.floor and rounding up with Math.ceil.

Change array elements by index to update values, such as turning the first element from Apple to Kiwi, and delete elements to create an empty space, then save and preview.

Learn how the JavaScript splice method adds multiple items to an array, selects the insert position, and controls removals, illustrated by inserting lemon and banana after orange.

Learn to sort a JavaScript array alphabetically using the sort method with a sample cars array (Volvo, Acura, Honda, Lexus), then reverse the order with the reverse method.

Explore JavaScript comparison operators, learning how equal to and not equal behave with a variable set to six, using getElementById to output true or false in the browser.

Explore how the JavaScript for-in loop traverses an object's properties, demonstrated with a person object containing first name, last name, and age, and outputs each item in a web browser.

Learn how JavaScript events drive HTML behavior, including click, mouseover, mouseout, keydown, and document load, with a button that displays the current date and time via innerHTML.

Learn to create a simple background color changer with JavaScript by selecting a random hex color from an eight-color array and applying it to the page on each refresh.

Extract fetch logic into a reusable fetcher with a base URL, import it, and fetch categories and products with async/await in a useEffect to update state and handle errors.

Improve the fetch API call by checking the response status and throwing an error for non-ok responses, such as a 404 on a wrong URL, then catch errors.

Install react router version six, import and wrap the app in the browser router, and define routes for home, checkout, basket, and product detail pages to enable client-side navigation.

Fix React key warnings when rendering product lists and category features by adding unique keys (product id or index for string features) in a custom React e-commerce site.

Create a dynamic product detail view using React Router: link product titles, implement a view product button with useNavigate to /products/:id, and define routes for basket and checkout.

Rework the product detail page into a three-column layout that displays image, title, specs, price, stock, and description using product data, and prepare styling with React styled components.

Explore how styled components encapsulate CSS inside React components, install and import the library, and build dynamic, reusable styles using props and extending styles for product detail pages.

Learn to use styled components to separate CSS from markup, create a full-width product description across a three-column grid, and fix routing to preserve header and footer layouts.

Learn how to render raw HTML in React safely with dangerouslySetInnerHTML, using a function to return { __html: ... } and understanding React's protection against HTML injection.

Implement basket functionality by pulling cart items from context, rendering them with map, linking titles to products, and adding quantity, price, and delete controls.

Implement a live basket total in a React e-commerce site by using reduce to sum price times quantity, render the total, and add header icons with home and basket links.

Learn how local storage and session storage keep a shopping cart persistent across page refreshes and tabs by serializing cart items and updating storage with setItem and getItem.

Set up a top search bar in a React app to update URL parameters and display matching products in a dedicated results area, with routing to a search page.

Learn how to validate a checkout form by turning inputs into controlled components with useState, handling onChange and onSubmit, and applying browser validation with required attributes.