React - Complete Developer Course with Hands-On Projects

Build a basic calculator in a single-file React app, using simple CSS for the buttons and a few functions to power the calculations, a starting point for learning React.

Learn to set up a minimal React page with an index.html, load React via a CDN, and render hello world into a root div using React.createElement and ReactDOM.

Identify and install tools for React development, including Node.js and a code editor such as Visual Studio Code. Follow download links to set up on Windows, Mac, or Linux.

Learn to use code pen for rapid React prototyping with html, css, and js panels and a live preview, then enable babel preprocessor for jsx in a calculator project.

Explore JSX, the technique for embedding HTML in JavaScript within React components, and see how Babel transpiles it for browsers, enabling cleaner code and preventing injection attacks.

Turn a simple React example into a functional component that returns JSX and renders correctly, introducing function and arrow function styles, and emphasizing capitalized component names.

Explore why functional components power React development by analyzing an Amazon-like page. See how reusable blocks, such as boxes, sections, search bars, and calculator buttons, form a component-based app.

Learn how to pass data from a parent to a child in React using props, including primitives, functions, and objects, and render them in functional components via the props parameter.

Explore a component-based design in React, where a root app mounts in the DOM and a parent passes props to child components, while callbacks enable child-to-parent communication for events.

Build a basic calculator interface in React by creating a calculator and calc button components, passing values via props, handling class name styling with CSS grid, and adding a display.

Explore how React handles onClick events by capitalizing the second word, pass callback functions via props, and wire buttons to handle number and operator clicks in a calculator example.

Learn how to pass button values from child to parent in React using on click, props, and callback functions to build a calculator.

Learn how to implement React state with the useState hook to read and update a calculator display, initialize with zero, and trigger efficient re-renders as you press buttons.

Use the React useState hook to manage a JSON object with current and total, appending pressed digits to the display and clearing the initial zero.

Implement calculation with operator buttons in a React calculator by wiring a do calculation function to plus, minus, multiply, and divide, updating the total and display.

Debug and fix bugs in a React calculator by using debugger statements, console logs, and developer tools to trace state, prevent undefined properties, and refactor duplicates.

Build and understand a basic React calculator app by creating components, rendering them, and managing state with use state hook; explore props, callbacks, and expanding features like decimals.

Build a connect four style game in a React project with adjustable grid. Players click counters to form four in a row, and a suggest button enables a computer player.

Identify essential tools for React development, including Node.js and a code editor like Visual Studio Code, with download and platform-specific installation guidance for Mac and Windows.

Bootstrap a React app with create-react-app, start the development server, and build a basic game board component using a functional arrow-function with import/export wiring.

Create a reusable game circle React component and render 16 circles in a 4x4 grid, then implement an onClick event that triggers an alert for each click.

Pass props to child components, destructure props for concise access, and render the React children to display IDs and alternating colors.

Learn how to pass parameters to React on click handlers, including id and value, by using arrow functions to avoid immediate invocation, and include the event object for event handling.

Learn to style React components with inline styles and dynamic colors by passing multiple color props from parent to child, using camelCase CSS properties and style attributes.

Transform a rough React game board into a 4x4 grid of circles using CSS grid and inline styles, with 100px squares, 50% border radius, and centered positioning.

Create a global game CSS file to centralize styles for the game board and game circle. Import the CSS into both components and replace inline styles with CSS classes.

Compute dynamic styling in React by deriving the background color from the id with a mod two check and a ternary expression; remove the color prop to use class names.

Apply dynamic styling by switching between odd and even CSS classes to color game circles red or blue, using className, template literals, and a ternary expression.

Implement callbacks from a parent game board to a child game circle. Pass a click id back via a prop like onCircleClicked and handle it in the board.

Explore using the React useState hook to manage a 16 circle game board, tracking idle, in-progress, and finished states while updating player moves and circle colors.

Learn to manage the game board state in React by toggling between no player, player one, and player two, with dynamic class names and colors.

Initialize the game board with an init board function that sets the current player to player one and clears a 16-circle board, using map to update state without mutation.

Style the game board with a bisque background, bordered, rounded corners, and a drop shadow, and add header, footer panels showing player turns and a new game button to reset.

Learn to dynamically display current player, detect a winner on a 4x4 grid using ten winning lines, and implement an isWinner helper with a copied board to avoid mutating state.

Implements a winner-detection flow for a circle-based board game, copying the board to avoid state mutation, managing idle, playing, win, and draw states, and displaying the winner in the header.

Implement isDraw to detect a draw by counting remaining zeros on the board with reduce, update the game state to draw, and show a draw message.

Learn how the useEffect hook handles React lifecycle events: run on first load with an empty dependency array, or on updates when dependencies change.

Learn how to initialize a React game's state on mount using useEffect with an empty dependency array, set the board and starting player, and wire a new game button.

Add a suggest button to let the computer take a random move, wire up click events, and implement a helper that selects from available spots, while ensuring the game resets.

Enhance the computer player's intelligence by evaluating horizontal, vertical, and diagonal win threats to block the opponent and return the best move, with a random move fallback when needed.

Discover how to define and use CSS variables at the root to theme a game UI, adjusting colors with var(--variable) for backgrounds, panels, and players.

Use conditional rendering in React to show the new game or suggest button based on game state, and compare inline versus render buttons function approaches.

Deploy your React app for free on Netlify by building assets with npm run build, dragging the build folder into Netlify's deploy box, and testing locally with a static server.

Deploy your app to surge using npm install -g surge, point to the build folder, and publish a free URL, with Visual Studio or drag-and-drop deployment options.

Finish a functional connect four game in react while mastering useEffect, useState, callbacks, and prop deconstruction, plus dynamic styling with inline styles and classes.

Build a basic e-commerce site with a product list and simple cart features: view products, add to basket, adjust quantities, see dynamic totals, and checkout.

Bootstrap a new React project with Create React App, use JSON Server as a fake REST API, and work with a simple JSON file to create and read records.

Set up a json-server-backed mock API for a React app by creating a DB.json with categories and products, and test /db, /categories, and /products on port 3001.

Fetch JSON data with the Fetch API in a React functional component. Store results using useState, fetch categories, and render them with map while applying a unique key prop.

Paste styles to style your React app into an e-store, with a left category list, header, and footer, while the main area fetches products when a category is clicked.

Create a dedicated category component in React, render categories from a JSON server with map, passing id and title as props, and prepare for on click to fetch products.

Bind category clicks to fetch and display products in a React app by passing a click handler to category components and querying the JSON server for products by category id.

refactor fetch requests into a separate utility, use a base url, and implement async/await in useEffect to fetch categories and products with error handling.

Learn to handle fetch errors with a try-catch, return a response object with error and data, display messages, and centralize URLs via getCategories and getProducts.

Learn to handle fetch responses by checking response.status, throwing an error on non-ok results, and catching and surfacing a clear 404 when the URL is wrong.

Style the product list with a three-column CSS grid (image, features, price) and build a category product component using assets and a JSON database.

Install React Router version six, import BrowserRouter, and wrap the app to enable client-side navigation. Define routes for home, product detail, basket, and checkout.

Add unique keys to mapped product and feature elements in React, using product IDs and index-based keys for features to resolve warnings and stabilize rendering of the category products.

Learn to build a dynamic product detail page with React Router by wiring a view product button and a clickable title to route to product details using useParams and useNavigate.

Learn to read product id from the url with the useParams hook from react-router-dom, fetch product by id from a json server, and render the title using state and useEffect.

Upgrade a react product detail page by fetching product data asynchronously, showing title, image, specs, and description in a three-column layout, and styling with styled components.

Learn how styled components encapsulate CSS in React components, install and use styled components, and build dynamic, extensible styles for a product detail page.

Explore using styled components to separate CSS, create a product description that spans the full page via grid, and fix a React router layout issue to restore header and footer.

Learn how to use React's dangerouslySetInnerHTML to render HTML in product descriptions, apply bold and other markup, and understand the security risks of HTML injection.

Convert category links into react-router links and use category id routes to fetch and display products, preserving layout while refactoring the category and product components.

Refactor the site layout with a React Router layout and outlet, wrapping routes and moving category data and rendering into the layout for navigation via category links.

Refactor the home page by moving routing into the main app, using a layout component, and passing categories through props to render category views; add home and basket links.

Learn to implement a cart system in React with useContext and useReducer. Build a cart context provider, reducer, and dispatch add to cart actions using id, title, price, and quantity.

Implement and display a basket by extending the cart reducer with remove, increase, decrease, and clear actions, then expose these via the cart context and build a basket page UI.

Retrieve cart items via context and the getItems method, render each with title, quantity, and price, and show an empty cart message while preparing quantity controls and product links.

Import and render up, down, and trash icons beside basket items. Implement click handlers to adjust quantity, remove items, clear the basket, and navigate to checkout.

This video implements the basket total with a reduce-based calculation, adds home and cart icons in the header, and updates CSS to white links.

Complete the checkout by validating user input and saving the shopping basket beyond page refreshes, preserving it across sessions so customers can place orders later in a professional ecommerce site.

Learn to implement a checkout page with name, email, and billing and shipping addresses, and route to an order confirmation page with a thank-you message.

Persist your shopping cart across refreshes, cross-tab windows, and browser sessions using local storage and session storage, with JSON serialization and get and set item operations.

Create a top search bar that updates the URL with the query. Display matching results in a dedicated area using search params and a query API, with bouncing.

Learn to implement debouncing for search in a React app by delaying API calls with 500 milliseconds timeout, using useEffect and a search term state, and cleaning up with clearTimeout.

Explore form validation in a React checkout page by turning inputs into controlled components with useState, handling changes, and adding required fields, placeholders, and a submit handler.

Learn to enhance form validation in React by replacing browser validation with a custom disabled submit button and dynamic feedback, using a form invalid check and prevent default submission.

Enhance React form validation with visual feedback for required fields, using asterisks and red borders, and apply conditional styling via style components for invalid inputs.

Show how to validate forms in react using on blur to mark fields like name and email as touched, and display red error indicators for invalid inputs.

Learn routing, styled components, and shared state with context and useReducer to build an ecommerce app. Use localStorage, json-server, and fetch, with form validation and debouncing techniques.