Table of Contents
IntroductionBrian 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
Pure React & createElementBrian 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&ABrian 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 ComponentsBrian 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 SetupBrian 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.
Vite SetupBrian 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
Configuring ESLint & ReactBrian discusses configuring ESLint to recognize React, ignore prop types, and catch common bugs around imports, exports, modules, and accessibility. A student's question regarding if ESLint will be needed when moving to TypeScript is also covered in this segment.
useState HookBrian demonstrates creating a SearchParams component with a location search form utilizing the useState hook, which allows the input to update the location's state. Placing hooks inside if statements or loops will cause bugs that involve useState returning the wrong state.
Hooks Q&ABrian answers a student's question regarding why location is being declared with const if it can be set. A demonstration of what each part of the useState destructuring does is also provided in this segment.
Mapping Through Data with HooksBrian live codes an animal select menu with options React automatically creates by mapping through the defined array of animal types.
Adding Animal BreedBrian walks through creating a breed selection that will be disabled if no animal type is selected and updates the breed type to an empty string if a new animal type is selected.
EffectsBrian demonstrates how to implement a search request for an initial set of pets on page load using the useEffect hook. The completed hook will also only make a fetch request on form submit to avoid making excessive API calls.
useBreedList Custom HookBrian live codes a custom useBreedList hook that determines which animal has been selected and provides a list of breeds based on that animal type. Student questions regarding why requestBreedList is inside useEffect and why status is being used if it is being ignored in SearchParams are also covered in this segment.
Component CompositionBrian demonstrates how to create reusable organized code by taking large components and breaking them down into smaller components.
Styling the Pet ComponentBrian walks through adding styling to the pets component that utilizes more data obtained from the API. A brief discussion regarding the balance of component decomposition is also provided in this segment.
React Dev ToolsBrian discusses the tools included with React, including development environment variables, strict mode, and dev tools for Chromium-based browsers and Firefox. A demonstration of using the React dev tools components and profiler tabs is also covered in this segment.
React RouterBrian walks through using the client-side React Router to update the URL from a link click without making another request for another document from the server. Using Link tags to avoid a full page refresh is also covered in this segment.
useParamsBrian discusses Context and how to use the useParams hook to retrieve params stored in the BrowserRouter.
React QueryBrian demonstrates handling asynchronous state management, including fetching, caching, synchronizing, and updating server state by using the data-fetching library React Query.
Performance Optimization with React QueryBrian demonstrates optimizing the application's performance using React Query by caching pet details that have already been requested. A student's question regarding what happens if fetchPets throws an error is also covered in this segment.
Refactoring fetchBreedListBrian refactors fetchBreedList and useBreedList with React Query. Student questions regarding what type the return is and what happens if there is more than one parameter in the API URL.
Uncontrolled FormsBrian walks through implementing an uncontrolled form where the form data is handled by the DOM instead of a React component. To write an uncontrolled component, instead of writing an event handler for every state update, a ref can be used to get form values from the DOM.
Class ComponentsBrian demonstrates how to create a pet photo carousel using the older way of writing React with class components. Class components must extend a React component and have a render function.
Handling Events in Class ComponentsBrian live codes a handleIndexClick function that handles user interaction with the image carousel. A student's question regarding the purpose of the use of a class component in this course.
Special Case React Tools
Error BoundariesBrian 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 PortalsBrian 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 PortalsBrian 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.
ContextBrian 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&ABrian 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.