Not long after getting started with React, you'll want to pull in some data from an external source, whether that's your own API or someone else's. In this module we'll be building a Pet Store where we can view a list of pets in the adoption center, add new pets, edit their names and photos, and delete (er, adopt) them.

We'll start with a static app with hardcoded data and refactor it piece-by-piece until all the data is coming and going from an API server.

Before we start in on making API requests, it'll be helpful to understand the terminology. In this lesson we'll go over how HTTP requests work, what REST and CRUD are, important HTTP verbs to know (`GET/POST/PUT/PATCH/DELETE`) and how response codes work.

Basics of REST and HTTP

We're going to build a Pet Store app that lets you list pets, add and edit them, and remove (adopt) them. Here we'll have a look at the finished app and how to approach building it.

Finished Product First: the Pet Store App We'll Be Building

We're going to build a Pet Store app that lets you list pets, add and edit them, and remove (adopt) them. Here we'll lay the groundwork by setting up a server to store the list of pets and  be able to perform CRUD operations (Create, Read, Update, Delete) on that list.

Set up a REST Server with json-server

Starting with a static list of pets in the shop, we'll modify app to fetch the list from a server. In this lesson we'll be using the `useEffect` hook to kick off the data fetch to our `json-server` back end, then use Promises to handle the response.

Fetch a List of Data with useEffect and Promises

The `useEffect` hook doesn't care whether you use Promises or async/await to fetch data, but if you use async/await, there are a few things to be aware of. You can't, for instance, make the effect function itself async. In this lesson we'll look at the right way to fetch data inside `useEffect` with async/await.

Fetch a List of Data with useEffect and async/await

We can provide a better user experience by showing a loading indicator while the data is loading. In this lesson we'll add a loading indicator with `useState`.

Display a Loading Indicator

To be able to add pets to our shop, we need a form to input their data, and somewhere to display that form. In this lesson we'll install a library for creating modal dialogs, and display a dialog when the Add Pet button is clicked.

Display a Modal Dialog Using react-modal

Inside the modal dialog, we need a form to input the pet's data. In this lesson we'll create a component to hold the modal and the form, and create fields for the pet's Name and Kind.

Create a New Pet Form

We'd like users to be able to upload a picture of their pet. In this lesson we'll add a file input to the form and learn how to load a file from disk when the user selects one.

Use a File Input to Upload an Image

The New Pet form currently doesn't do anything when you click Save, so in this lesson we'll remedy that by adding a pet to our local list of pets. This will lay the groundwork for making the call to the server.

Implement Saving Pet Data Locally

The app is currently saving the pet locally, but it's not persisted to the server. In this lesson we'll add the HTTP POST call to save the pet data, and refresh the list. We'll also implement a saving state, disable the buttons while the save is under way, and display any errors that the server returns.

Use HTTP POST to Save the Pet to the Server

In this lesson we'll save the updated pet data to the server so that the data will persist across page refreshes. We'll create a new component for the Edit modal and its form. You'll also get to see some debugging to track down the cause of a missing property in the PUT calls to the server.

Use HTTP PUT to Update the Pet on the Server

The "New Pet" and "Edit Pet" forms are very similar, so in this lesson we'll look at how to refactor them into one form component and DRY up the code.

Refactor New and Edit Forms into One

Adoption day is here at last! In this lesson we'll send the DELETE request to the server when the user clicks on the Adopt button and confirms their decision.

Use HTTP DELETE to Remove a Pet from the Server

Sometimes you need to interact with an unfamiliar API, and there is little to no documentation on how it works. In this lesson we'll use the Reddit API as a case study and reverse-engineer the data format using Chrome's Developer Tools. Once we understand the data, we can fetch it and display it inside an app.

API Requests in React

Instructor

Course Content