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

Learn JavaScript, a client-side language that adds interactivity to HTML and CSS. See examples like form validation, character counting, terms checkbox, alerts, and a tic tac toe game, browser support.

Place JavaScript in the head to ensure functions load before the page; learn event-driven calls, reading form values, and a dog-year calculation via a click event.

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.

Explore JavaScript data output methods, including document.write and window.alert, with an example that displays a simple calculation in the page and in a pop-up.

Master the innerHTML technique to output data into HTML elements, using getElementById to display a simple calculation result and update values to render different outputs.

Explore how JavaScript comments explain code, using single-line // and multi-line /* */ formats, and observe their effect on execution and readability in a sample HTML file.

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.

Explore JavaScript arithmetic operations using constants and variables to add, subtract, and multiply numbers with live examples that output values like 150.

Explore JavaScript arithmetic operations, including division, increment and decrement, declare variables, and render results to the browser output.

Explore how JavaScript operator precedence dictates the order of computations in arithmetic expressions, using brackets, exponents, division, multiplication, addition, and subtraction, demonstrated by (50+200) multiplied by 3 equals 750.

Explore how JavaScript variables hold numbers, strings, arrays, and objects. See how properties define object data and how arrays store multiple values.

Explore JavaScript objects with a car example, a single object containing properties like name, model, weight, and color, accessed via dot notation and output with getElementById.

Showcases outputting multiple object properties in line, with a person object having first name, last name, age, and eye colour. Build a sentence using getElementById, e.g., John has blue eyes.

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.

Determine a string's length using the built-in length property, set the inner HTML to text.length, and preview in a browser to see the value 26.

Escape quotes in JavaScript strings with the backslash escape character to correctly display quotations, then preview the browser to see players surrounded by quotes.

Explore generating random numbers with JavaScript using the Math.random function to produce values between zero and one, outputting them with getElementById and previewing in the browser.

Apply the math min and math max functions to find the lowest and highest values in a list of numbers, and verify outputs of -150 and 600 in the browser.

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.

JavaScript arrays store multiple values in a single variable, using a six-item fruits array accessed by index numbers starting at zero and the length property.

Learn how to output array values using the array's toString method and customize separators with join, such as using an asterisk with surrounding spaces.

Learn how to manage arrays in a React-based e-commerce project using pop, push, shift, and unshift through mango and cherry examples.

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.

Join the girls and boys arrays with concat, store in combined, and output the results using get element by ID in a browser preview.

Explore JavaScript conditional statements, including if, else if, and else, by building a score-to-grade script that outputs grades and handles out-of-range errors.

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.

Evaluate JavaScript booleans by testing values with the Boolean function. See that numbers (including 82.6 and -10) and strings are true, while zero is false, with results shown using getElementById.

Master for loops by executing a code block repeatedly, outputting values 0 to 10 on lines in an HTML document; adjust the start value or max to 3 or 20.

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.

Discover how the while loop runs code while a condition holds, outputting a variable from 0 up to 20 and incrementing by one.

Learn how the do while loop, a variation of the while loop, executes the code block at least once and repeats while AI is less than ten.

Explore how JavaScript break and continue statements control loops: break stops a for loop when i reaches three, while continue skips an iteration and the loop runs through nine.

Explore how JavaScript functions define reusable blocks of code with parameters, return values, and arguments, as shown by multiplying 8 and 2 to 16 and reusing with 6 and 5.

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.

In this course, you will develop a JavaScript and CSS photo gallery with thumbnails and a main preview that changes on hover, plus styling for borders and colors.

Apply the stylesheet to build a centered page with a container, a header, a preview image area, and a thumbnails gallery that updates the main preview on hover.

Identify the foundational skills for building a React-based e-commerce site, including JavaScript basics (arrow functions, destructuring), HTML, CSS (classes, selectors), and a strong desire to learn.

Explore React as a lightweight JavaScript library for building user interfaces, maintained by Facebook, with a virtual DOM and no built-in state management.

Create a basic hello world in react by wiring index.html, importing react and react-dom, and rendering a hello element into a root div.

Identify essential tools to start React development, including Node.js and editors like Visual Studio Code or Sublime, available on Windows, Mac, and Linux.

Use CodePen to build a React calculator, with HTML, CSS, and JS panes and a live preview; enable Babel to render JSX and separate HTML from JS.

Explore how JSX allows embedding HTML inside JavaScript to write cleaner React components, supported by Babel translation to browser-compatible code, with expressions in curly braces and protection against injection attacks.

Build a basic e-commerce site in React with a product list, view products, add to basket, dynamic totals, edit quantities, delete items, clear basket, and a simple checkout.

Bootstrap a new react project with create react app to scaffold a mini ecommerce store. Set up a fake rest API with json-server and prepare initial data.

Launch JSON server to provide a mock rest API for a React project. Create a db.json with categories and products, run on port 3001, and test endpoints.

Fetch API pulls JSON data from a local server, stores it with useState, and binds it to a React app using useEffect.

Style the e-commerce store with the provided css, create a header, left category nav, main area, and footer, and fetch categories on page load.

Learn to modularize a React e-commerce site by building a category component, rendering categories from a mock JSON server with map, handling props, and exploring an alternative for loop approach.

Make categories clickable and fetch products by category from a JSON server. Pass callbacks to child components and manage categories and products with basic loading and error handling.

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.

Handle fetch errors in a React e-commerce app by using try-catch, returning a response object with data and error message, and exposing getCategories and getProducts helpers.

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.

Style the product list with CSS grid to three columns—image, details with dimensions, capacity and features, and a price panel—using assets and an updated database for richer product data.

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.

Read the product id from the url using useParams, fetch the product by id from a json server, and render the product title with React state.

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.

Refactor the categories into links that route to categories/:id, fetch products for each category with the API, and render them while preserving the left and gray layout.

Refactor the e-commerce site by introducing a layout with an outlet to render routed content, convert categories to links, and centralize category rendering and data fetching.

Refactor the site architecture by moving routing from the index file to the main app, pass categories to the layout, and render category pages along with a new home route.

Introduce React context to share cart state across components by creating a cart context and provider, and wrapping the app to implement a single source of truth for cart items.

Learn how to wire a cart context in React using useContext and useReducer to add products to the cart, manage initial state, and dispatch actions to update cart items.

Extend a shopping cart in React by enhancing the cart reducer and context with add, remove, increase, decrease, and clear methods, and build a basket page with checkout and total.

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

Import up, down, and trash icons, set their width, wire quantity controls (increase, decrease, remove) with item id, enable checkout navigation, and add clear basket and header icons.

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.

Complete the checkout by enabling user input with validation and implement persistent shopping basket data across page refreshes and browser sessions.

Learn to refresh the basket automatically by using local state and context in React, update cart items (increase, decrease, remove) with immutable array patterns.

Implement the order confirmation by linking checkout to a new order confirmation page and routing there, while passing name, email, and billing and shipping details to confirm the order.

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.

Implement debouncing for the search box by delaying API calls with a 500ms timeout using useEffect, search term state, and cleanup, reducing unnecessary network requests.

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.

Explore React form validation by enhancing required fields, preventing default submit, and disabling the confirm button until name, email, and shipping address are filled, with visual feedback.

Enhance form validation in React by adding visual feedback for required fields with asterisks and red borders via styled components; implement conditional styling using the invalid prop and error checks.

Build a React ecommerce site using styled components, context, and useReducer for shared state, and persist the basket with local storage. Mock APIs with JSON server and fetch data.