How to fetch data from an API in ReactJS ?

18 Aug, 2021
ReactJS: ReactJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
API: API is an abbreviation for Application Programming Interface which is a collection of communication protocols and subroutines used by various programs to communicate between them. A programmer can make use of various API tools to make its program easier and simpler. Also, an API facilitates the programmers with an efficient way to develop their software programs.
Approach: In this article, we will know how we fetch the data from API (Application Programming Interface). For the data, we have used the API endpoint from http://jsonplaceholder.typicode.com/users we have created the component in App.js and styling the component in App.css. From the API we have target “id”, “name”, “username”, “email”  and fetch the data from API endpoints. Below is the stepwise implementation of how we fetch the data from an API in react. We will use the fetch function to get the data from the API.
Step by step implementation to fetch data from an api in react.
Step 1: Create React Project npm create-react-app MY-APP 
Step 1: Create React Project 
npm create-react-app MY-APP 
Step 2: Change your directory and enter your main folder charting ascd MY-APP
Step 2: Change your directory and enter your main folder charting as
cd MY-APP
Step 3: API endpoint https://jsonplaceholder.typicode.com/usersAPI
Step 3: API endpoint 
https://jsonplaceholder.typicode.com/users
API
Step 4: Write code in App.js to fetch data from API and we are using fetch function.
Step 4: Write code in App.js to fetch data from API and we are using fetch function.
Project Structure: It will look the following.
Project Structure
Example:
App.js
import React from "react";import './App.css';class App extends React.Component {       // Constructor     constructor(props) {        super(props);           this.state = {            items: [],            DataisLoaded: false        };    }       // ComponentDidMount is used to    // execute the code     componentDidMount() {        fetch("https://jsonplaceholder.typicode.com/users")            .then((res) => res.json())            .then((json) => {                this.setState({                    items: json,                    DataisLoaded: true                });            })    }    render() {        const { DataisLoaded, items } = this.state;        if (!DataisLoaded) return <div>            <h1> Pleses wait some time.... </h1> </div> ;           return (        <div className = "App">            <h1> Fetch data from an api in react </h1>  {                items.map((item) => (                 <ol key = { item.id } >                    User_Name: { item.username },                     Full_Name: { item.name },                     User_Email: { item.email }                     </ol>                ))            }        </div>    );}}   export default App;
Write code in App.css for styling the app.js file.
App.css
.App {    text-align: center;    color: Green;}.App-header {    background-color: #282c34;    min-height: 100vh;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    font-size: calc(10px + 2vmin);    color: white;}.App-link {    color: #61dafb;}  @keyframes App-logo-spin {    from {        transform: rotate(0deg);    }    to {        transform: rotate(360deg);    }}
Step to run the application: Open the terminal and type the following command.  
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS setState()
How to pass data from one component to other component in ReactJS ?
Re-rendering Components in ReactJS
ReactJS defaultProps
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React