Complete Bootstrap & React Bootcamp with Hands-On Projects

Develop a foundation in JavaScript (arrow functions and destructuring), CSS basics (classes and selectors), and HTML, plus a strong desire to learn, to start learning React.

React is a minimal, unopinionated JavaScript library for building user interfaces, maintained by Facebook, enabling fast rendering with a virtual DOM for website development.

Launch the first project by building a very basic calculator in a single React file, with minimal CSS and simple functions to perform basic operations like 2+3=5 and 2*3+5=11.

Build a minimal hello world in a brand new index html using React and React DOM to render to the root div in the browser.

Identify the essential tools to start React development, including Node.js and a free cross-platform code editor like Visual Studio Code. Install Node.js and the editor to begin.

Use Code Pen to build a calculator with HTML, CSS, and JS and view live updates. Enable the Babel JavaScript preprocessor to render Hello React in real time.

Learn how JSX embeds HTML inside JavaScript to build clean, reactive components, and how Babel translates modern features for browser compatibility with curly braces for expressions.

Turn a simple React example into a functional component that returns JSX for your projects, like a calculator, and learn to render with uppercase names and arrow- or function-style components.

Explore functional components as the building blocks of a site, illustrated by Amazon-like sections, product cards, a search bar, and a calculator with a master component and button subcomponents.

Explore props in React by passing information from a parent component to a child, using the props parameter, and rendering values like name and age with proper curly brace syntax.

Build a component tree with a root app and reusable child components, passing data from parent to child via props in React and enabling the child to trigger parent callbacks.

Build a basic calculator UI in React by creating a calculator component and reusable calc button, passing values via props, using CSS grid, and displaying a simple total.

Learn to wire onClick events in React by capitalizing the second word and routing clicks through a function prop; implement handle number and operator callbacks and test with alerts.

Learn how to pass a button's value upward through callback functions in React by sending props from parent to child and invoking the callback on click.

Learn how to implement react state using the usestate hook, read and update the display state, and render updates efficiently when buttons are pressed in a calculator example.

Build a React calculator display with useState, storing current and total in a JSON object, concatenating digits, clearing the initial zero, and preparing for operator input.

Learn to implement calculator operations in a React app by wiring an operator handler to a calculation function, handling plus, minus, multiply, divide, updating display, with clear and equals.

Debug a React calculator using debugger statements, console logs, and dev tools; fix by preserving pre-op in state and reusing handleOperator for equals to achieve a working calculator.

Build and design components, learn how react renders and communicates via props and callback functions, and manage data with the use state hook as you expand a basic calculator project.

Create a connect-four style game in React with a grid-based board, click-to-place pieces (no gravity), and two-player or human-vs-computer play, featuring an adjust button for computer moves.

Install Node.js and a code editor to begin development; use Visual Studio Code, the most popular editor, available on Mac OS, Windows, and other platforms.

Learn to bootstrap a React app with create-react-app, install dependencies, and run a development server with npm start, then build a minimal GameBoard component and integrate it into the project.

Build a 4x4 game board in React by creating a reusable game circle component, rendering 16 circles, and wiring an onClick event that displays an alert saying one click.

Learn to identify component instances by passing an id prop, destructure props for clean access, and render nested content with React children in a game circle component.

Learn to pass parameters to React on click handlers, including id, value, and the event object from parent components, using arrow functions to avoid immediate invocation.

Learn how to apply inline styling in React by passing color properties from parent to child, using style objects with camelCase properties, and dynamically setting background colors.

Transform a rough color grid into a polished 4x4 game board using css grid in React, turning inline styles into a style object and shaping squares into circles.

Create a global CSS file, migrate the game board and game circle styles from inline objects to CSS classes, and import CSS into the React components.

In React, implement dynamic styling by deriving a tile's color from its id (odd vs even via mod two) and a ternary expression, removing color props and using inline styles.

Apply dynamic classes for odd and even states by replacing inline styles with CSS classes, using template literals and a ternary to assign the appropriate class on the game circle.

Pass the on circle clicked callback from the game board to the game circle, so a click notifies the parent with the circle id and logs the event.

Master state management in React by using the use state hook on a 16-element array initialized to zeros, updating to 1 or 2 as players click circles.

Create a render circle helper, manage player state, and apply classes as players toggle, while avoiding array mutation by copying with the spread operator and debugging with React diagnostic tools.

Initialize a 16-circle game board with a helper function, render the circles via a loop, and update the board immutably using map over the previous state to avoid direct mutation.

Add a unique key prop to each rendered circle so React can distinguish list items and remove the 'each child in a list should have a unique key' warning.

Style the game board by adding a header and footer information panel, color backgrounds, borders, and shadows, and update text for player turns with a new game button.

Enable dynamic turn text and add a winner detector for a four by four grid, checking horizontal, vertical, and diagonal win lines with a helper.

Implement winner detection, manage game states (idle, playing, win, draw), and update the header to show who won or whose turn it is, with guards against invalid moves.

Implement a draw detection function that counts zeros on the game board with reduce, determines a draw, updates the game state, and shows 'game is a draw'.

Explore React lifecycle events using the useEffect hook, showing mounting with an empty dependency array and updating on state or prop changes through dependencies.

Initialize the game on mount with useEffect, set the board to empty circles and current player to one, and wire the new game button to reset state.

Implement a suggest button and computer player to allow playing against the computer, wire up events, and use a simple random-move ai.

This lecture improves the computer player's intelligence by blocking four-in-a-row threats across horizontal, vertical, and diagonal patterns using a get_position function and move checks.

Define root-level CSS variables to theme colors across the page. Apply them with var(--name) to backgrounds, panels, and the board, enabling quick color changes and themes.

Implement conditional rendering to display either the suggest button during play or the new game button in the footer depending on the game state.

Deploy your React app to Netlify for free by building the project, then upload the build folder via deploy manually, test with serve -s, and preview it on localhost 3000.

Deploy your bootstrap and react project for free with surge by installing surge globally, running surge with your build folder, and using the default domain to publish.

Build a functional connect-style game in a React project, mastering hooks such as useEffect and useState, component lifecycle concepts, callbacks, props deconstruction, and dynamic inline styles and classes.

Build a bare-bones e-commerce site with a product list and dynamic shopping cart. Add to basket, adjust quantities with live totals, delete items, and complete a simple checkout.

Bootstraps a React app with Create React App to build a mini ecommerce store, and explores REST APIs using JSON Server with a JSON file as a fake backend.

Boot up a JSON server as a mock REST API for your React app, creating a db.json with categories and products, then test endpoints on port 3001.

Use the fetch API to pull JSON data from a local JSON server, store it with useState, and render categories by mapping over results with unique keys.

Style the store by applying provided CSS to create a left categories list, a header, a main area, and a footer, while wiring category clicks to fetch products.

Refactor the category list into a dedicated React category component, map categories with keys, and destructure props to render a robust, error-protected category display from a JSON server.

Bind category clicks to fetch and display products by category ID, passing a callback to child components, and render matching product titles with basic error handling and loading states.

Refactor your React app by extracting the fetch calls into a reusable fetcher utility, using a base URL for categories and products, and handling async data with useEffect and async/await.

Learn to handle fetch API errors with try/catch, returning an error-ready response, displaying the message in the UI, and refactoring to getCategories and getProducts for centralized URLs.

Add a try-catch around the fetch response, check response.status for 404, and throw an error when not ok. This helps distinguish a bad URL from a non-responsive server.

Style the product list with a three-column css grid in React, using assets and a json database to render images, features, and prices.

Install React Router version six, wrap the app in a BrowserRouter, and define routes for home, basket, checkout, and product details to enable client-side navigation.

Fix React key warnings by adding unique keys to mapped lists in categories and products, using product IDs and feature indexes to ensure unique keys.

Learn to implement dynamic product routes with React Router, link product titles, and use the navigate and useParams hooks to open a product detail page from listings.

Read the product ID from the URL with useParams, fetch the product by ID from a JSON server, and display its title on the detail page.

Improve a product detail page by transforming a basic layout into a three-column design, displaying image, description, specs, and price, and introduce styled components for scalable styling.

Learn to use styled components to encapsulate CSS in React components, install the library, and create custom styles like product title and image container.

Create and apply styled components to separate styles from markup, implement a product description that spans the full width, and fix the router layout to preserve header and footer.

Explore how to render HTML in React using dangerously set in HTML, including creating a markup function and preventing HTML injection while controlling bold and styled text.

Convert the category list into links that use React Router to fetch and display products for each category, routing with category id and updating the category component to render products.

Refactor the site layout with a layout component and outlet, move product rendering into a category component that uses useEffect to pull products, and convert categories into router links.

Refactor the home page by moving routing from the index file to the app and layout components, and pass categories via props to render the home content.

Learn how to use React context to share cart state across components by creating a cart context provider and wrapping the app, enabling future add to basket actions.

Implement a cart with react context and use reducer by creating a cart context provider, adding an add-to-cart function, and wiring a reducer to manage cart items and quantities.

Extend the cart reducer with remove, increase quantity, decrease quantity, and clear methods, wire them through context, and render a basket page with items, total, and checkout.

Implement a functional basket by retrieving cart items from context, rendering each with title, quantity, and price, and linking to products for checkout.

Import and render the home, up, down, and trash icons, and place them in the basket. Wire click events to checkout, clear the basket, and adjust item quantities.

Implement a running total for the basket using reduce on price times quantity. Improve the header with home and cart icons in a three column grid and white links.

Finish the checkout by adding input fields and validation, and implement persistent shopping cart storage so the basket survives page refreshes and browser restarts, mirroring a professional ecommerce experience.

Implement a responsive shopping cart by syncing local state with context and auto-refreshing the basket. Update quantities and remove items using immutable array patterns with React hooks.

Fix common react reducer mistakes by updating the basket with a new array using filter, then build a checkout page and an order confirmation route with navigate.

Learn how to persist a shopping cart using local storage and session storage, enabling cart items to survive page refreshes, tabs, and browser restarts.

Implement a top search bar using React Router's useSearchParams to show search results as you type, with a debounced API call to reduce requests.

Learn how to implement debouncing in a search feature by delaying API calls with a 500 ms timeout, using a search term state and useEffect, and cleaning up timers.

Learn to validate a React checkout form by turning inputs into controlled components with form state and change handlers, wrapping in a form, and using required fields with placeholders.

Learn to validate React forms beyond the required attribute by disabling the submit button until name, email, and shipping address are filled, using a form invalid check and visual feedback.

Learn to add visual feedback for React forms by marking required fields with asterisks and turning borders red for invalid inputs, applying to name, email, and shipping address.

Learn to use on blur to mark fields as touched, manage a touched state for name, email, and shipping address, and show a red validation rectangle when errors exist.

Expand your React skills by building an ecommerce store using styled components, context for shared state, and hooks like use reducer, plus mock API with json server.