In this collection, we build a minimal flashcard application using React, primarily focusing on function components and the hooks API. To make sure we can understand and maintain existing code, there are also a few lessons toward the end that use class components so you can get familiar with the syntax. We cover important React concepts, and sprinkle in libraries that are pretty standard in the ecosystem like @reach/router, Jest, and React testing library. We start with create-react-app so we can get right into it without worrying about configuring tooling. There's [a separate course for that here](https://egghead.io/courses/modern-javascript-tooling-with-react?af=5mx0ie)

Getting started with a new frontend project can be daunting. Sometimes, configuring Babel, [webpack](/q/webpack), eslint, Jest and all the other tools common to most frontend applications, just holds you back from building something. The [React](/q/react) team has built and maintains create-react-app so you can start a project quickly without having to worry about setting up all the tooling. You get everything pre-configured with a lot of really sensible defaults. In this lesson, we'll bootstrap a project with npx and create-react-app so we can get right into building apps with React.

Bootstrap a new React project with npx and create-react-app

HTML is the standard way to define UI for browsers and it's a great way of representing the hierarchical structure of a web page. Since React is a JavaScript framework, all of the UI we build needs to be defined in JavaScript code, but that doesn't lend itself to being able to quickly write or read the code that defines our UI in terms of the HTML that will be rendered in the browser. Instead of writing raw, JavaScript functions, we'll write in JSX (JavaScript XML) to define our UI structure in a familiar, HTML-like, syntax and let the tools (Babel, specifically) turn that into standard JavaScript for the browser. In this lesson, we'll use JSX to render a static version of the beginning of our application.

Render a UI with JSX in a React Function Component

We want our applications to look good, and for that, we'll use standard CSS. In this lesson, we'll see how to load CSS files into a React application and how to apply classes from that CSS to the elements in our JSX.

Apply Styles to a UI in JSX

Components are at the core of building applications with React. In this lesson, we'll start with some static JSX markup and refactor it into a component that can be reused. We'll see how a React component is mostly "just JavaScript" when we use a JavaScript function to create that component. We'll also look at props in React and how we use props to configure specific instances of a component.

Create a Reusable React Component

To build interactive applications, we need our components to respond to events and to "remember" things about their current "state". With component state, we give our components internal data and the ability to control the value of that data over time. In this lesson, we'll add some internal state to a component and change that state in response to user input.

Maintain State in a React Component with the useState Hook

As the core unit of functionality in a React application, our components should be tested. Using Jest and Testing Library, we can render our individual components right in a test context and make assertions about their rendered output and behavior. Tests are a great way to work through API decisions, provide living documentation for your code, and to allow for confidence when refactoring. In this lesson, we'll create an initial test to verify the initial rendered output for a component, given specific props.

Test Component Rendering with Jest and Testing Library

Components do more than just render an initial view based on props. Components may also maintain their own internal state and update that state in response to events. Those state changes, will then lead to updates to the rendered output. In this lesson, we'll cover how to test a component and verify that it behaves as expected when we simulate a click event.

Test Component Interactions with Jest and Testing Library

When it comes time to load external data from a server, we need a way to fit that into our component flow in a way that won't block rendering, or impact the user experience in a negative way. In React, we'll handle this with the useEffect hook. In this lesson, we'll use the useEffect hook to encapsulate a fetch call to a REST endpoint and talk about when it runs and how to prevent it from running on every render.

We'll remix this project from glitch for this lesson: https://glitch.com/~studydeck

Load Data from an API with React.useEffect

Just about every application needs to render a list of values at some point. Since most of the work we do in React is "just JavaScript", we'll use standard, JavaScript array methods to handle that. In this lesson, we'll iterate over a list of objects with the Array.prototype.map method and for each item, we'll render the corresponding JSX for that item's UI. We'll also cover the key prop, which React will use to optimize how it handles changes to the list when rendering.

Display UI for List Items in JSX with Map

For development, we'll be using a separate server address to reach our REST endpoints. In a production build, this will likely be a different address, and in many cases, our UI will be served from the same domain as our services. We can keep our code clean and still prepare for the differences between dev and prod, by using an API proxy and a relative path to our REST endpoints. In this lesson, we'll configure a proxy for create-react-app and refactor our code to use a relative API path.

Setup an API Proxy in Create React App

Our components shouldn't be concerned with the implementation details around how we call our back end services. We may need to change details of how the API is called, we may want to add caching or offline storage and we may need to use the same API call in other components. To clean up our component code and abstract those details away from our component code, we'll move our fetch call into a service function and update our component to use our new function.

Refactor API Calls into a Service Function

Our unit tests should never rely on code that is outside our control and they certainly shouldn't be calling across the network to a server. A good test needs to be repeatable and fast and relying on outside systems and/or data doesn't help us meet those goals. In this lesson, we'll use mocks to create an environment where we control the response for service calls. This will allow us to be confident in our assertions and ensure our tests aren't flaky.

Mock Modules in a React Component Test

In React, we try to avoid mutating data structures and instead, treat them as immutable. This means an update to an object or an array should result in a new object or array that reflects the updates we want to make. This allows React to use reference comparison for optimization purposes. We don't always need this, but if we are consistent in treating data as immutable, we can take advantage of that whenever we need it without having to go back and change existing code. In this lesson, we'll see how we can remove an item from an array without mutating the original array.

Remove Items in a List Without Mutating the Source Array

We always want our rendered UI to be a function of our state. In order for that to hold, we need to control the rendered value of form inputs by making them controlled inputs. In this lesson, we'll create a form and use component state and event handling to maintain the input value in component state and control the rendering of our inputs based on that state.

Create a Form with Controlled Inputs in React

The default behavior of an HTML form is to submit a GET request with the values of all its child inputs as URL query parameters. In React, we'd rather handle that within our components and avoid the need for server-side form handling code. In this lesson, we'll wire up a submit handler for a form and manage the submission and rendering updates in React.

Handle Form Submissions in React

Sometimes, making your code more succinct can make the code more readable. Readable code is easier to grok for other developers and when everybody understands the code, it's easier to maintain and share the burden on a team. In this lesson, we'll refactor our code to make the JSX less verbose using object spread and destructuring.

Refactor React Components with Prop Spreading and Destructuring

Sometimes we want to conditionally render a child component based on some internal component state. In the case of inline editing, we need to be able to swap a component's rendered output between the read-only view of the data and the form for editing the data. In this lesson, we'll do exactly this, updating state based on user input and determining which of two components we should render based on that state value.

Conditionally Render Components in React

The term "upsert" means to support both inserting a new record and update an existing record. In order to support upsert capabilities with a form in React, we need to determine which mode we're in and if we're performing an update, we need to make sure the form fields are populated the existing values for the item being updated. In this lesson, we'll refactor an exiting form to handle updates and verify that we've also maintained the ability to use that same form component to insert new records.

Make a React Form Component that Handles Inserts and Updates

When we reuse components that rely on HTML id attributes, we run the risk of rendering HTML that results in duplicate IDs in the HTML. IDs are meant to be unique and this is problematic when rendering multiple forms, where IDs are used to make the association between labels and inputs. If this association is broken, it leads to unexpected behavior and is an accessibility issue. In this lesson, we'll look at how we can conditionally assign IDs and ensure that we don't render duplicate IDs, even when rendering several instances of the same form component on the page.

Avoid Duplicate id Attributes when Reusing Form Components

From a user perspective, navigating your application should be the same whether its a server-rendered PHP app, or a single page app written with React. To avoid breaking known paradigms for our users, we want as link to behave like a link. A view change should come with corresponding updates to the browser's address bar and the back button should work as expected. In this lesson, we'll install @reach/router and set our application up with a second view that we can navigate to with a link. We'll also verify that the browser's back button works.

Support Multiple Views in a Single Page Application with @reach/router

The hooks API that brought us useState, useEffect, and others became available in React 16.8, but the class syntax for creating components is still fully supported. Unless you're only working on brand-new React code, odds are good that you're going to come across components built as classes. In this lesson, we'll build a new component using the class syntax.

Create a React Component Using the Class Syntax

In React, our UI is a function of state (and props). In this lesson, we'll create some internal state and pass some props into a class component and use them together to render some UI in the class component's `render` method.

Render UI Based on Props and State in a Class Component

Before the hooks API was introduced, class components were the only way to create stateful components. With countless class-based React components in the wild, you'll need to know how to support them, even if other parts of your code base use hooks. In this lesson, we'll handle user events and update the component's state in response to those events with React's setState method.

Manage State and Respond to User Events in a Class Component 

We often need to move in one direction or another in a JavaScript array to focus on one value at a time. When we hit an upper or lower bound, it's convenient to have the referenced index jump to the other end of the array so we can keep cycling through in that same direction. In this lesson, we'll apply this to a React UI, allowing the UI to "jump" to the beginning of the array when we hit "next" at the end of the array, and to jump to the last item in the array when moving "back" and we hit the lower bound of the array and we'll do it by taking advantage of the `%` (modulus) operator.

Build a React App with the Hooks API

Instructor

Course content (24 lessons)

Instructor