Cara Fetching Data API di ReactJS

Tutorial ini adalah lanjutan dari tutorial sebelumnya. Jika belum mengikutinya saya sarankan kamu untuk membaca dan mengikutinya terlebih dahulu: Membuat Single Page Application (SPA) Dengan ReactJS.

Requirement

Sudah menginstall GIT, jika belum kamu dapat mengikuti tutorialnya pada link berikut ini: Cara Mudah Belajar GIT & GitHub di Windows Secara Step By Step.
Telah mengetahui dasar-dasar HTML, jika belum kamu dapat mengikuti tutorialnya pada link berikut: Bagian 1 HMTL – Tahap Awal Untuk Menjadi Web Developer.
Telah mengetahui dasar-dasar CSS, jika belum kamu dapat mengikuti tutorialnya pada link berikut: Bagian 2 CSS – Permulaan Untuk Menjadi Front End Developer.
Sudah menginstall nodejs, jika belum kamu dapat mengikuti tutorialnya pada link berikut: Persiapan Awal Belajar NodeJS Beserta Panduan Installasinya.
Telah mengetahui dasar-dasar dari reactJS, jika belum kamu dapat mempelajarinya pada link berikut: Apa itu ReactJS dan Bagaimana Cara Menggunakannya? dan Membuat Single Page Application (SPA) Dengan ReactJS.
Menggunakan OS Windows, Linux atau macOS

Sebelum masuk ke bagian inti dari tutorial ini ada beberapa bagian yang perlu kita bahas terlebih dahulu.

API

API (Application Programming Interface) pada dasarnya adalah sekumpulan data yang menggunakan format JSON. Di dalam file JSON kita dapat melihat field dan value secara spesifik dan dapat mengambil keseluruhan ataupun beberapa data yang kita perlukan saja. Pada tutorial ini kita akan belajar membuat project untuk menampilkan informasi data user di beberapa negara yang datanya di ambil dari API random user generator.

Hasil akhir dari tutorial ini

Pada API tersebut kita bisa mengambil data secara spesifik, misalnya mengambil data list nama, photo, serta asal negara dari API random user.

Baiklah selanjutnya mari kita buat projectnya terlebih dahulu.

Silahkan klik tombol Next Step di bawah ini untuk melanjutkan belajar.

Step by Step Fetching Data API Dengan ReactJS

Create Project

Membuat project dengan menginstall ReactJS yang di simpan di dalam folder documents. Silahkan buka terminal dan ketik perintah seperti di bawah ini.

cd documents
create-react-app react_api
cd react_api
npm i react-router-dom --save
npm start

Perintah di atas adalah cara untuk mengarahkan ke direktori documents dan mendownload reactjs dengan nama react_api. Setelah berhasil di download selanjutnya kita arahkan ke direktori react_api dengan perintah cd react_api lalu menjalankan localhost server dengan perintah npm start.

2. Open folder react_api di text editor

Open folder react_api di text editor, misalnya sublime text, atom, dsb. Selanjutnya hapus semua file di dalam folder public dan folder src seperti gambar di bawah ini (sebelah kiri adalah di folder public dan sebelah kanan adalah di folder src).

3. Buat file index.html dan simpan di dalam folder public dengan code seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>API RANDOM USER</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

4. Buat file index.js dan simpan di dalam folder src dengan code seperti di bawah ini.

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./style.css";

ReactDOM.render(
  <Main/>,
  document.getElementById("root")
);

5. Buat file Main.js dan simpan di dalam folder src dengan isi seperti berikut.

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Australia from "./Australia";
import Turkey from "./Turkey";
import About from "./About";



class Main extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <h1 className="title">Fetching Data API</h1>
          <ul className="header">
            <li><NavLink exact to="/">Home</NavLink></li>
            <li><NavLink to="/australia">Australia</NavLink></li>
            <li><NavLink to="/turkey">Turkey</NavLink></li>
            <li><NavLink to="/about">About</NavLink></li>

          </ul>
          <div className="content">
            <Route exact path="/" component={Home}/>
            <Route exact path="/australia" component={Australia}/>
            <Route exact path="/turkey" component={Turkey}/>
            <Route exact path="/about" component={About}/>
          </div>
        </div>
        </HashRouter>
    );
  }
}

export default Main;

Script di atas adalah untuk membuat menu yang akan menampilkan content data API.

6. Buat file Home.js dan simpan di dalam folder src dengan isi seperti berikut.

import React, { Component } from "react";


class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentDidMount() {
      fetch("https://randomuser.me/api/?results=10")
        .then(res => res.json())
        .then(parsedJSON => parsedJSON.results.map(data => (
          {
            id: `${data.id.name}`,
            firstName: `${data.name.first}`,
            lastName: `${data.name.last}`,
            location: `${data.location.state}, ${data.nat}`,
            thumbnail: `${data.picture.large}`,

          }
        )))
        .then(items => this.setState({
          items,
          isLoaded: false
        }))
        .catch(error => console.log('parsing failed', error))
    }

    render() {
      const {items } = this.state;
        return (
          <div className="boxWhite">
            <h2>Random User</h2>
            {
              items.length > 0 ? items.map(item => {
              const {id, firstName, lastName, location, thumbnail} = item;
               return (

               <div key={id} className="bgCircle">
               <center><img src={thumbnail} alt={firstName} className="circle"/> </center><br />
               <div className="ctr">
                  {firstName} {lastName}<br />
                  {location}
                </div>

              </div>
              );
            }) : null
          }
          </div>
        );

    }
  }

export default Home;

7. Buat file Australia.js dan simpan di dalam folder src dengan isi seperti berikut.

import React, { Component } from "react";


class Australia extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentDidMount() {
      fetch("https://randomuser.me/api/?results=10&nat=au")
        .then(res => res.json())
        .then(parsedJSON => parsedJSON.results.map(data => (
          {
            id: `${data.id.name}`,
            firstName: `${data.name.first}`,
            lastName: `${data.name.last}`,
            location: `${data.location.state}, ${data.nat}`,
            thumbnail: `${data.picture.large}`,

          }
        )))
        .then(items => this.setState({
          items,
          isLoaded: false
        }))
        .catch(error => console.log('parsing failed', error))
    }

    render() {
      const {items } = this.state;
        return (
          <div className="boxWhite">
            <h2>Random User</h2>
            {
              items.length > 0 ? items.map(item => {
              const {id, firstName, lastName, location, thumbnail} = item;
               return (

               <div key={id} className="bgCircle">
               <center><img src={thumbnail} alt={firstName} className="circle"/> </center><br />
               <div className="ctr">
                  {firstName} {lastName}<br />
                  {location}
                </div>

              </div>
              );
            }) : null
          }
          </div>
        );

    }
  }

export default Australia;

8. Buat file Turkey.js dan simpan di dalam folder src dengan isi seperti berikut.

import React, { Component } from "react";


class Turkey extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentDidMount() {
      fetch("https://randomuser.me/api/?results=10&nat=tr")
        .then(res => res.json())
        .then(parsedJSON => parsedJSON.results.map(data => (
          {
            id: `${data.id.name}`,
            firstName: `${data.name.first}`,
            lastName: `${data.name.last}`,
            location: `${data.location.state}, ${data.nat}`,
            thumbnail: `${data.picture.large}`,

          }
        )))
        .then(items => this.setState({
          items,
          isLoaded: false
        }))
        .catch(error => console.log('parsing failed', error))
    }

    render() {
      const {items } = this.state;
        return (
          <div className="boxWhite">
            <h2>Random User</h2>
            {
              items.length > 0 ? items.map(item => {
              const {id, firstName, lastName, location, thumbnail} = item;
               return (

               <div key={id} className="bgCircle">
               <center><img src={thumbnail} alt={firstName} className="circle"/> </center><br />
               <div className="ctr">
                  {firstName} {lastName}<br />
                  {location}
                </div>

              </div>
              );
            }) : null
          }
          </div>
        );

    }
  }

export default Turkey;

9. Buat file About.js dan simpan di dalam folder src dengan isi seperti berikut.

import React, { Component } from "react";


class About extends Component {
  render() {
    return (
      <div>
        <h2>About Random User</h2>
        <p>RANDOM USER GENERATOR A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.
        </p>
      </div>
    );
  }
}

export default About;

10. Buat file style.css dan simpan di dalam folder src dengan isi seperti berikut.

body {
  background-color: #2D3B48;
  padding: 20px;
  margin: 0;
}
.title {
  color: white;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: #24CED0;
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}

.boxWhite {
  height: 700px;
  background: white;
}
.bgCircle {
  border-radius: 50%;
  width: 230px;
  height: 230px;
  background-color: #24CED0;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 10px;
  float: left;
  font-size: 13px;

}

.circle {
  border-radius: 50%;
}
.ctr {
  text-align: center;
}

Sampai saat ini kita telah mengetahui cara fetching data API di ReactJS.

Jika tutorial ini dirasa bermanfaat mohon di share ya dan tungguin juga tutorial selanjutnya ?

Cara Fetching Data API di ReactJS

Requirement

API

Step by Step Fetching Data API Dengan ReactJS

Andry Lubis

Next Post