Table of Contents
Introduction
Setup & Tooling
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
JSX
Brian discusses creating more readable code by introducing HTML into JavaScript using JSX. A student's question regarding what "default" refers to in the export statement is also covered in this segment.
Configuring ESLint & React
Brian 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.
setState Hook
Brian 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&A
Brian 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 Hooks
Brian live codes an animal select menu with options React automatically creates by mapping through the defined array of animal types.
Adding Animal Breed
Brian 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.
Effects
Brian 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 Hook
Brian 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.
Handling User Input Review
Brian briefly reviews how to handle user interactions in JavaScript using event handlers. A student's question regarding the virtual DOM is also covered in this segment.
Component Composition
Brian demonstrates how to create reusable organized code by taking large components and breaking them down into smaller components.
Styling the Pet Component
Brian 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 Tools
Brian 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 Capabilities
React Router
Brian 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.
useParams
Brian discusses Context and how to use the useParams hook to retrieve params stored in the BrowserRouter.
React Query
Brian 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 Query
Brian 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 fetchBreedList
Brian 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 Forms
Brian 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 Components
Brian 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 Components
Brian 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 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.
