The Modern React 18 Bootcamp - A Complete Developer Guide

Explore what React is, a free, open source front-end JavaScript library for building component-based user interfaces, used for single-page, mobile, and server-rendered apps.

Build a vanilla js counter app from zero to ten, with plus and minus buttons updating the ui and preventing out-of-range values, while wiring html, css, and js files.

Explore the frustrations of segregated web app files in React, describing how index.html, index.js, and styles.css hinder element tracing and maintenance as apps scale.

Build the same counter app with React, then compare with vanilla JS, using a vite-based setup, useState for state, and onClick for controls.

Learn to create a brand new React app with Vite, install dependencies via npm, and run a local dev server with hot reloading to build components quickly.

Explore the React project structure by examining node_modules, public and src folders, and learn how npm install resolves dependencies, JSX to HTML, and the single root element concept.

Learn how to manage state and handle events in React by building a counter with useState and onClick handlers for plus and minus buttons, updating the UI efficiently.

Build a practical shopping list app with React that adds items via an input, increments quantities on duplicates, deletes items, and checks items off to signal completion.

Build the JSX structure for a styled React app by wiring the header, main content, and shopping list, while importing external CSS and assets to apply consistent styles.

Outline and implement each function to make the app work: enable typing, add on enter, handle duplicates, delete items, toggle done, and show a completion message.

Learn how to implement two-way binding in React by syncing an input with state using useState, onChange, and controlled components, then clear the input programmatically.

Define an array state for grocery items with useState initialized empty; add items on enter as objects with name, quantity, and completed, updating immutably, validating input, and clearing the input.

Map over a grocery array to render each item as a list element with its name using JSX.

Explore why every list item needs a unique key prop to improve React rendering performance, and implement an identifier such as the item name with quantity increments to prevent duplicates.

Learn to conditionally render JSX elements based on state, using ternary operators and logical and operators to show item quantity only when greater than one.

Learn to delete an item from a React list by updating state, passing the item name via a click callback, and filtering the array to remove it.

Use useState and useEffect to manage a grocery list’s completion status. Listen to grocery items changes and update isCompleted, enabling conditional rendering of the done indicator.

Build an income and expense tracker in React, practicing state management, event handling, and rendering dynamic cards while avoiding tutorial hell.

Build a brand-new React app with Vite and construct the jsx structure, including a main container, input area, income/expense select, and a card area with a zero total display.

Learn to implement two-way binding in React by syncing input and select elements with component state using useState and onChange to update state and the UI.

Learn to simplify React forms by consolidating onchange handlers into a single handle update input function, using a unified inputs state and dynamic naming for two way binding.

Explain how to implement input validation and conditional styling in a React app, using state to track statement and amount errors and highlight borders red when invalid.

Install and import a uuid library to generate unique ids for list items, replacing index keys to avoid duplicates and improve React render performance.

Compute the running total from the statements array with useEffect and reduce, then render a color-coded total: green for income, red for expenses, black for zero.

Learn how to organize a large React app with components, including header, card list, and card components, using function-based components and imports to keep code clean, reusable, and maintainable.

Map a recipes array to render multiple card components, passing each recipe as a prop; destructure the recipe in the card and use a unique key for each item.

Explore how routing in a multi-page React app uses a base URL and paths to render UI, with static and dynamic routes and query parameters to filter data.

Compare server-side and client-side rendering in React, showing how SSR serves full HTML on load while CSR builds content in the browser; discuss initial load, navigation, cost, and SEO.

Create and render a home page on the root path, and install react-router-dom to enable routing, using a new pages folder and auto import features.

Install and configure React Router DOM to add routing in the application by creating a browser router, defining routes with createRoutesFromElements, and rendering the root path component.

Add a new about page to the app by configuring a slash about route, importing the about page component, and rendering it via a router in a single page application.

Explore nested routes to share a common app layout across pages, reducing repetition. Use a parent route with an outlet to render home and about components via React Router DOM.

Implement a persistent nav bar with link-based navigation using React Router Dom, replacing anchors to navigate between home and about without full page reload, preserving component state.

Define a dynamic recipe page by routing /recipe/{id} with React Router DOM, and extract the id from URL parameters to display the chosen recipe.

learn to use the useParams hook from react-router-dom to extract the id from route params, parse it to a number when needed, and render the corresponding recipe on the page.

Fetches data from an API, stores it in recipes state, and renders recipe cards with thumbnails, names, and topic tags, handling optional fields.

Create a custom hook to encapsulate fetch logic for recipes, enabling reuse across pages and keeping the home page lean by returning the recipes array.

Add a loading state to indicate background data fetches. Build a loading component with a gif and render it while API calls are in progress.

Handle an error state in the fetch recipes hook by capturing axios errors, displaying a user-friendly message, and resetting loading and data on new requests.

Define the search function on the home page and pass the search term to the header to trigger re-renders in React 18.

Build a recipe detail page by creating a use fetch recipe hook that calls the recipes/get more info API with a recipe id, handling loading, data, and errors.

Explore how to render icons in a React app using the react-icons library, including importing icons and using the children prop to pass icons as React nodes.

Link the use fetch hook states: data, loading, and error, so updates occur only after fetch actions, and use the useReducer hook to keep loading, data, and error consistent.

Learn to implement robust error handling by building a reusable error component, detect API data errors, display a friendly recipe not found message, and guide users back home.

Pass data from a parent to an outlet using useOutletContext, wiring ingredients and instructions components with useParams and dynamic linking in a React 18 app.

Wraps up by pulling ingredients from data.sections[0].components, destructuring from props, and passing via outlet context to render raw text ingredients for web deployment.

Build a tiny React app that uses useState to count to a first magic number five and a second to ten, with useRef reducing rerenders and updating messages.

Explore how useRef keeps a persistent value across renders and reduces unnecessary rerenders to boost performance when managing UI state like a counter.

Use the use ref hook to reference the email input, highlight and focus it when blank, and remove the border as the user types, after implementing two-way binding with useState.

Learn to use the useMemo hook to memoize expensive computations in React, recomputing only when the person state changes and keeping typing fast.

Demonstrate memoization by creating a parent and child, using state for two inputs, and wrapping the child with memo to render only when props change, improving performance in React apps.

Explore the useCallback hook while building a zoo app with a shuffle and search, and learn how memoization prevents unnecessary re-renders in the child component using an empty dependency array.