When we create a Single Page Application (SPA), we often need to integrate APIs. Sometimes third-party APIs, but at least our own back-ends to get the data we need to display. These APIs are based on the HTTP or WebSocket protocol, each having its requirements for connection setup and tear down.

In this article, I explain the basic integration of HTTP APIs.

What

HTTP is a stateless protocol. It’s the simplest way to get data from the server.

• call the fetch function
• get a promise
• wait until the promise resolves
• update the application with the new data

Sometimes HTTP requests fail…

First, what is a context?

A context is a way to store and pass down data a React element tree without writing it into a prop every layer of the hierarchy. It consists of two components, a Provider and a Consumer.

A Provider stores some data that can be accessed via the Consumer somewhere in the tree below the Provider. So the Consumer has to be a descendant of the Provider.

A Consumer accesses the Provider data and makes it available to its children via a render prop. …

What

First, what is a render prop (RP)?

A RP is simply a prop that takes a function which returns elements that will be used in render().

You can pass an element directly into a prop and use it in render() which would make the whole thing a RP by name, but generally, when people speak about RPs, they mean the first definition.

Also, since the children of a component are also a prop, you can use them instead of other/named props, which is also called function as children.

const C = props => props.renderProp(); // or const C = props…