Introduction

In  React development, web application programming interfaces (APIs) are an integral part of  single-page application (SPA) designs. APIs are the primary way for applications to programmatically communicate with servers to provide users with real-time data and to save user changes. In React applications, you will use APIs to load user preferences, display user information, fetch configuration or security information, and save application state changes.

In this tutorial, you’ll use the useEffect and useState Hooks to fetch and display information in a sample application, using  JSON server as a local API for testing purposes. You’ll load information when a component first mounts and save customer inputs with an API. You’ll also refresh data when a user makes a change and learn how to ignore API requests when a component unmounts. By the end of this tutorial, you’ll be able to connect your React applications to a variety of APIs and you’ll be able to send and receive real-time data.

Prerequisites

• You will need a development environment running  Node.js; this tutorial was tested on Node.js version 10.22.0 and npm version 6.14.6. To install this on macOS or Ubuntu 18.04, follow the steps in  How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of  How To Install Node.js on Ubuntu 18.04.
• A React development environment set up with  Create React App, with the non-essential boilerplate removed. To set this up, follow Step 1 — Creating an Empty Project  of the How To Manage State on React Class Components tutorial. This tutorial will use api-tutorial as the project name.
• You will be using React components and Hooks in this tutorial, including the useState and useEffect Hooks. You can learn about components and Hooks in our tutorials  How To Manage State with Hooks on React Components and  How To Handle Async Data Loading, Lazy Loading, and Code Splitting with React.
• You will also need a basic knowledge of JavaScript and HTML, which you can find in our  How To Build a Website with HTML series and in  How To Code in JavaScript. Basic knowledge of CSS would also be useful, which you can find at the  Mozilla Developer Network.

#react #api #json