This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Table of Contents
Introduction
Vanilla React
Vanilla React Setup
Brian walks through setting up the base for the course project, including the starting index.html file, React script tags, and pulling in the style sheet. Using script tags will load React off of a CPN.
App Component
Brian demonstrates building a simple "Hello World" React app using a reusable App component to render text on the DOM. React wants to rerender itself frequently; render functions should be fast by keeping them pure.
Components
Brian live codes a flexible component that can accept props from its parent and discusses the relationship and direction of data flow between parent and child components. Components are reusable and can be used to build even larger components.
JS Tools
npm
Brian demonstrates how to get started installing and saving packages by initializing npm and generating the starting package.json file.
Prettier
Brian discusses utilizing the Visual Studio Code extension Prettier to format code and set personal configurations. Writing a custom npm script to run Prettier and a student's question regarding what the purpose of the package-lock.json is are also covered in this segment.
ESLint
Brian discusses using ESLint to enforce code styles that pertain more to usage: using correct accessibility, old APIs, or having written code that is never used. Student questions regarding if conflicts between ESLint and Prettier occur and if TSLint is deprecated are also answered in this segment.
Git
Brian walks through initializing the course project as a git repo, including setting up a .gitignore file to ignore specific files and not push them to GitHub.
Parcel
Brian demonstrates setting up Parcel to be a zero-configuration build tool. Parcel accepts an entry point, searches through all of the dependencies, and outputs a single, complete file with all of the code in it, allowing for large applications with many files and dependencies.
Bundlers Overview
Brian discusses the function of bundlers as tools developers used to bundle modules into a single file that can be executed in the browser.
Component Module
Brian demonstrates how Parcel allows the separation of code into component modules by creating the Pet component module.
Browserslist
Babel transforms your JS code from futuristic code to code that is understandable by older browsers. Via a package called browserslist (which Parcel installed for you) you can Babel what browsers to target.
Core React Concepts
JSX
Brian demonstrates introducing HTML into JavaScript with JSX to condense the code further and read as it renders. Student questions regarding if the JSX still gets transformed into createElement calls and if App was passed into render would it pass in as the function are also answered in this segment.
Configure ESLint with JSX
Brian walks through configuring ESLint to accept JSX and React and no longer throw errors on prop types and React in JSX. Configuring ESLint to extend the import plugin, and jsx-a11y are also covered in this segment.
Search Form Component
Brian live codes the search form component to allow searching against a pet API, starting with a location search. When the input changes, React detects that a DOM event happened and runs a re-render.
useState Hook
Brian demonstrates using the useState hook to update the state of the previously created search input. A hook is a special function that “hooks into” React features. For example, useState is a hook that allows React state to be added to function components.
Mapping Data to Component
Brian walks through mapping over an array of animal types to generate options for an animal select input. Building out a breed selection is also covered in this segment.
Effects
Brian demonstrates using the useEffect hook, which allows developers to do asynchronous actions, to make an API request when the application first renders.
useState Q&A
Brian answers student questions regarding what the setPets function is, how the setPets function is written, and how the useState hook keeps track of what is being set.
Custom Hooks
Brian demonstrates how to extract logic out of a component to allow a hook to be shared across components.
Custom Hooks Q&A
Brian answers student questions regarding if the order of useStates matters, if there can be multiple useEffects, if hooks are a JavaScript pattern or React specific, and what the purpose of using useEffect inside the custom hook.
Handling User Input
Brian walks through handling user input and responding to users pressing a button. When a user hits enter or clicks the submit button it searches for animals by listening for submit events on the form.
Component Composition
Brian demonstrates breaking down bigger components into smaller components for reusability and organization. A student's question regarding why an if statement cannot be used is also covered in this segment.
Styling the Pet Component
Brian live codes some styling for the Pet component for the data retrieved from the API to look more attractive. How to set hero images for the pets and a student's question regarding if there are any performance concerns if mapping is done outside of the return function covered in this segment.
Building for Production
Brian demonstrates building the application for production with Parcel to greatly reduce the bundle size and increase performance.
StrictMode
Brian walks through importing and applying StrictMode, which provides additional warnings when using legacy or soon to be deprecated code.
React Dev Tools
Brian walks through installing and using the React Dev Tools extension for the browser. The React Dev Tool allows developers to do things such as explore the React app like a DOM tree, modify state and props on the fly to test things out, tease out performance problems, and programmatically manipulate components.
React Capabilities
React Router
Brian discusses using React Router to manage browser navigation state and create different pages or a single page application. Student questions regarding if the route path can be relative and examples of the route being relative are also covered in this segment.
React Router Link
Brian demonstrates using the Link component to generate page links that are always relative to the browser router context the component is in.
BrowserRouter vs HashRouter and Q&A
Brian discusses the differences between BrowserRouter and HashRouter, including HashRouter inserting a # symbol to allow the creation of a router that always routes to the same page. Student questions regarding if the post method could be used in the react route to post data to the server and if it's best practice to have component files in their own folder are also covered in this segment.
Class Components
Brian demonstrates when and how to use the class components API. While many components are written with hooks, the older API of class-based components are still around and still useful.
Fetching Data in componentDidMount
Brian walks through making an API fetch request on the first render using the componentDidMount function. Instead of getting props via parameters and state via useState we're getting it from the instance variables this.state and this.props.
Class Properties
Brian demonstrates how to use the new feature in JavaScript, class properties, to make code easier to read by avoiding using constructors to set the initial state for class components.
Managing State in Class Components
Brian walks through how to manage state using setState and life cycle methods to allow setting an image as active.
Handle Events in Class Components
Brian live codes event handlers for click events in class components to handle switching the active image. An arrow function assures it will be in the scope of where it was defined.
Special Case React Tools
Error Boundaries
Brian demonstrates how to use error boundaries to allow for the ability to catch errors coming out of a component and be able to react to that. This is great for areas where unexpected errors could arise like API calls or user-generated content.
Error Boundaries Q&A
Brian discusses the use of componentDidUpdate to rerender after an error is thrown. Student questions regarding if the state updating causes the rerender, if component did update responds to errors thrown only in the component it extends, and what Prettier's insertion of {" "} does are also answered in this segment.
Context
Brian discusses context, which is like state, but instead of being confined to a component, it's global to your application. Context mostly replaces Redux and can be used in place of Redux to keep track of the global state.
Context for Theming
Brian demonstrates using context to set a button theme based on the global state. This process can also give an application light and dark mode.
Context & State
Brian walks through implementing the ability to set the button color theme with an HTML drop-down selector.
Portals & useRef for Modals
Brian demonstrates using portals to allow rendering to a place outside of a component from within a component by creating a modal. A contextual nav bar or side nav are also possible uses for portals and useRef.
Removing Modals and Q&A
Brian add logic to hide and show the previously created modal component. Student questions regarding what function removes the modal from the DOM and if the return function in useEffect is similar to componentDidUnmount are also covered in this segment.
