This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Table of Contents
Introduction
Introduction
Brian 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 Setup
Brian sets up the folder, the HTML document, and imports the CSS to begin building the course application.
A Note on the Course Font
Brian briefly explains the font that's used during the course, and demonstrates how to enable font ligatures in VS Code settings.
Pure React
Getting Started with Pure React
Brian begins by writing a React App component that "stamps" the app on the page.
createElement Arguments
Brian 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.
Reusable Components
Brian extracts the JavaScript into its own file, then creates a second component that is reusable within the parent component.
Passing in Component Props
Brian demonstrates how to create and pass in attributes to components.
Destructuring Props
Brian demonstrates how to utilize a Vanilla JavaScript principle to simplify attribute names being passed into components.
Tools
npm & Generating a package.json File
Brian explains what npm is, and generates a package.json file for the application.
Prettier
Brian introduces Prettier, a tool that allows a team to maintain consistency, and eliminate syntax arguments across a codebase.
npm Scripts
Brian 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 Setup
Brian 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 Setup
Brian 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 Configuration
Brian 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.
gitignore
Brian demonstrates how to specify which files not to track when commiting to a repo.
Parcel
Brian configures Parcel, a bundler that automatically includes React and ReactDOM from the registry.
Installing React & ReactDom
Brian 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 Modules
Brian 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.
JSX
Converting to JSX
Brian introduces JSX by writing what appears to be HTML in a JavaScript file, and explains how React transpiles the code.
Configuring ESLint for React
Brian 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 & Expressions
Brian demonstrates how to insert named components and props into the JSX, then explains how brackets can be used to insert expressions.
Hooks
Creating a Search Component
Brian begins constructing a component to allow a user to search by a specific location.
Setting State with Hooks
Brian 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 Hooks
Brian explains why hooks cannot be utilized within control flow statements.
Configuring ESLint for Hooks
Brian installs the ESLint plugin for React hooks, and configures ESLint to check and warn for conditionally called hooks.
Calling the Pet API
Brian 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 Keys
Brian explains why a unique key must be provided when rendering lists of elements in JSX, and why providing it increases performance.
Breed Dropdown
Brian populates a dropdown with breeds from the Pet client data, mirroring the way that the animal dropdown was created.
Custom Hooks
Brian creates a custom hook that performs the task of being a reusable dropdown component, and replaces redundant code from the animal and breed dropdowns.
Effects
Effects
Brian 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 Dependencies
Brian 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 Walkthrough
Brian walks through the effects and hooks lifecycle to demonstrate how state propagates through the component.
Run Only Once
Brian demonstrates how to ensure an effect only runs once by passing in an empty array as the hook dependency.
Hooks Review and Q&A
Brian 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.
Dev Tools
Environment Variables & Strict Mode
Brian 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 Tools
Brian 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 Requests
Brian introduces async functionality to make a request to the API, and configures the package.json to target modern browsers.
Using the Fallback Mock API
Brian 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 Flow
Brian 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 Component
Brian adds a hero image and renders a more complete version of the component that shows for each pet in the search results.
Reach Router
Brian 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 Link
Brian 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 Components
Class Components
Brian 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 Component
Brian completes the render method to include a loading display and the final JSX to be outputted to the DOM after the API response.
Configuring Babel for Parcel
Brian demonstrates how to use Babel and Parcel together by creating a Babel configuration file and changing the default parser of the existing ESLint configuration file. The application is configured to accept proposed JavaScript implementations as well as the landed standards.
Creating an Image Carousel
Brian creates the image carousel class component.
Context
Brian 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&A
Brian 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 Implementation
Brian ties the pieces of the application together to display the image carousel in the app.
Error Boundaries
Error Boundaries
Brian 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 Middleware
Brian demonstrates how to wrap the application in the error boundary and wire it up to a component.
404 Page Redirect
Brian uses a 404 page redirect as a way to demonstrate the componentDidUpdate React lifecycle method's capabilities.
Lifecycle Methods & Error Boundary Q&A
Students 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.
Context
React Context
Brian demonstrates how to provide global application state by using a Context hook. Further applications for React Context are also briefly discussed.
Context with Hooks
Brian demonstrates how to provide a global CSS style to a button using the useContext hook.
Context with Classes
Brian demonstrates how to provide a global CSS style to a button in a class component.
Persisting State with Context Hooks
Brian 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.
Portals
Modal Dialog with Portals
Brian introduces Portals as a method to render components outside the current component while keeping its events and state inside its current component.
Displaying the Modal
Brian wires the portal display state to the component. Utilizing Portals turns what was once an extremely complicated implementation to a much simpler feature.
