Complete Intro to React v4
This course has been updated! We now recommend you take the Complete Intro to React, v6 course.
Table of Contents
Prelude & Git SetupBrian 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 IntroductionBrian 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.
Setup index.htmlBrian 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 ReactAdd a root element that React will render components into. Also include the React and ReactDOM script files from the unpkg CDN.
Add CSS FileAdd the CSS file included in the course code repository. Open the console to see that React is loaded.
App Function & Editor LigaturesCreate 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 ComponentCreate 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 ComponentCreate a Pet component that can be stamped out onto the page any number of times.
Passing Component PropsMake the Pet component more flexible by passing props to the component.
Class vs Function ComponentConvert 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 HandlerAdd 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.
Installing Prettier for Code FormattingUse 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 EditorMake your code editor run prettier for format the code every time you save a file.
Adding Prettier CLI ScriptCreate 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.
Webpack vs ParcelIntroduction to Parcel, a zero configuration build tool. Brian still uses Webpack for large projects, but chooses Parcel for this course because it simplifies setup.
ParcelAdd a script to start Parcel and server your React app from localhost.
Installing React from npm with ParcelInclude React and ReactDOM from the npm registry automatically with Parcel. This should blow your mind a little bit.
Extracting Component ModuleBrian 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.
Writing the App in JSXConvert the App component to using JSX. Reuse the Pet component in JSX and pass props to it.
Configuring ESLint with ReactAdd 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.
Setup the Petfinder API KeysMake 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 ClientIn the componentDidMount lifecycle method in the App component, fetch pets from the Petfinder API client and log the results.
Set Component State form API ResultsInitialize 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 ReactLearn to debug component state in React using the JSON.stringify method.
Rendering List of ComponentsMap over the pets and render components with the pet data returned from the Petfinder API.
Adding Unique Keys to ComponentsReact 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 PropsRender 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.
Refactor Components for Adding RoutingBrian 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 RouterWrap the Results and Details modules in Reach Router and add routing paths to each of the components.
React Dev ToolsInspect components, dand router data through the React Dev Tools.
Routing with Reach Router LinkAdd a Reach Router Link element to visit the Details page from the search results. Also link the header to the homepage.
Render Component from API DataQuery the selected animal from the Pet Finder API and display the pet data in the details component.
Remove Class Constructor with BabelBrian 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 ComponentCode 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 InteractivityMake 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.
Adding a Search Input ComponentCreate the Search params component containing a label and an input that is accessible from the "/search-params" route.
Handling Input State ChangeAn 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 OptionsAdd 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 RulesDespite 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 DataPopulate 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&AThe 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.
The Problem of Sharing StateA 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 PropsPassing 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 ContextContext 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 createContextCreate 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 ProviderDefine 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 ConsumerUse 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&AThe audience asks architectural questions about using Context, like using multiple contexts with multiple Consumer and Providers.
Using the Component AnywhereNow 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 ErrorsBrian 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 MethodsSo 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 RoutingMake the Search Params page form work, along with adding navigation to the Search Params page.
Context Wrap Up & QuestionsBrian 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.
PortalsModal 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.childrenAll components have a special property "children" which is all of the components immediately inside of a parent component.
Rendering to the PortalBy 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.
React RefsUse a React ref to reference an element within the React tree outside of React.
Integrating with 3rd Party LibrariesExample of how to integrate with 3rd party libraries like d3, jQuery plugins, or etc.
shouldComponentUpdateYou 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 MethodsBrian takes a tour through the lifecycle methods available on a component. The most common methods you'll be using is componentDidMount and getDerivedStateFromProps.
Profiling ReactUse the dev tools performance profiling to debug slow parts of your React application.
Final ThoughtsCongratulations 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".