Complete Intro to React, v6
Table of Contents
IntroductionBrian Holt covers a brief overview of the course, some personal background with React, and provides some resources for the course.
Who is this Course ForBrian discusses who this course is made for, prerequisites, what has changed from previous versions, why someone should learn React, and describes how React is organized. React applications are usually broken down into individual components to allow for easier debugging.
No Frills React
Including Vanilla React & Project SetupBrian live codes setting up the foundation for a vanilla react app including the source file, index.html, linking to a stylesheet, and opening the application. The stylesheet for this application is pre made and provided on the course website. A student's question regarding why they are not using Create React App is also covered in this segment.
Your First Vanilla React ComponentBrian walks through creating a React component using a script tag and constant App to return React.createElement. App is a component that can be used to "stamp" the written function at different locations and, therefore, reduce the amount of repeated code. Students questions regarding why React.createElement is being used inside the return statement and how to know what div is being anchored to are also covered in this segment.
Components and Q&ABrian demonstrates how to create a Pet component, which represents a single pet, and answers student's questions. The questions covered in this segment include why the last element in the array has a comma, if a for loop can be used to generate components, why there are multiple instances of React.createElement, and why the spread operator is being used.
PropsBrian demonstrates how to refactor the Pet component to accept properties of objects for more flexibility. With the introduction of props, information can be passed down from a parent component to a child component. A student's question regarding if the current code is production ready is also covered in this segment.
npmBrian discusses how to use npm as an essential tool for React projects and does a brief overview of the package.json file. Dependencies for projects can be found, installed, and updated using the npm node package manager. A student's question regarding what will happen if React is already installed is also covered in this segment.
PrettierBrian walks through setting up and using an auto formatter extension called Prettier which will standardize the codes formatting on save, briefly describes the package-lock.json file, and walks through setting up a format script in the package.json file. Student's questions regarding installing Prettier if it is already being used as an extension on Visual Studio Code and creating custom formatting are also covered in this segment.
ESLintBrian walks through the setup of ESLint which is a tool used to help enforce code style opinions on a project. ESLint will display errors where the preset style rules are being broken which can help create consistent code styling.
GitBrian demonstrates how to create a Git repository and set files to be ignored in the .gitignore file. The set ignored files will not be pushed to the Git repository.
Core React Concepts
JSXBrian demonstrates how to use JSX which will transpile HTML tags into React.createElement calls making the code more readable. Conversion of the current App component to JSX is also covered in this segment.
ESLint & ReactBrian walks through how to configure ESLint so it will recognise that React is being used and not throw errors. How to configure ESLint so it also enforces accessibility rules in JSX is also covered in this segment.
HooksBrian live codes a SearchParams function with the useState hook to manage the state of the location input. The hook will set a placeholder location on first load and automatically update itself on input change.
Rules of Hooks and Q&ABrian discusses the rules hooks follow including strict ordering. Student's questions regarding what part of the page gets rendered, where data that isn't updated frequently should be stored, what to do with state to not affect the rerender, and best practices for dependent state. The non destructured version of setLocation is also briefly covered in this segment.
ESLint & HooksBrian walks through how to configure ESLint to enforce rules for hooks recommended by the React team. A brief demonstration of some of the rules enforced by ESLint is also provided in this segment.
Animal & Breed Selector HooksBrian live codes the selector for animal type and breed using the useState hook and demonstrates what it looks like when ESLint throws an accessibility error. The breed selector will utilize an API call to generate options which will be covered in the useEffect & Fetching API Data segment.
Hooks Q&ABrian answers student questions about hooks, if a self closing option tag is valid, if keys have to be unique, when to use index as the key, and if the state of ANIMALS is being mutated. Other questions covered in this segment include how to set a default value in a selector, if there is a difference when setting a state object as opposed to individual states, if it's safe to use useState for animations, and if you can use state with objects.
useEffect & Fetching API DataBrian live codes the useEffect hook and requestPets function to make API calls and render the Pets information received. A student's question regarding when to garbage collect is also covered in this segment.
Custom HooksBrian live codes a custom hook that makes an API call and returns a list of breeds that corresponds with the animal selected and the loading status of the hook. The hook will store the data returned in the local cache to avoid making multiple calls to the API.
Handling User InputBrian demonstrates how to refactor a form with onSubmit and preventDefault so the form will submit either by clicking the button or pressing enter and prevent an automatic page refresh. React can handle other types of user input events including copy and paste, focus, blur, and touch.
Component CompositionBrian simplifies the SearchParams component by refactoring the results display into a Results component. Narrowing the scope of a component allows for easier debugging.
Refactoring the Pet ComponentBrian walks through refactoring the Pet component by destructuring the props, adding an image property to Pet, setting a placeholder image for if no image is found, and creating a link to the details page for each pet.
Dev EnvironmentBrian shares some tips for development including switching the node environment from development to production when the project is being shipped. A student's question regarding how the environmental variables should be set for a build is also covered in this segment.
Strict ModeBrian demonstrates setting React into strict mode which will throw stronger errors. Strict mode will throw errors on deprecated code and not allow the use of old APIs.
React Dev ToolsBrian demonstrates using the different React dev tools including inspecting elements, viewing a component's render tree, and viewing a applications performance profiler.
React Router RouteBrian walks through the installation and implementation of a React Router route using BrowserRouter and Route. When a route's path property matches the URL, the component inside the route will be rendered. The Switch component ensures only one route will be rendered at a time.
React Router Link TagBrian demonstrates connecting two pages to each other using a Link tag. Link tags can be used to take the user to an entirely different site or be reconfigured to not reload the page and navigate to a separate component.
Loading State & Lifecycle MethodsBrian walks through setting a loading screen using this.state.loading and discusses the other lifecycle methods available. A student's question regarding if class components are the only way to obtain lifecycle components is also covered in this segment.
Class PropertiesBrian walks through modifying the babel and eslint configurations to include a class properties transform so class constructors can be removed. With the constructor code removed the Details components becomes easier to read.
Manage State in a Class ComponentBrian demonstrates how to manage state in a more complex class component by creating an image carousel that uses defaultProps to set default images. A student's question regarding if defaultProps is the same as proptypes is also covered in this segment.
Interactive Class ComponentBrian live codes the handleIndexClick event handler to the image carousel so the user can change the displayed image. The handleIndexClick event listener is refactored to use an arrow function so the "this" keyword is bound to the scope where the function is defined.
Special Case React Tools
Error BoundariesBrian demonstrates implementing error boundaries with the lifecycle method componentDidCatch to handle 404 errors from the API. Error boundaries cannot be used in function components and can only be used in class components.
Redirect on ErrorBrian walks through how to redirect a user back to the homepage when an error occurs by using Redirect from react-router-dom. Placing Redirect in componentDidCatch will help avoid not redirecting on immediate page load errors.
ContextBrian discusses context which is similar to state, but instead of being confined to a component, context is global to the application. Context is useful for storing data that many components would want to access like user profile information or theme preferences.
Implementing ThemeContext and Q&ABrian live codes a theme selector and implements ThemeContext globally for the application. Student's questions regarding if the returned value from Context the same as hooks, what does useContext in SearchParams return, and if can you have multiple contexts are also covered in this segment.
Portals, Refs, and Q&ABrian demonstrates how to use Portals as a separate mounting point to render content that can also access state. Student's questions regarding why a ref is being used instead of a container, if all refs need to be cleaned up, what createPortal is doing, and why not use the ReactDOM are also covered in this segment.
Implementing ModalsBrian live codes implementing the Modal in the Details component with the toggleModal method. Student questions regarding using themeContext on modals and if there are any performance downfalls to using Modals is also covered in this segment.
Wrapping UpBrian wraps up the course by answering questions about React and providing some ways to expand the project. Student questions answered in this segment include what are some use cases for Portals beyond modals, what are other use cases for Context, what's the difference between ThemeContext and useContext and if developers should start with functional or class components.