part_1 Access Data from an External API into a React Component - b05313fsldsp/web-for-kusapi GitHub Wiki

Access Data from an External API into a React Component

a. Set up a React App
b. Modify the App Component
c. Get Data Using Fetch API
d. Get Data Using Axios
e. Conclusion
Introduction - Fetching data from an external API and rendering React components with that data is a common task in building React apps. In this guide you will learn how to fetch JSON data from the GitHub Users API and render that data inside a React component. This will help you make asynchronous requests initiated by the browser (including those across the network) for fetching resources.
Approaches - There are two approaches you will leverage to get the data from the network. <1> Fetch, a Web API available in browsers to fetch network resources. <2> Axios, a Promise based npm library for browser and node.js. You will fetch data from the GitHub Users API for a specific username and render a React component that displays the user's details, including the name, location, blog URL, and company name for that user.
Set up a React App - The first step is to set up a React app. Open your terminal and run these commands to get a sample Create React App (CRA) running on your machine.
$ npx create-react-app access-api-react

$ cd access-api-react

###### This starts your app in development mode. To check if the sample app is running, open http://localhost:3000 in your browser. You should see a React logo. Come back to your terminal and add the npm dependency for axios inside the root of the project. You will need this library to send a request to the GitHub API.
Modify the App Component - Open the project in your favorite editor and remove all the boilerplate code from the component. You will find the file inside your src/ directory. Add the code below in your component. 
import React, { useState, useEffect } from "react";
import "./App.css";

const gitHubUrl = "https://api.github.com/users/deekshasharma";

function App() {
  const [userData, setUserData] = useState({});

  useEffect(() => {
    getGitHubUserWithFetch();
  }, []);

  const getGitHubUserWithFetch = async () => {};

  return (
    <div className="App">
      <header className="App-header">
        <h2>GitHub User Data</h2>
      </header>
      <div className="user-container">
        <h5 className="info-item">{userData.name}</h5>
        <h5 className="info-item">{userData.location}</h5>
        <h5 className="info-item">{userData.blog}</h5>
        <h5 className="info-item">{userData.company}</h5>
      </div>
    </div>
  );
}

export default App;
⚠️ **GitHub.com Fallback** ⚠️