This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Table of Contents
Introduction
Prelude & Git Setup
Brian explains the differences between the Complete Intro to React version 3 versus version 4 of the course. He also gives a tour of how to get setup with the code with git and how to get reset with the code at any point in the course.
Course Introduction
Brian introduces himself and gives his background with React in launching the React code at Reddit. Brian also gives an overview of why he likes React.
Pure React
Setup index.html
Brian sets up an index.html using VS Code's built in emmet integration. We'll be building a Pet Finder application throughout the workshop.
Including React
Add a root element that React will render components into. Also include the React and ReactDOM script files from the unpkg CDN.
Add CSS File
Add the CSS file included in the course code repository. Open the console to see that React is loaded.
App Function & Editor Ligatures
Create an arrow function and assign it to the App variable. When he writes the arrow function, the font is combined into a symbol which is enabled by font ligatures. Brian shows how he enabled them.
Your First Component
Create a div and h1 element that renders React into the webpage. Brian uses a stamp analogy to explain how you can reuse the components you build throughout your app.
Making a Reusable Component
Create a Pet component that can be stamped out onto the page any number of times.
Passing Component Props
Make the Pet component more flexible by passing props to the component.
Class vs Function Component
Convert the App component into a class component. You can use function components for components that don't need the more powerful parts of React like state and lifecycle methods.
Adding a Click Handler
Add a click event to the title that calls a method in the component class. Brian discusses why this approach in React of having all markup and event handling in the component vs spread amongst other modules is good for debugging.
React Tooling
npm
Brian introduces npm which is used to install both front-end and back-end JavaScript modules with Node.js. Start by creating a package.json file b using the "init -y" command.
Installing Prettier for Code Formatting
Use npm to install the prettier node module. Running prettier from the command line allows you to format the code according to the prettier default formatting rules.
Adding Prettier into Your Editor
Make your code editor run prettier for format the code every time you save a file.
Adding Prettier CLI Script
Create a command line script to format code with prettier. This script can be ran by your CI system or developers who don't have prettier integrated into their editor. Add the format script to your package.json.
Adding ESLint for Code Quality
ESLint is another tool to assist with code quality that works nicely alongside Prettier. ESLint handles JavaScript coding standards on top of Prettier's code formatting rules.
Adding an ESLint CLI Script
Create a command line script to run ESLint rules on your JavaScript and JSX files.
Parcel
Webpack vs Parcel
Introduction to Parcel, a zero configuration build tool. Brian still uses Webpack for large projects, but chooses Parcel for this course because it simplifies setup.
Parcel
Add a script to start Parcel and server your React app from localhost.
Installing React from npm with Parcel
Include React and ReactDOM from the npm registry automatically with Parcel. This should blow your mind a little bit.
Extracting Component Module
Brian uses some VS Code magic to extract the Pet component to it's own module. Parcel imports and composes the modules together to deliver to the browser.
JSX
Writing a Component in JSX
JSX is a way to write HTML that gets translated into React createElement calls to generate the HTML with JavaScript. Refactor the Pet component to use JSX. Also learn how to use attributes in JSX.
Writing the App in JSX
Convert the App component to using JSX. Reuse the Pet component in JSX and pass props to it.
Configuring ESLint with React
Add the ESLint plugins to catch common errors in React. Also install the ESLint accessibility plugin to catch things that will cause your application to be inaccessible to those with disabilities.
Rendering Data
Setup the Petfinder API Keys
Make a new Petfinder API key and API Secret to then add it to your .env file which will be read by Parcel.
Using the Petfinder API Client
In the componentDidMount lifecycle method in the App component, fetch pets from the Petfinder API client and log the results.
Set Component State form API Results
Initialize component state in the class constructor. Then after pulling pets from the API, update pets state on the component with the React setState method.
Debug Component State in React
Learn to debug component state in React using the JSON.stringify method.
Rendering List of Components
Map over the pets and render components with the pet data returned from the Petfinder API.
Adding Unique Keys to Components
React requires a unique key for each component in a list of components. With the key, React is able to reorder elements in the DOM when state is reordered instead of destroy the DOM each time.
Passing Component Data Using Props
Render the pet component with more data from the API in order to display the pet image and location. Brian also uses destructuring in the Pet component to make it more easy to know which props are passed into the component.
Routing
Refactor Components for Adding Routing
Brian chose Reach Router for its accessibility features. Refactor the application to use a Results model to display the pets, and create a simple Details page module.
Component Routing with Reach Router
Wrap the Results and Details modules in Reach Router and add routing paths to each of the components.
React Dev Tools
Inspect components, dand router data through the React Dev Tools.
Routing with Reach Router Link
Add a Reach Router Link element to visit the Details page from the search results. Also link the header to the homepage.
Async UI
Render Component from API Data
Query the selected animal from the Pet Finder API and display the pet data in the details component.
Remove Class Constructor with Babel
Brian removes the class constructor so that he can use ES2018 class properties. He does this by including the babel class properties transformation.
Creating a Carousel Component
Code a Carousel component that shows a primary image next to a list of alternative images of the animal that you will be able to click on to expand. Brian uses the getDerivedStateFromProps lifecycle method to pull the right size image off the media prop object.
Adding Carousel Interactivity
Make the Carousel interactive by adding a click handler to each of the images of the animal in order to expand the alternative images of the animal. Brian discusses how to simplify your render method using derived state from props.
Forms
Adding a Search Input Component
Create the Search params component containing a label and an input that is accessible from the "/search-params" route.
Handling Input State Change
An input will stay the same until you handle the input change events and reflect that in your component state for the input. Brian argues that making you handle input change events in React is a good thing.
Adding a Select List with Options
Add a select list with types of animals as options. The list of options is populated by an array of constants from the Petfinder API Client.
Turning Off ESLint Rules
Despite following good accessibility practices, ESLint is giving us an error. Brian shows how you can turn off individual ESLint rules. He also turns console.log errors into warnings in ESLint.
Adding an Input from API Data
Populate a select list of options based on the returned list of breeds from the Petfinder API based on the animal you have selected. Call getBreeds from the API after calling setState with the animal you have selected.
Q&A
The audience questions about JSX, auto completion, code organization, wrapping inputs in a form element, named exports vs default exports and binding this in the render method. Brian explains why you should use arrow methods for event handlers on the component class.
Context
The Problem of Sharing State
A tour through the issue with sharing state between components. In the React v4 git repository, Brian shows how you can structure sharing state between components without using the context feature that ships with React 16.3+.
Spread Operator & Passing Props
Passing properties using the JSX spread operator comes with some problems. Brian argues that it you should type out the specific properties you want to pass to child components instead of using the spread operator to pass an entire object through.
Intro to Context
Context is universal data for your application. The context API solves the issue of sharing component state. Instead of passing properties through intermediary components that don't care about the props (known as the "prop drilling"), you can wrap components in a Context.
React createContext
Create a new search context with React.createContext. This gives you both a Consumer and a Provider, that acts as a portal to put data into the Provider and it comes out in the Consumer.
Using the Provider
Define the default state and methods which were outlined in the Context on the App component. Pass the App component's state to the Provider. Finally, wrap all the components in the Provider so that they have access to the search context.
Using the Consumer
Use components with shared behavior by using a Consumer. The Consumer exposes context that was set by the Provider. In this case, the context exposed by the Consumer is the state of the App component.
Context Q&A
The audience asks architectural questions about using Context, like using multiple contexts with multiple Consumer and Providers.
Using the Component Anywhere
Now that the component uses the Consumer component that shares application state through the context, you now have a self-contained component that can be used anywhere inside the application as long as it's wrapped in the Provider.
Debugging React Errors
Brian shows you a simple debugging technique in React and how to get started debugging. He also refers you to look up Error Boundaries if you'd like to more elegantly handle errors.
Using Context in Lifecycle Methods
So far we used context only when inside the render method. To use context inside lifecycle methods, you’ll need to wrap the component in the Consumer before exporting the module.
Fixing Routing
Make the Search Params page form work, along with adding navigation to the Search Params page.
Context Wrap Up & Questions
Brian wraps up context by saying it's one of the most difficult things to understand in core React. He also discusses when it makes sense to use context or not.
Portals
Portals
Modal windows have traditionally been difficult with React, since you have to render content in a different place. This is why React 16 created the concept of Portals, so you can have a component that renders wherever it needs to.
this.props.children
All components have a special property "children" which is all of the components immediately inside of a parent component.
Rendering to the Portal
By using the Portal, we can now render html and events just like a normal React component inside the render method, but this time the rendering actually happens on a completely different part of the page where the Portal is attached.
Conclusion
React Refs
Use a React ref to reference an element within the React tree outside of React.
Integrating with 3rd Party Libraries
Example of how to integrate with 3rd party libraries like d3, jQuery plugins, or etc.
shouldComponentUpdate
You can take control over when React components update with shouldComponentUpdate. This can be used for performance optimizations, but should be used carefully and only if absolutely necessary.
Lifecycle Methods
Brian takes a tour through the lifecycle methods available on a component. The most common methods you'll be using is componentDidMount and getDerivedStateFromProps.
Profiling React
Use the dev tools performance profiling to debug slow parts of your React application.
Final Thoughts
Congratulations on learning the entire core React library and the fundamental building blocks of React. Brian has more advanced topics in his follow up course, "Intermediate React".