Brian Holt
SQLite Cloud
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
CloseLearn 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
Table of Contents
Introduction
Section Duration: 15 minutes
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
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
Brian live codes an animal select menu with options React automatically creates by mapping through the defined array of animal types.
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.
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.
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.
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.
Brian demonstrates how to create reusable organized code by taking large components and breaking them down into smaller components.
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.
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
Section Duration: 1 hour, 22 minutes
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.
Brian discusses Context and how to use the useParams hook to retrieve params stored in the BrowserRouter.
Brian demonstrates handling asynchronous state management, including fetching, caching, synchronizing, and updating server state by using the data-fetching library 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.
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.
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.
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.
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
Section Duration: 1 hour, 2 minutes
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.
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.
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.
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.
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
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.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops