Complete React, Next.js & TypeScript Projects Course 2025

Set up your development environment for React, with the extra tooling beyond vanilla JS, and launch your project in lightning speed once the setup is complete.

Learn why a browser is essential for web projects, how Chrome is optional, and how default presets cause inputs to look slightly different across browsers.

Explore using Visual Studio Code as the standard text editor, with tips to speed up development, maintain near-default configurations, and see how extensions fit—refer to the vs-code-setup-2022 repo.

Discover how the terminal lets you communicate with your computer using simple commands like cd and tools like Create React App, via the integrated terminal in VS Code.

Install Node.js, the cross-platform JavaScript runtime, and verify your installation with node --version. Learn why LTS versions offer greater stability for building a fast, scalable React app in this course.

Spin up your first React app using Create React App with npx, learn npm, start the dev server to view changes on localhost:3000, and note Vite as an alternative.

Cover React fundamentals after the install, guiding learners to the fundamentals directory's README in the GitHub repo for topic coverage and independent learning.

Understand the Create React App folder structure, including node_modules, public and src, how the root div in index.html renders the app, and how package.json and npm start manage dependencies.

Remove boilerplate by rebuilding from scratch, delete the source folder, create a new source with index.js, and learn how shortcuts like toggle sidebar speed up development in visual studio code.

Learn to create your first React component as a function returning JSX, export it, and render into the root with ReactDOM createRoot using ES6 modules.

Learn to configure extensions and settings in VS Code to speed up React development by enabling auto rename tag, highlight matching tag, prettier formatting, Emmet for React, and ES7 snippets.

Explore how React creates JSX under the hood and why using JSX is easier than manual React.createElement for building components, with div and heading 2 as examples.

Master JSX rules by returning a single parent element, using semantic wrappers or fragments, and applying camelCase attributes and self-closing tags, with formatting guidance from Prettier.

Nest components in React by building greeting, person, and message components and rendering them inside a parent app div, using both implicit and explicit returns with curly braces.

Install the react developer tools extension from the Chrome Web Store and use the components tab to inspect your app’s component structure, enabling easier debugging for large React projects.

Create a first React project by building Book and BookList components with image, title, and author, render multiple books, and refactor toward a single reusable Book component.

Create and import index.css in a react project, apply a reset and typography, and build a responsive book list with card styles and a three-column layout at 768px.

Learn how to handle images in a React project, using external urls or local assets in the public or source folders, and understand asset serving and optimization.

learn to apply CSS in JSX using the style attribute and a JavaScript object, including capitalizing hyphenated properties and defining the object outside the component.

Explore using JavaScript in JSX with dynamic variables like title and author, and render expressions inside curly braces. Learn about expressions versus statements and get ready for props in React.

Learn how to use props to pass data into React components, including author, title, and image, and render dynamic book items by accessing props and handling missing props.

Explore building two book objects as props, with author, title, and image, then render them on screen and compare static setup with a future dynamic list.

Examine multiple approaches to accessing props in a component, including destructuring in vanilla JS and in function parameters, and learn to choose based on preference.

Discover the children prop in React, a special prop that renders content between component tags. See how to access and render it, and note its role in using context API.

Master rendering lists in React by using map to iterate an array of items, handle objects versus strings, and wrap results in elements to avoid render errors.

Iterate over the books array with map to render a Book component for each item, destructuring image, title, and author to pass as props and display on screen.

Learn to fix key prop warnings by providing a unique key for each list item in React, using IDs or other unique values, and avoid using indexes as keys.

Explore two ways to pass data in React: pass the entire object as props or use the spread operator to forward all properties, with a preference for the spread approach.

Learn how to handle events in React by wiring elements with onClick, onChange, and onSubmit, using a callback function and event object to respond to user actions.

Explore how React handles form events by accessing the event object in callbacks, using event.target.name and event.target.value to capture input data, and preventing default form submissions with event.preventDefault.

Learn how to submit HTML forms by using a submit button or a button with on click, wiring on submit with prevent default for reliable submission when pressing enter.

Learn how to pass anonymous arrow functions as callbacks in React, comparing direct arrow functions versus function references, and how they handle events and input values with minimal code.

Explore how React components are independent by default, enabling local event handling with onClick and a display title function, while contrasting with vanilla JS’s manual element targeting.

Explore how data flows in React by passing props down from parent to child, understand prop drilling through nested components, and learn alternatives like Context API and Redux.

Explore implementing a getBook function in a React app using find to match books by id, log the result, and invoke it from a child via a button.

Fix a bug in a React, Next.js and TypeScript project by wiring getBook, using array.find to match an id, and preventing immediate invocation with onClick.

Fix the bug by passing a function reference (or an anonymous wrapper) to fetch a book by id in a React list, avoiding immediate invocation and ensuring correct item retrieval.

Explore how ES6 modules organize a React app by separating data and components with named and default exports, using import statements to keep code scalable and maintainable.

Learn to set up local images in the src folder, import them as assets with ES6 modules, and leverage React's build-time optimization to deliver faster, production-ready apps.

Execute the numbers challenge by displaying a one-based position for each book in a list using the index plus one, with a number span next to the author.

Build a title over a books list in React, using a parent to wrap adjacent elements. Update the public index.html title to best sellers, and center and capitalize the heading.

Create a production-ready React application by running npm run build to generate a build folder with static HTML, CSS, and JavaScript assets for deployment on any hosting provider.

Deploy your React project by uploading the build folder to Netlify and publishing the live site, then adjust the site name. Custom domains aren't covered in this course.

Learn to convert HTML and CSS projects into React and become fluent in data-driven iteration, using copied assets to focus on React topics in a tour landing page project.

Grab the repository assets, download the zip, unzip the repo on your machine, and then continue with the videos.

Set up a new React app with npx create-react-app, name it backroads-app, install dependencies with npm install, and start the dev server on localhost 3000 using the backroads HTML project.

Explore the Create React App boilerplate and understand index.js, app.js, and global styles. Learn about strict mode, non-scoped CSS, and approaches like CSS in JS to manage component styles.

Structure your React project by migrating assets, CSS, images, and the index.html into App.js, convert to JSX with className, and integrate font awesome for a localhost 3000 preview.

Split the app into a components folder by creating navbar, hero, about, services, tours, and footer components, moving sections from app.js to improve manageability and enable auto imports.

Develop a navbar component by importing logo.svg and replacing static paths with a dynamic React import, ensuring the logo renders correctly on both large and small screens.

Learn how to implement smooth scroll using HTML and CSS, linking nav and footer to sections with #id anchors, enabling scroll-behavior: smooth and scroll-margin-top four rems to account for navigation.

Replace hard-coded navigation with a data-driven approach by exporting a pageLinks array and iterating in the navbar and footer. Create data.js with id, href, and text, and render links dynamically.

Transform hard-coded social links into a data-driven array and render them by mapping over socialLinks in the navbar, importing the data and using Font Awesome icons as links.

Build the hero and about components, optionally adjust the hero text, fix the background images by correcting the CSS path, and import and display the about image for both layouts.

Create a reusable title component that accepts title and subtitle props to replace hard-coded text across about, services, and tours, using global CSS and auto import for consistency.

Refactor the services section into a dynamic, data-driven component using a services array with id, icon, title, and text, then render with map.

Build a dynamic tours section in react by importing tour data and mapping over it to render image, date, title, info, location, duration, and cost.

Implement a reusable footer component in React by mapping pageLinks and socialLinks, applying dynamic data updates across the footer, and displaying the current year with JavaScript getFullYear.

Learn how to structure page links as reusable components with PageLinks, handling navbar and footer CSS differences via props like parentClass and itemClass, and weighing the trade-offs of composition.

Refactor by creating four new components—service, tour, social link, and page link—pass data via props, manage keys, and adapt classes for navbar and footer.

Set up continuous deployment from a GitHub repository to Netlify, including git initialization, committing, linking the repo, and configuring the build command npm run build and the publish directory build.

Explore continuous deployment benefits, including not keeping the project locally and automatic builds on pushes to GitHub with Netlify, plus easy rollback if issues arise.

Demonstrate how Netlify treats warnings as errors, causing builds to fail, and implement a fix by renaming the local build script and using a separate local-build command for local development.

Switch to Vite for faster React development and a better dev experience out of the box. Learn how Vite differs from Create React App and supports environments like Next.js.

Visit the Vite docs and scaffold a React template with npm create vite@latest. Install dependencies with npm install, run the dev server with npm run dev, and view at localhost:5173.

Introduce advanced React topics, including hooks, conditional rendering, data fetching, forms, and the Context API, with practical challenges to apply concepts in your own apps.

Download the assets from the GitHub repo's advanced React folder, set up the project, then npm install and run npm run dev on localhost 5173.

Explore building with a traditional Vite app, remove strict mode, and use starter and final folders across tutorials from useState to useReducer, with hands-on challenges.

Learn why the useState hook is essential in React by building a counter displayed in JSX, with a button that increments and triggers a re-render.

Learn the useState hook in React, import patterns, default values, and array destructuring to manage state, trigger re-renders, and preserve values across renders.

Learn how the initial render (mounting) happens when the app loads, how re-renders occur with state, props, or a parent re-render, and the general rules of hooks.

Learn the general rules of React hooks: start with use, invoke inside the component body, avoid conditional calls, keep a consistent order, and note that state updates are not immediate.

Learn to set up a useState array from imported data, render a live list, and add functions to clear all items or remove a single item.

Learn to manage a React useState array by removing all items or a single item with the filter method. Create clear all and remove item buttons that trigger a re-render.

Decide when to apply useState to lists by evaluating potential changes, and adopt state as a common practice for future edits, even if the data currently remains static.

Learn to set up useState with an object to manage name, age, and hobby, render them, and update all three values with a button that changes from Peter to John.

Show how auto batching in React 18 groups multiple state updates into a single re-render, even with several handlers updating one state value.

Discover how to refactor multiple useState values into one object, and learn to update nested properties safely with spread copying while avoiding overwriting the whole state.

Understand the useState set function gotcha: updates aren’t synchronous, so logging after setValue shows the old value; the lesson demonstrates the fix and its best use case.

Use the function form of the setter to access the current state, compute the new value, and return it to update state reliably.

Explore how setTimeout with useState can miss latest state, and implement a functional update to ensure the state increments correctly with each button click.

Explore how useEffect controls code execution in React by examining renders, state changes, and functions inside a component, and learn to avoid infinite loops.

learn how useEffect in React runs a callback after renders, with an optional dependency array to run on initial render, and how to handle async data fetching using internal functions.

Understand how to use multiple useEffect hooks in a single component, configure separate dependency arrays for each value, and trigger effects on mount or when values change.

Fetch github users using useEffect and the fetch API, initialize state, and render profiles with links and images, with guidance on dependencies and logging.

Execute a useEffect to fetch GitHub users with async/await, handle errors with try/catch, and map each user (avatar_url, login, html_url) into a list using id as the key.

Explore conditional rendering techniques using a toggle component, and postpone the useEffect cleanup function for later.

Explore conditional rendering in React by implementing multiple returns in function components. Learn to use isLoading with useState and useEffect, including simulated data fetch with setTimeout.

Explore fetching data with useEffect and multiple returns by setting up a user state, fetching from a URL, handling async logic with try/catch, and logging the results.

Master fetch data with three states: loading, error, and success, using isLoading and isError booleans to render loading or error before returning data (avatar, name, company, bio) with inline styles.

Explore fetch error handling in a React app by checking response.ok and managing loading and error states. Learn how fetch differs from axios when status codes like 404 occur.

Learn how destructuring user properties in JSX adds clarity, and why the order matters to avoid destructuring from null before loading or error checks.

Explore where to place the fetchUser function relative to useEffect and how to pass it as a parameter to avoid dependency issues. Learn why moving it outside can cause an infinite loop on initial render and how ESLint rules differ between Vite and Create React App, with a hint about useCallback later.

Learn the rules of React hooks, including not calling useState or useEffect inside conditions or after early returns, and keep hooks in the same order for reliable behavior.

Master how falsy and truthy values influence conditions in JavaScript and use short circuit evaluation with and/or operators, then apply these patterns to React components.

Explore short-circuit evaluation in React by building falsy and truthy state values and applying or and and operators in JSX to conditionally render text.

Master short-circuit techniques in React by using or and and operators to render defaults or conditionally display elements or components with API data, and apply not and ternary logic.

Explore how to use the ternary operator for conditional rendering in JSX, toggling between edit and add labels and displaying user-specific content or login prompts.

Learn to toggle a boolean showAlert with useState, using a button to conditionally render an alert component (alert and alert-danger) and explore a concise one-line not-operator solution.

Implement a user challenge in React by managing a user state with useState, and render a login or logout interface via the ternary operator.

Explore how the useEffect cleanup function works with conditional rendering, showing that initial renders can reoccur on mount and unmount when a component toggles.

Learn how useEffect runs on mount and how to use a cleanup function to stop a setInterval and unsubscribe event listeners when a component unmounts.

Learn how to use the useEffect hook to attach a window scroll event listener in React, and implement cleanup with removeEventListener to prevent multiple listeners and leaks.

Explore use effect alternatives from the React docs, and consider libraries like React Query for data fetching, caching, and synchronization to keep code readable and efficient.

Explore ways to structure a React project by organizing each component into its own folder with an index.jsx, improving navigation and scalable imports.

Set up named exports by creating an index jsx in a pages folder to export Home and About, simplifying imports and supporting scalable React Router usage.

Export a group of React components by creating an example folder. Add two components and an index file that re-exports them, plus show code spell checker and glean extension.

Learn to leverage JavaScript to handle missing data by using nested properties and optional chaining, building a list component that renders names and images from a data array.

Learn to build a dynamic list in React by mapping a people array, using keys, extracting a person component, and rendering name, nickname, and image URL with nested data.

Learn to handle missing data in React components using default values and optional chaining. Implement fallback images and URL access to build robust UI with JavaScript.

learn to set up a styled React form with labels and inputs, using controlled inputs and a submit button with classes like form and form-input.

Learn to implement controlled inputs in React by managing name and email with use state, wiring value and on change, and handling form submission (prevent default) to access state.

Create a controlled name input, handle form submission to add a user to a data-driven list, render the users, and optionally remove them.

Manage a controlled name input and a users array with useState, handle form submission (preventDefault) to validate input, create a new user with Date.now id, and update the list.

Learn to implement a remove user feature by wiring a button with onClick, using filter to exclude a matching id, and updating the user list with the new array.

Learn how to manage multiple form inputs with a single state object in React, using dynamic keys and a single handleChange function. Update properties by name and log on submit.

Learn how to implement a checkbox input in a React form, manage boolean state with useState, and use checked instead of value on change handler to update shipping.

Learn to build a dynamic select input in React by rendering options from a frameworks list, wiring the selected value with useState and an onChange handler.

Explore the Form Data API as an alternative to uncontrolled inputs, showing how to use form data, event.currentTarget, and Object.fromEntries to build a data object from multiple fields.

Learn how the useRef hook preserves values between renders, accesses dom nodes via current, and supports two setup methods for uncontrolled inputs without triggering re-renders.

Learn how to use useRef to track isMounted.current flag to skip actions on the initial render and run on subsequent changes, with input focus via refContainer.

Learn to build reusable custom hooks in React by creating a useToggle hook that abstracts toggle state management, enforces hook rules, and enables cross-project reuse.

Create a reusable data-fetching hook in React by extracting isLoading, isError, and user state into useFetchPerson that accepts a URL, then use it to fetch a GitHub user.

Explore how to build a generic custom hook useFetch that handles any data type, renaming fetchUser to fetchData and returning data and setData for flexible fetching.

Explore the context api by building a three-level navbar (Navbar, NavLinks, UserContainer), pass a user state and logout function down, and implement conditional login messaging.

Explore prop drilling through a nested React component setup with Context API, managing user state and logout, and rendering with optional chaining and conditional UI.

Learn how to solve prop drilling with React Context API by creating a NavbarContext, wrapping with a provider, and using useContext in UserContainer to access user and logout without props.

learn to create a custom hook useAppContext that wraps useContext(NavbarContext) to access global context across components, simplifying imports and usage.

Set up a global context in React by creating GlobalContext with createContext, wrapping the app in GlobalContext.Provider (to provide children), and accessing shared state with a useGlobalContext hook using useContext.

Explore the useReducer hook as a middle ground between useState and a full state library, using dispatch, reducer, and actions to manage complex React state with less boilerplate.

Explore useReducer by enhancing a starter app that uses useState to display and manage a list of people, adding reset and clear functionalities with conditional buttons.

Set up useReducer by defining a reducer function and a default state, then access the state object like state.people while dispatching actions to update via the reducer.

Learn how to use a reducer in a redux-light setup by dispatching actions like clearList, handling action types, and returning a new state with updated data.

Learn action conventions with string constants for clear list, reset list, and remove item, and manage default state in the reducer by returning state or throwing on no match.

Implement a reset list using a dispatch and a reset_list action in the user reducer. Replace the empty return with data so clicking reset restores the original data array.

Implement the remove item functionality by dispatching a remove item action with a payload containing the id, and update the state by filtering out the targeted person.

Organize useReducer logic by splitting actions and reducer into separate files, exporting actions, importing in both useReducer and reducer, and maintaining data access for robust state management.

Explore testing and improving React app performance with techniques for larger apps, noting React's default speed and using simple examples for clarity.

Explore why React component re-renders happen as state changes (count) and how a parent re-render triggers child renders in a people list, plus why useEffect doesn't stop rerenders.

Explore how to use React Dev Tools to profile and measure performance, observe component re-renders, and distinguish development and production behavior with highlighted rendering insights.

Lower the state by moving the state and button to a separate counter component, creating counter.jsx and importing it to reduce re-renders; verify with dev tools profiling.

Move the name state into a separate Form.jsx component to reduce re-renders while typing. Pass addPerson as a prop and manage state with useState to update the list on submit.

Learn how to prevent unnecessary re-renders with React.memo by memoizing a list component, so it re-renders only when its props change, while the parent updates.

Discover how a remove person function and id-based filtering affect memoized components, exposing function creation on each render and how a callback hook fixes excessive re-renders.

Use the useCallback hook to memorize the remove person function, controlling re-renders with a dependency array so it updates when the people array changes.

Discover a use case for the useCallback hook, stabilizing fetchData to avoid re-creation and an infinite loop in useEffect, so it runs once on mount with a dependency array.

Compare useMemo with useCallback and see how useMemo caches a slow function's result to run once on initial render, helping debounce functionality and improve performance during input updates.

Master the use transition hook to make heavy computations less urgent, preserving input responsiveness while background work renders thousands of items; use startTransition and isPending to show a loading state.

Explore code splitting in React with Suspense and lazy loading to progressively load the app. Learn how to use fallback and on demand imports for better performance.

Choose from three project approaches: follow small-project steps, tackle steps before each video, or build and recreate later. Emphasize React logic, keep CSS minimal, and push throwaway projects to GitHub.

Navigate the repository to access the React course projects and choose a starter vs final. Install dependencies with npm and run the Vite dev server, using assets and optional css.

Access the read-only Figma file for each project to pull css details like element width and height, background color, and margins and padding to quickly set up layouts.

Set up the birthday buddy project from the starter, install dependencies, and run the dev server to view a list of people with image, name, and age, plus clear list.

Focus on building the Birthday Buddy import list by using useState to hold imported data and rendering the array of objects (id, name, age, image) with a clear list function.

Render the birthday list by creating a list and person component, map over the people array, display each person's image, name, and age with a key based on id.

Add a clear list button that, when clicked, calls set people with an empty array to remove all items from the list.

Explore optional css for the birthday buddy project, override global styles, center content with flex, and build a two-column grid for image and info with border radius and shadows.

Fetch tours from the API, display them, and remove tours; expand to read details or hide by default. Set up the project and run the dev server on port 5173.

Create three components for tours, tour, and loading, and fetch tours from my own api. Use isLoading and useEffect to manage loading and log the results.

Fetch tours and show a loading state. Render each tour as a card by mapping over data and passing id, name, image, info, and price to the tour component.

Implement a remove tour feature by wiring a button to filter the tours array by id, update the state, and pass removeTour through app, tours, and tour components.

Implement a read more toggle for tour descriptions using a useState value and the substring method to show a fixed character limit, with a button to reveal the rest.

Learn how to re-fetch tours on demand, show a no tours left state with a refresh button, and manage isLoading while triggering fetch on navigation or button click.

Implement a css driven loading spinner and a responsive tours grid with border radius, box shadow, top-right tour price, and media queries at 768px to switch columns.

Set up the reviews project in VS Code, install dependencies, and run the dev server to display a single person at a time with options to randomize or navigate.

Explore the reviews data array, import it into app.jsx, and set up a useState index to show one person at a time with their name, job, image, and text.

Install and use the react-icons library in a React project, import an icon from its library, render it as a component, and style it with a class and font size.

Render the first person review by assembling a main article with an image, quote icon, and author, job, and info sections, while importing chevron icons and applying css styling.

Learn to implement prev and next navigation in a React app by wiring up placeholder functions, managing an index state, and handling edge cases when no matching item exists.

Identify and fix a bug by wrapping out-of-bounds indices in the people array with a simple check and the modulos operator. Introduce a reusable checkNumber function to handle bounds.

Create a random person feature by generating a random index with Math.random and Math.floor, using the array length, and a surprise me button with setIndex and checkNumber for safety.

Learn how to use the modulus operator to compute wrap-around indices for review items. Implement an alternative approach with Alternative.jsx that cycles through reviews using length and modulus.

Learn optional css styling for the reviews component: center the layout, create a circular avatar with a decorative circle, position a quote icon, and add hover effects and responsive width.

Build an accordion-style questions component that toggles the description, mirroring behavior, and set up by renaming the starter to Accordion Starter and running npm install and npm run dev.

Import data, initialize questions state with useState, and render a list by mapping data to Questions and SingleQuestion components displaying title and info.

Explore how to toggle an answer panel in a React component by binding a boolean state to visibility using the and operator, then switch icons with a ternary on click.

Implement an alternative setup in a React course to display one question at a time by introducing an active ID state and a toggleQuestion handler passed down to the questions.

build a responsive questions card by centering a white container with shadows, styling the header and a circular primary button using flex layouts and precise spacing.

Build a menu with item display and category filter buttons that show matching items or all items. Set up the Menu Starter with npm install and npm run dev.

Create a reusable title component in React by building Title.jsx that accepts a text prop (default: title) and renders an underline, enabling reuse across projects.

Explore the menu data, initialize state with useState to hold menuItems, and render each item by mapping over data to show image, title, price, and description using public assets.

Derive unique categories from a list of items using a Set, convert to an array with spread or Array.from, and render an all option plus category buttons to filter items.

Iterate over the categories array and render each as a button using a categories component, passing down the categories prop and keying by category, preparing for a future filter function.

Learn to implement a category filter for a menu by wiring a filter function, passing the category via onClick, and handling the all case to display all items.

Learn to style a responsive menu with CSS, using a flex button container and a center-aligned grid that becomes multi-column at larger sizes, with spacing, borders, typography, and CSS variables.

Set up the tabs project from a starter, install dependencies, and run the dev server. Fetch jobs from an API and display one job at a time.

Fetch a JSON array of jobs from the API, manage loading with isLoading and jobs state, and render the job list after useEffect triggers on initial load.

Create a job display in React by building a JobInfo component, passing a jobs array, and extracting title, company, and dates, while a separate Duties component renders the duties array.

Iterate over the duties array to render each item with a Font Awesome icon and a paragraph, assigning a unique id via uuid version 4 instead of the index.

Create a btnContainer component that maps over jobs to render a company button for each item, using item.id as the key and item.company as the label.

Manage the currentItem state and update it with setCurrentItem when a button is clicked, then pass both to the button container to render the active styling for the current item.

Code the tabs with CSS for a responsive button container and hover effects. Use grid and flex to switch to a two-column layout at 992px for job details and information.

Set up the slider project with the 07 starter, then display a looping list of people navigable with buttons. Emphasize a css-driven styling approach before JavaScript.

Create a React carousel structure by importing data arrays, building a carousel with state, rendering slides from short list, and wiring previous and next buttons with icons.

Learn css-driven slider styling by configuring the slider container, absolute slides, and prev and next buttons, with typography, borders, shadows, transitions, and responsive tweaks.

Develop the slider initial logic by moving slides with translateX, using overflow hidden, and applying dynamic inline styles based on slide index for a React carousel.

Build a React slider that uses state to track the current item, enables prev/next navigation with wrap-around, and hides inactive slides with opacity and visibility.

Enable auto play for the slider using useEffect and setInterval to advance the next slide every two seconds, with a cleanup function to clear the interval.

Explore using the React Slick library to build a slider with quick setup and features. Compare it to building a custom slider to avoid reinventing the wheel.

Install react slick and its CSS, import the slider in a new component, and follow the docs’ example to configure settings like dots, infinite, speed, slidesToShow, and slidesToScroll.

Create a data-driven slider with React Slick, mapping over data to render slides, override library CSS for centering, and enable fade, autoplay, and pause on hover.

Set up the lorem ipsum generator project, installing starter code and running npm install and npm run dev to generate dummy lorem text inspired by hipster ipsum.

Set up a React app to generate lorem ipsum paragraphs by managing two state values: count and text, with a number input limited to 1–8. Build a form that selects the paragraph count, loads eight text strings from data.js, and prepares for onSubmit handling in the next steps.

Master handling React form submissions with a handleSubmit function and preventDefault. Learn to use parseInt on a number input, slice data based on count, and render results with text.map.

Learn to generate unique IDs with the nanoid library, install and import nanoid, and use it for React keys in the project, then run the dev server.

Set up a project CSS layout with section-center, centered heading, and a responsive lorem-form using flexbox, typography adjustments, and spacing.

Build a color generator app that outputs 10 lighter and 10 darker tints from selected color. Use a color input and defaults, and integrate react-toastify and values.js, plus clipboard API.

Build a color generator app in app.jsx with three components, form, color list, and single color, using a controlled form with useState and a submit handler.

Set up an HTML color input in a form, bind its value to state, and handle onChange to update both the input and button background in real time.

Set up the values.js library in a React project to generate color palettes, import the library, and use the all method to produce 10 shades and tints.

Render a dynamic color list by mapping colors to SingleColor components within a ColorList, using nanoid keys, and displaying each color’s hex and weight with an inline background.

Set up react-toastify to add alerts or toasts in your app. Place the ToastContainer in the root, in main.jsx or App.jsx, and position top-center for error and success toasts.

Connect the color form to the app JSX to update the colors list on submit. Use try/catch with a toast for invalid colors and copy the color value to clipboard.

Enroll in this lecture to implement a clipboard copy feature for a color generator using the browser's navigator.clipboard API, including async saveToClipboard, availability checks, and toast feedback.

Build a responsive color generator UI with css. Apply grid layouts for single and two-column views, style text and color inputs, and manage color containers and color-light states.

Set up the Grocery Bud project. Add, delete, and complete items, and save data to browser local storage using a unique ID library.

Learn to manage a grocery list by building a form component, setting up state for items, handling input changes, and creating a submit handler to add items.

Define the item structure (id, name, completed) and implement addItem to append new items with completed false. Use nanoid for IDs, validate input, and update the items state for rendering.

Render a grocery list in React by mapping items to a list and passing data to a single item component, with a remove-item setup and prep for a checkbox.

Create the grocery single item component with a checkbox, item name, and delete button. Manage local completion state with useState, toggling a line-through on check.

Remove an item by filtering the items array with the itemId and updating state with setItems. Attach onClick to call removeItem(item.id) and show adding more items while toggling completed locally.

Master saving an array of objects to browser local storage with setItem and getItem, using JSON stringify/parse for a list key and loading it on start.

Global setup enables editing grocery items by toggling the completed flag in a centralized list and persisting changes to local storage using editItem and itemID.

Learn how to integrate React Toastify in a grocery app, including setup, toast container placement, and success messages for add and remove item, plus validation feedback for empty submissions.

Learn practical CSS styling for Grocery Bud, including building a centered section, responsive grid layouts for form controls, item rows, hover shadows, and Toastify text capitalization.

Build a responsive navigation bar with animated nav links using the useRef hook. Set up the starter, install dependencies, and run dev, with CSS or readme-provided code to skip typing.

Explore how to organize navigation data in a single data file with links and social arrays, import and reuse icons from react-icons, and drive the navbar across the project.

Build a responsive navbar in React by creating a Navbar component, importing useState, FaBars, logo.svg, and mapping the links array to toggle visibility with showLinks.

Set up the navbar with a white background, box-shadow, and a flex header using space-between to position items on large screens, with hover effects for links and display block.

Apply a fixed-height navbar approach: hide the links with height zero and overflow hidden, then reveal via a 160px height class for a smooth transition.

Use useRef to measure the navbar links with getBoundingClientRect and apply a dynamic inline height to show or hide links with a smooth transition.

Uncover why a links container is necessary for navbar functionality, then implement a direct links approach, toggle show links by adjusting height, and apply styles for responsive navigation.

Create a responsive navbar by adding social links and CSS for big screens, using a nav-center with social-icons and a links-container, and toggle behavior for small screens.

Build a modal and a sidebar using the context api to toggle open and close, use css for show and hide effects, npm install and npm run dev setup.

Create and render three components—home, modal, and sidebar—using a context API to display the modal and sidebar from the home component, with data.jsx providing icons and arrays for the interface.

Create and use a global app context to manage sidebar and modal states with boolean values, and expose open and close functions via a provider and a custom hook.

Builds the home component with two buttons—a fixed sidebar toggle with a FaBars icon and a show modal button—wired to openSidebar and openModal.

Build a modal component in React with a full-screen overlay and centered content, controlled via global context isModalOpen and closeModal, using a FaTimes button and show/hide transitions.

Create a toggleable sidebar component by wiring isSidebarOpen and closeSidebar, render a logo SVG, a close button with FaTimes, and iterate over links and social icons from data.

Master sidebar css with a grid layout and toggle functionality. Copy index.css, style header, links, icons, and social links, and apply a 400px width on screens via media screen rules.

Toggle the sidebar using translateX, starting hidden at -100% and revealing at 0% with a show sidebar class controlled by isSidebarOpen and a ternary operator.

Learn how to set up the Strapi submenus project from the starter, run npm install and npm run dev, and verify the Strapi Starter appears in the browser before continuing.

Explore a data model where each page is an object with id and name, plus a nested links array; learn to iterate top-level and nested structures, and use Nano ID.

Create and export a React app context with isSidebarOpen, add openSidebar and closeSidebar helpers, build a useGlobalContext hook with useContext, and test the setup in app.jsx.

Explore building a responsive navbar, hero, sidebar, and submenu in a Strapi-based React project, with small and big screen layouts, toggle interactions, and component wiring.

Style a responsive navbar using flexbox, center content, and apply fluid width with CSS variables. Enhance the logo and toggle button with hover effects and transitions.

Build a responsive hero component with JSX and CSS, including a centered heading and paragraph, and apply grid layout, clamp typography, and a 992px breakpoint for mobile to desktop.

Build a dynamic sidebar with pages and sublinks using jsx, a close button with FaTimes from react-icons, and a global context to toggle visibility and render nested links.

Create a full screen fixed sidebar with index.css, including layout, toggle logic, and responsive behavior. Style the container, close button, link grid, and show-sidebar transitions.

Create NavLinks component in the navbar by mapping sublinks data to render each page as a nav-link button, then hide it on screens and show at 992 with hover submenu.

Use global context to manage a pageId that updates on hover with onMouseEnter, enabling dynamic rendering of a page's sub menu based on the hovered link.

Build a Strapi submenu using JSX and hover-driven pageId tracking. Find the current page from sublinks and render its links in a responsive, two-column grid when needed.

Hide the submenu by default and reveal at 992px with a fixed, centered panel using rotateX and perspective, centered by left 50% and translateX(-50%).

Learn to hide the sub-menu on hover by using a global hover handler, setPageId(null), and event.target class checks, while adjusting CSS for nav center and align-self stretch.

Hide the submenu on mouse leave using a submenu ref, and set page ID to null, then use get bounding client rect with client X/Y.

Build a cart app with useReducer to increase, decrease, remove, and clear items, fetch data, and work with an initial cart structure in a ready-made setup.

Set up a React cart with hardcoded items, build the cart container and item components, and wire up useReducer and global context groundwork for dynamic cart interactions.

Create a cart global context with createContext and AppProvider, expose a greeting via useState, and access it later through a useGlobalContext hook.

Set up useReducer in a context to manage cart state with an initial object including loading and an empty cart, then export and import the reducer in separate files.

Explore setting up cart actions for a useReducer workflow: create actions.js constants (CLEAR_CART, REMOVE, INCREASE, DECREASE, LOADING, DISPLAY_ITEMS), and import them into context and reducer to streamline state management.

Evaluate cart data structures, comparing arrays, objects, and maps for item storage and updates. Discover why arrays excel at display while maps offer fast lookups, guiding a shift to maps.

Explore the map data structure in JavaScript, a built-in key-value store where keys and values can be any data type and lookups are fast, with useful manipulation methods.

Switch the cart to a map-based context, convert cart entries with array.from, and render items by mapping over the array using item IDs as keys for efficient updates.

Learn to implement clear cart with dispatch and a reducer, removing all cart items from the map and updating the UI to show an empty cart.

Build remove item functionality in a cart using context and dispatch. Pass the item id as payload to the reducer and use a Map delete to immutably update state.

Learn to implement cart item amount increment in a React context by wiring an increase action through dispatch, itemId handling, and reducer updates.

Implement cart item decrease in context and reducer by switching from plus to minus, delete the item when the amount falls below one, and update the cart state accordingly.

Create getTotals utility to compute cart totals by iterating over cart values with a for of loop, summing amounts for totalAmount and calculating totalCost with price, then format with toFixed.

Fetch data from the cart api using useReducer in a global context, show a loading spinner, and log the retrieved json before dispatching actions to load and display items.

Dispatch loading at fetch start to show loading state, then dispatch display items with cart. Build a new Map from fetched cart and set loading to false to display items.

Style the cart interface with CSS, using CSS variables, flexbox, and grid to build a responsive navbar, cart, and cart-item layouts with a standout total badge.

Learn how to fetch and send data with axios to streamline server workflows beyond the fetch API, and note that axios is not React-specific and works with many frameworks.

Follow along by using the starter in the 05-axios-tutorial directory; if you already downloaded the course repo, proceed, otherwise re-download or fetch via git to obtain the starter.

Set up a React project using Create React App, install dependencies with npm install and npm start, and explore Axios boilerplates, requests, and interceptors.

Learn to make a get request with axios in a React project using useEffect and async/await to fetch data from a URL and handle data and error.response.

Use axios to make a get request with a headers config, including accept: application/json, then fetch and display a joke from the DadJoke API and handle errors.

Learn how to send post requests with axios by passing the url and data, optionally including headers, and handle responses and errors.

Create a global axios instance to automatically add an accept: application/json header to all requests, and fix the latest axios issue by omitting the common property.

Create a custom Axios instance to centralize baseURL and headers, use authFetch for protected requests, and compare with global defaults for multiple server calls.

Use axios interceptors to transform outgoing requests and handle responses with custom logic. Apply a custom instance, log activity, and centralize error handling for statuses like 401 and 404.

Learn how to manage remote data on a server from a React application, using HTTP methods (get, post, patch, delete) and React Query, with testing via a VS Code extension.

Follow along by locating the star in the 06 react-query directory to set up the starter. If the folder isn’t visible, re-download the repo or use Git commands.

Set up a local back-end server for a React project, install dependencies, run on port 5000, and use the /api/tasks endpoints to add, edit, and delete tasks.

Set up the front-end tasks app with a Vite boilerplate, install dependencies, and run the dev server to move from local data to remote server data, building stateful items.

Create an axios custom instance with a base url to simplify rest api calls to /api/tasks on localhost, then export it as customFetch for reuse.

Discover http methods for server interactions, including get, post, patch, and delete for crud operations; compare axios and fetch handling and browser default get behavior.

Master API documentation to navigate URLs and HTTP methods for server actions, including get all tasks, create a task with a title, patch is done, and delete a task.

Fetch data from the server and keep the app state in sync with React Query, featuring caching, background refetching, and error handling, plus guidance on version 4 and docs.

Install and set up react query version 4.28 by running npm i @tanstack/react-query, then wrap app in QueryClientProvider with a new QueryClient instance to enable requests across the project.

set up your first react query request with useQuery, using a queryKey and a promise-returning queryFunction from axios, and inspect data, isLoading, and isError across components.

Learn to render data by handling isLoading, displaying a loading state, accessing data.data and task list, and choosing between React Query and Axios fetch.

Explore error handling in a React Query and Axios setup using isError and error.message. Learn to display generic errors or access server responses, including error.response.data and 404 messages.

Install Thunder Client, create a new request, choose the method (GET, POST, PUT, DELETE), set the URL and (optionally) add auth or a body to test endpoints and speed development.

Create a task on the server via a post to api/tasks with a lowercase title in the body, and test it using Thunder Client.

Set up create task functionality using useMutation from React Query, routing a post request to the server with a task title, and manage loading state to disable the submit button.

Use useMutation to post data, handle errors with onError and toast messages, including AxiosError, and invalidate the tasks query to refresh the list without a browser refresh.

Implement edit task functionality using a patch request with data and id, updating isDone for a task and invalidating queries to refresh the task list.

Set up a dynamic edit task mutation using useMutation with editTask, sending taskId and a toggled isDone to the server, then re-fetch tasks via queryClient.invalidateQueries for up-to-date results.

Implement delete task functionality using a delete request with a task ID, handle 200 responses, disable the loading state during the request, and refetch the latest tasks.

Refactor the code by moving fetching and mutations into custom hooks (useFetchTasks, useEditTask, useDeleteTask, useCreateTask) using useQuery and useMutation, with query invalidation and input clearing.

Explore alternative server setup by persisting front-end task data to the local file system using a local-server script, ensuring data survives restarts without a database.

Build an Unsplash images app to search the Unsplash API, add dark mode, set up environment variables in VTAP, and use React Query cache and dev tools with API documentation.

Download the starter assets from the 07-unsplash-images directory in the main course repo to follow along. Re-download the repo if you can't locate the directory.

Explore the final and starter directories, then begin work in starter; install dependencies and run the vite dev server with npm install and npm run dev, following the readme.

Create and render three components: ThemeToggle, SearchForm, and Gallery in App.jsx, while setting up a global AppContext with AppProvider and useGlobalContext to test a greeting.

Implement a dark theme toggle in a React app using context and useState, with CSS-driven background and text changes, and sun/moon icons from React icons Bootstrap library.

Toggle the dark theme by adding or removing the dark-theme class on the body using classList.toggle based on isDarkTheme, then implement the corresponding CSS in index.css.

Set up a dark theme in CSS using CSS variables for background and text colors, toggle a dark theme class on the body, and add transitions for smooth color changes.

Demonstrate how to detect a user’s prefers-color-scheme: dark with a CSS media query and apply a default dark theme, with testing in Firefox and Chrome.

Builds a functional search form in a React project, handling submit with preventDefault, reading a not controlled input via event.target.elements, and logging the search value.

Explore how to access photos from the Unsplash API to fetch high-quality stock images you can use for free and learn the simple email-based registration.

Register for the Unsplash API by following the README or main site steps, provide the required information, confirm your account, and access your dashboard to start using the API.

Sign up, register a new app, and construct an Unsplash api search url using the api key, client id, and query parameters to fetch photos, then test with thunder client.

Set up React Query in your app by wrapping the entire application with a QueryClientProvider, creating a QueryClient, and wiring a gallery query, while removing the API key.

Set up a gallery query by defining a URL variable, using use query with a query key, fetch data with axios, then render images by iterating the data.

Render images by handling loading, error, and empty results states, and map over image results to display each image with src, key, alt description, and an image-container grid.

Install the tanstack react query devtools package, then import the devtools component in main.jsx and set initial open to true to reveal a development-only window with query insights.

Connect the search form to the gallery via a global searchTerm state and a setSearchTerm updater. Build a dynamic query using searchTerm and test updates, noting a React Query gotcha.

Enhance image fetching with React Query by including the search term in the query key to trigger refetches on input changes, leveraging cache for unchanged results.

Detect dark mode with window.matchMedia('(prefers-color-scheme: dark)') and apply it by toggling a body class. Use useEffect and local storage to initialize and persist the theme, with a toggle button.

Persist the darkTheme value in local storage with localStorage.setItem, then retrieve it with localStorage.getItem, treat it as a string, and use storedDarkMode to determine the initial theme.

Create a .env file in the project route (not in source) for VITE_ keys to hide sensitive values, add it to .gitignore, restart the dev server, and access via import.meta.env.

Deploy the project to Netlify and configure Vite environment variables, including setting up a new GitHub repo and environment variables, then fix first deploy issues by triggering a second deployment.

Build and style a responsive gallery in a React, Next.js project using CSS variables, dark mode toggles, a search form, and grid layouts.