Join Brian Holt in "Complete Intro to React, v9," a beginner-friendly course that equips you with essential React skills using a first-principles approach, incorporating tools like Vite and JSX, making you job-ready in the React ecosystem.

Intro

Explore essential tools and configurations for the "Complete Intro to React v9" course by Brian Holt, including recommended Node.js version, Visual Studio Code setup with extensions, and terminal preferences for optimal React development experience. Learn about the use of tools like fnm for Node.js, Starship Prompt, MonoLisa font, and more within this comprehensive React course.

My Setup

Welcome

Learn the basics of creating a simple React app without using tools like Babel or Webpack. This tutorial guides you through setting up a project directory, writing pure JavaScript with React, and creating components to build a pizza ordering system. Ideal for beginners, this step-by-step guide by Brian Holt from the Complete Intro to React v9 course helps you understand fundamental React concepts using only essential tools.

React without a Build Step

Learn how to separate React components into distinct files and make reusable, flexible components that accept props, transforming a static app into a dynamic one. This guide provides code examples in creating a React app featuring customizable Pizza components, enhancing React development skills. Discover these strategies in Brian Holt's Complete Intro to React, ideal for budding web developers.

Components

No Frills React

Learn about npm and pnpm, two essential package managers for Node.js, as you embark on your React development journey with Brian Holt's Complete Intro to React, v9. This section guides you through setting up npm projects and understanding the differences between npm and pnpm, enhancing your knowledge of JavaScript development tools.

Learn how to maintain high code quality with Prettier by James Long, a powerful tool for consistent code formatting. Discover easy integration methods and how to use Prettier with Visual Studio Code to streamline your development process, as well as setup instructions for npm scripts in this guide from Brian Holt's Complete Intro to React course.

Code Formatting

Learn how to set up and configure ESLint with Prettier for effective JavaScript code linting in your React projects, featuring tools like ESLint's JS config and globals package, under the guidance of seasoned developer Brian Holt.

ESLint

Learn how to efficiently set up a Git repository, create a .gitignore file, and manage untracked files in your project as part of the Complete Intro to React v9 course by Brian Holt. Enhance your Git skills with practical tips, ensuring a clean and professional project environment. For more detailed instruction, explore ThePrimeagen's Git course on Frontend Masters.

Learn to set up your React project using Vite, a fast build tool preferred by the React community, with step-by-step guidance from Brian Holt. This tutorial covers the installation and configuration of Vite, React, and essential plugins to optimize your development environment.

Vite

Tools

Explore the integration of JSX in React applications with Brian Holt's "Complete Intro to React, v9" course, as it simplifies HTML tags into React.createElement calls, enhancing code readability. Learn about configuring ESLint for JSX, React components, and Vite server setup for a complete React development experience.

Learn how to create an interactive form in React with useState hooks, allowing users to add pizzas to their order in this detailed coding guide from the "Complete Intro to React, v9" course by Brian Holt. Explore concepts like controlled inputs, JSX syntax, event handling, and the importance of state management in React development. Enhance your web development skills with practical React examples and create dynamic applications effectively.

Hooks

In this section of the Complete Intro to React v9 course by Brian Holt, learn how to use the `useEffect` hook to make API requests for initializing a list of pizzas, manage UI initial load with loading states, and optimize component updates using unique keys for rendering efficiency. Enhance your React projects with best practices for asynchronous data fetching and component optimization.

Effects

Explore essential React development tools including NODE_ENV, Strict Mode, and React Dev Tools to enhance debugging, optimize performance, and maintain modern coding practices. Brian Holt's Complete Intro to React v9 offers practical insights into these tools for effective frontend development with Vite.js.

Dev Tools

Learn about creating custom hooks in React with Brian Holt's Complete Intro to React, covering how to build and integrate a custom hook for fetching pizza of the day using React hooks for effective separation and testability. Brian demonstrates building a component and using debug tools to inspect React custom hooks efficiently.

Custom Hooks

Learn how to handle user cart submissions and checkout process in React with Brian Holt's Complete Intro to React, v9. Build a shopping cart component using Order.jsx and Cart.jsx, manage cart state with hooks, and implement server-side checkout functionality efficiently. Ideal for React developers seeking practical, hands-on experience in web development.

Handling User Inputs

Learn how to manage global state in a React application by implementing a shopping cart using context. This tutorial, part of the Complete Intro to React v9 course by Brian Holt, guides you in creating reusable components and sharing state across the application without prop drilling, enhancing your React skills with practical examples.

Context

Core React Concepts

Discover how to implement routing in React using TanStack Router with insights from Brian Holt's Complete Intro to React v9. Learn about client-side focused routing solutions, file-based route generation, and lazy loading techniques to optimize your React applications.

TanStack Router

Learn how to create a past orders page in React using TanStack Query to facilitate seamless asynchronous API calls, enhancing code cleanliness and efficiency. This guide by seasoned developer Brian Holt provides detailed instructions on integrating React Query ESLint configurations and leveraging React Query Devtools for better debugging. Ideal for web developers looking to optimize React-based projects with effective data fetching techniques.

TanStack Query

Ecosystem

Learn how to implement a React modal using portals for rendering components outside the main app structure in Brian Holt's "Complete Intro to React." This guide covers use of React Query for asynchronous data management and demonstrates best practices in creating user interface elements like modals to improve web development skills. Ideal for React developers seeking practical experience with advanced rendering techniques and API integration.

Portals

Learn how to use class components and error boundaries in React development with Brian Holt's "Complete Intro to React, v9" course. Understand the transition from function components to class components for error handling and gain insights into managing API errors using techniques like `componentDidCatch`. Ideal for developers navigating legacy React codebases or dealing with API errors, this course offers practical skills to improve your React applications.

Error Boundaries

Learn how to create a contact page using TanStack Query in React with Brian Holt's Complete Intro to React, v9. Discover how to handle posts via mutations, manage uncontrolled forms, and integrate these features seamlessly into your React application.

Uncontrolled Forms

Advanced React

Learn how to set up and perform testing on React applications using Vitest, a test runner compatible with Vite's build pipeline, from Brian Holt's Complete Intro to React course. This guide provides step-by-step instructions for integrating Vitest with @testing-library/react for efficient React testing, drawing on similarities with Jasmine and Jest APIs to deliver seamless testing experiences. Ideal for React developers seeking efficient test integration, this tutorial emphasizes real-time feedback and browser-like test environments with happy-dom.

Vitest

Learn how to effectively test React components with a focus on functionality over implementation using React Testing Library, through this hands-on guide by Brian Holt. Gain insights into user-centric testing methodologies, writing bug-catching tests, and managing test lifecycle for enhanced app reliability, specifically applied to the Pizza.jsx component.

Basic React Tests

Learn how to test a Contact page in React using Vitest and vitest-fetch-mock, a tool to simplify fetch mocking. The tutorial covers setting up mocks, rendering components with React Query's QueryClientProvider, filling out form inputs, simulating user interactions, and verifying API requests, providing a comprehensive guide for beginner to job-ready React developers under guidance from Brian Holt, creator of the Complete Intro to React course, version 9.

Testing User Interaction

Learn how to test a custom React hook, usePizzaOfTheDay, by implementing a fake component and utilizing renderHook from testing-library/react. This approach ensures your hooks behave correctly, maintaining code integrity while interacting with APIs, like the example API call for "Pizza of the Day."

Testing Custom Hooks

Discover snapshot testing in React with Brian Holt's Complete Intro to React, a course offering insights into efficient testing techniques for components like Cart.jsx. Learn about the benefits and limitations of snapshot tests, how to implement them using tools like Vitest, and explore their practical applications in UI and API development. Ideal for developers looking to enhance their testing strategies in web development.

Snapshot Testing

Learn how to enhance your React test coverage with Vitest and v8 in the Complete Intro to React v9 course by Brian Holt. This guide explains setting up Chrome's built-in test coverage tool, v8, to visualize code coverage and improve your test effectiveness, with alternative support for Istanbul. Perfect for React developers aiming to optimize their testing strategies.

Learn how to use Vitest UI, an efficient tool for managing tests in your browser, by adding it to your project with simple npm commands. Enhance your React development skills by integrating browser-based testing with Vitest for convenient module graph visualization and individual test management. Ideal for developers seeking practical tools within the Complete Intro to React course by Brian Holt.

Vitest UI

Explore the emerging support for browser-based testing with Vitest, featuring Playwright integration for fast and reliable testing. Learn how to configure Vitest for both Node.js and browser environments, leveraging libraries like vitest-browser-react, and gain insights from Brian Holt on crafting effective tests for user experiences in React applications. This guide is ideal for developers keen on improving their testing setups in modern web development environments.

Browser Tests

Testing

Explore the Complete Intro to React (v9) course by Brian Holt, focusing on core React concepts and upcoming React 19 features like 'use client' and 'use server'. Gain insights into new capabilities such as putting elements in the head, preload/preconnect hints, and seamless integration of custom components in React development.

React 19

Learn how to upgrade your application to React 19 and simplify form handling in this segment of Brian Holt’s Complete Intro to React, version 9. Discover new React form actions, "use server" directives for server-side logic, and useFormData hooks to manage input states effectively. Ideal for React developers seeking practical techniques to streamline their web applications.

Form Actions

Explore React Suspense and the new 'use' hook in React 19, alongside TanStack Query integration, to manage component rendering and data loading seamlessly. Learn how to implement Suspense to improve code readability and handling of async operations in React applications, guided by seasoned developer Brian Holt.

use and Suspense

Learn about performance optimization in React with tools like useMemo and useCallback, and discover how the React Compiler can automate these optimizations for you. This guide provides practical steps for integrating React Compiler into your development workflow, ensuring improved performance with minimal effort.

React Compiler

Take the client and API server applications into production. The React client app will be hosted on Netlify. The Node.js server API will be hosted on Render.

Deploying the App

Whats Next

Congratulations on completing the Complete Intro to React v9 course by Brian Holt! You're ready to develop React applications professionally, with skills applicable to real-world tech jobs. Consider advancing your knowledge with Intermediate React v5, exploring server-side React techniques, or diving into hands-on projects to solidify your understanding.

Complete Intro to React