Complete Intro to React, v8

Brian Holt

Brian Holt

SQLite Cloud
5 hours, 50 minutes CC
Complete Intro to React, v8

Course Description

Learn to build real-world applications using modern React 18.x+! Much more than an intro, you’ll start from the ground up, getting to using the latest features in React, including hooks, effects, context, and portals. Throughout the course, you’ll piece together tools from the entire React ecosystem (like Vite, ESLint, TailwindCSS, React Router, and React Query) to build a complete application to browse adoptable pets!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: December 5, 2022

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 15 minutes
  • Introduction
    Brian Holt introduces the course by walking through the layout of the course website, who this course is for, and some set-up notes. Where to file issues, some personal background information, and what is new from version 7 are also discussed in this segment.

Setup & Tooling

Section Duration: 1 hour, 15 minutes
  • Pure React & createElement
    Brian walks through setting up a base for the React application, including the index.html and style.css files. How to use React.createElement to create and render HTML elements and React components is also covered in this segment.
  • Pure React Q&A
    Brian answers students' questions regarding if const is always used when creating components and what React.createRoot does. A brief discussion regarding the benefits of using React is also provided in this segment.
  • Pure React Components
    Brian demonstrates breaking up code into React components for more compartmentalized organization and how to insert data from props. React utilizes a one-way data flow from parent to child, simplifying debugging by narrowing down where the introduction of the error occurred.
  • npm & Prettier Setup
    Brian walks through setting up npm for managing code dependencies and using the VS Code extension Prettier for formatting code automatically. Students' questions regarding if the npm and prettier setup have to be done for every project and how to debug prettier are also covered in this segment.
  • ESLint & Git Setup
    Brian demonstrates setting up ESLint to assist in catching JavaScript errors and Git for managing the project's GitHub repository. The parser and env variables help tell ESlint what kind of globals will be available in the app's working environment.
  • Vite Setup
    Brian walks through setting up the build tool Vite which will separate files for code organization, stitch them together, including third-party libraries from npm, and optimize the code by minifying and other optimization techniques.

Core React Concepts

Section Duration: 1 hour, 50 minutes

React Capabilities

Section Duration: 1 hour, 22 minutes

Special Case React Tools

Section Duration: 1 hour, 2 minutes
  • Error Boundaries
    Brian demonstrates creating reusable error boundaries and using a feature called componentDidCatch to handle the caught errors. A component can only catch errors in its children and cannot catch its own errors.
  • Modals with Portals
    Brian walks through creating a confirm adoption modal using a separate mounting point known as a portal. The app keeps its normal mount point and can also have different content in a separate mount point (like a modal or a contextual nav bar) directly from a component.
  • Implementing Modals with Portals
    Brian live codes implementing the previously built modal to render on the pet details page. Despite rendering to a different part of the DOM the modal is still referencing the state in Details.jsx.
  • Context
    Brian discusses Context as an application-level state that primarily replaces Redux and should be used cautiously to maintain an explicit data flow. The React BrowserRouter and QueryClient utilize context under the hood.
  • Context Q&A
    Brian answers student questions regarding if the context is read-only for the child components, if the context should be separated into smaller contexts or kept as one large context shared throughout the app, and where setAdoptedPet is coming from.

Wrapping Up

Section Duration: 4 minutes
  • Wrapping Up
    Brian wraps up the course by providing some suggestions on where to go for continued learning, improvements that could be added to the application for additional practice, and a real pet adoption API to implement.
Just finished the phenomenal "Complete Intro to React, v8" course by the amazing Brian Holt on Frontend Masters! 🚀 The course provided comprehensive insights, practical examples, and expert guidance.
Shah Hassan

Shah Hassan

shahhassancs

I just completed "Complete Intro to React, v8" by Brian Holt on Frontend Masters! I took this course for revising React and Brian Holt surely makes it easy to understand as always. It was a fun course to brush up basics and I simply loved it!
Ritik

Ritik

Ritik_singh7

Im in love with Frontend Masters and Brian Holt!! Just working my way through the React lessons and I just love the way Brian explains the concepts and configs he runs.
Awesome job!!
Kevin Garcia-Fernandez

Kevin Garcia-Fernandez

optimistic_updt

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now