This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Table of Contents
Introduction
Introduction
Brian Holt covers a brief overview of the course, some personal background with React, and provides some resources for the course.
Who is this Course For
Brian 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 Setup
Brian 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 Component
Brian 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&A
Brian 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.
Props
Brian 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.
JavaScript Tools
npm
Brian 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.
Prettier
Brian 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.
ESLint
Brian 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.
Git
Brian 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.
Parcel
Brian walks through how to set up and use Parcel, which is a bundler for JavaScript that requires no configuration. When installed Parcel will compile all of a project's code into one complete file.
Babel
Brian walks through setting up Babel, a transpiler tool that converts modern JavaScript features to code that is compatible older browsers specified by the browserslist property in the package.json file. A student's questions regarding what the parcel generated .map files are doing in the dist folder and if Babel and Parcel are required to use browserslist are also covered in this segment.
Core React Concepts
JSX
Brian 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 & React
Brian 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.
Hooks
Brian 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&A
Brian 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 & Hooks
Brian 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 Hooks
Brian 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&A
Brian 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 Data
Brian 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 Hooks
Brian 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 Input
Brian 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 Composition
Brian 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 Component
Brian 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 Environment
Brian 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 Mode
Brian 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 Tools
Brian demonstrates using the different React dev tools including inspecting elements, viewing a component's render tree, and viewing a applications performance profiler.
React Capabilities
React Router Route
Brian 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 Tag
Brian 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.
Class Components
Brian live codes a class component which uses JavaScripts class syntax. Rather than using effects, async data is loaded in the componentDidMount method. Students questions regarding how to get the correct pet id using a function component and why Object.assign is being used are also covered in this segment.
Loading State & Lifecycle Methods
Brian 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 Properties
Brian 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 Component
Brian 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 Component
Brian 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 Boundaries
Brian 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 Error
Brian 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.
Context
Brian 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&A
Brian 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&A
Brian 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 Modals
Brian 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.
