Complete Intro to React, v5
This course has been updated! We now recommend you take the Complete Intro to React, v6 course.
Table of Contents
IntroductionBrian Holt introduces the course, discusses how the previous versions of the course differ from the current version, the structure of the course, and how to to switch between commits.
Project SetupBrian sets up the folder, the HTML document, and imports the CSS to begin building the course application.
A Note on the Course FontBrian briefly explains the font that's used during the course, and demonstrates how to enable font ligatures in VS Code settings.
Getting Started with Pure ReactBrian begins by writing a React App component that "stamps" the app on the page.
createElement ArgumentsBrian answers a question regarding what happens to content within an element that React is creating elements within, then goes on to explain the nested createElement call, and the arguments passed into the returned function.
Passing in Component PropsBrian demonstrates how to create and pass in attributes to components.
npm & Generating a package.json FileBrian explains what npm is, and generates a package.json file for the application.
PrettierBrian introduces Prettier, a tool that allows a team to maintain consistency, and eliminate syntax arguments across a codebase.
npm ScriptsBrian demonstrates how to create an npm script in the package.json file that allows anyone to run Prettier from the command line with many less keystrokes.
Prettier SetupBrian demonstrates how to install the Prettier extension in VS Code, create the prettier configuration file, and set it to auto-format on save only when the configuration file exists.
ESLint SetupBrian introduces ESLint to find syntax or style errors before execution, creates the eslintrc configuration file, and installs the eslint-config-prettier to ensure that linter isn't overlapping with the tasks that Prettier is performing. What the package-lock.json file does, and how to install only the versions of packages in that file are also briefly discussed.
ESLint ConfigurationBrian sets up ESLint configuration file, eslintrc.json, with the application's settings. A script is set up within the package.json file to run the linter.
gitignoreBrian demonstrates how to specify which files not to track when commiting to a repo.
ParcelBrian configures Parcel, a bundler that automatically includes React and ReactDOM from the registry.
Installing React & ReactDomBrian imports React, and ReactDom in the application, and explains how to import only a single module from a package. A question is also answered regarding how determine whether to import modules or a whole package, and Parcel's tree shaking functionality is explained.
Separate App into ModulesBrian moves the components into different files to make the code more maintainable. Alternatives to Parcel are also given, as well as instructions on how to move forward with the commits.
Configuring ESLint for ReactBrian configures ESLint to identify the plugins used, sets rules, and sets the linter to automatically identify what version of React is being used.
JSX Composite Components & ExpressionsBrian demonstrates how to insert named components and props into the JSX, then explains how brackets can be used to insert expressions.
Creating a Search ComponentBrian begins constructing a component to allow a user to search by a specific location.
Setting State with HooksBrian explains why two-way data binding isn't free in React, and why this makes the code more maintainable. The useState hook is utilized to update the state, and the onChange event handler is tasked with displaying it in the component.
Best Practices for HooksBrian explains why hooks cannot be utilized within control flow statements.
Configuring ESLint for HooksBrian installs the ESLint plugin for React hooks, and configures ESLint to check and warn for conditionally called hooks.
Calling the Pet APIBrian imports the Pet client module from npm with Parcel. A dropdown with animals from the Pet client data is populated within the search form.
Unique List Item KeysBrian explains why a unique key must be provided when rendering lists of elements in JSX, and why providing it increases performance.
Breed DropdownBrian populates a dropdown with breeds from the Pet client data, mirroring the way that the animal dropdown was created.
Custom HooksBrian creates a custom hook that performs the task of being a reusable dropdown component, and replaces redundant code from the animal and breed dropdowns.
EffectsBrian utilizes the useEffect built-in hook to asynchronously request data from the Petfinder API. This effect takes the place of several lifecycle hooks, including componentDidMount, componentWillUnmount, and componentDidUpdate.
Declaring Effect DependenciesBrian declares the dependencies that useEffect relies on in order to specify which parameters that React should be checking for changes on during a re-render. It's demonstrated that this prevents the code from running the effect unnecessarily.
Effect Lifecycle WalkthroughBrian walks through the effects and hooks lifecycle to demonstrate how state propagates through the component.
Run Only OnceBrian demonstrates how to ensure an effect only runs once by passing in an empty array as the hook dependency.
Hooks Review and Q&ABrian clarifies why a variable isn't a dependency of the effect hook, and answers a question about why hooks were created to replace other lifestyle components. A clarification is made about how the propagation of state is given for free in hooks. Which hooks to focus on is also discussed.
Environment Variables & Strict ModeBrian explains how Parcel compiles the development server using the NODE_ENV environment variable, then automatically flips the switch when the application is built for production, erasing unnecessary debugging tools for a more performant application. React strict mode is also introduced as a tool that throws errors when using React features that are soon to be deprecated.
React Browser Dev ToolsBrian introduces the React browser dev tools, available in Firefox and Chrome, that allow developers to inspect and select components within the browser for another approach to debugging and development.
Async & Routing
Asynchronous API RequestsBrian introduces async functionality to make a request to the API, and configures the package.json to target modern browsers.
Using the Fallback Mock APIBrian demonstrates an optional feature that allows students to complete course offline by running the mock API in the place of the API that will be run for the rest of the course.
One-Way Data FlowBrian renders the list of pets returning from the Pet client by passing from data parent to child, and demonstrates a key pattern of React called one-way data flow, also known as "one-way binding".
Reformatting the Pet ComponentBrian adds a hero image and renders a more complete version of the component that shows for each pet in the search results.
Reach RouterBrian introduces several options for routers, but explains that Reach Router will be used for the course because of emphasis on accessibility, and also its intuitive path scoring algorithm.
Debugging & Reach Router LinkBrian demonstrates a debugging technique that dumps data out to the DOM to see what’s coming in on the props in a component, then uses a link tag to connect the branding to the home page that React Router handles for the user.
Class ComponentsBrian introduces ES6 classes in React by discussing the constructor function, and the super keyword. An explanation is given on setting how a component maintains state, and how to update state with setState in a class component via a shallow merge. How context influenced the decision for the React development team to utilize arrow functions in class components is also discussed.
Rendering the ComponentBrian completes the render method to include a loading display and the final JSX to be outputted to the DOM after the API response.
Creating an Image CarouselBrian creates the image carousel class component.
ContextBrian implements the click handler to switch images in the gallery, and explains how context is passed down through event listeners and functions that are being passed into children.
Index Click Q&ABrian answers an audience question about the functionality of the incrementing function in the carousel component. Further explanation is given as to why this is a more performant option than using a bind function to do the same task. The carousel is then implemented into the details module.
Carousel ImplementationBrian ties the pieces of the application together to display the image carousel in the app.
Error BoundariesBrian introduces error boundaries that allow for graceful capture of errors without an application blowing up. To implement the error boundaries, getDreivedStateFromError, and componentDidCatch React methods are introduced.
Error Boundary MiddlewareBrian demonstrates how to wrap the application in the error boundary and wire it up to a component.
404 Page RedirectBrian uses a 404 page redirect as a way to demonstrate the componentDidUpdate React lifecycle method's capabilities.
Lifecycle Methods & Error Boundary Q&AStudents ask for clarification on the componentDidUpdate, and getDerivedStateFromError lifecycle methods, how React uses unhandled errors, as well as whether it's possible to use error boundaries with hooks.
React ContextBrian demonstrates how to provide global application state by using a Context hook. Further applications for React Context are also briefly discussed.
Context with HooksBrian demonstrates how to provide a global CSS style to a button using the useContext hook.
Context with ClassesBrian demonstrates how to provide a global CSS style to a button in a class component.
Persisting State with Context HooksBrian demonstrates how utilizing a globally accessible variable within Context hooks allows a user to navigate away from the original page, and allow settings changed by the user to persist. The application is refactored to use Link tags instead of a tags to allow html history to navigate the pages. A question is asked about how to ignore a variable that's being returned from a hook.
Modal Dialog with PortalsBrian introduces Portals as a method to render components outside the current component while keeping its events and state inside its current component.
Displaying the ModalBrian wires the portal display state to the component. Utilizing Portals turns what was once an extremely complicated implementation to a much simpler feature.