Tutorial React Js - Cara Mengambil dan Menampilkan atau Fetch Data API

Assalamualikum, wr. wb. Kali ini kita langsung belajar cara mengambil dan menampilkan data API. Seperti yang kalian ketahui bahwa react js sebagai Frontend hanya perlu API untuk dikelola, salah satunya adalah dengan menampilkan data. Oke untuk saat ini kita coba untuk mengambil dan menampilkan data dari API publik dari github.

Sebelumnya, saat tutorial ini dibuat, masih menggunakan React Js 17.0.1 . Kita juga akan menggunakan react Hooks, untuk menangambil dan mengelola data, yaitu useState dan useEffect.

Langsung saja buat projek seperti yang sudah dijelaskan pada halaman berikut (klik).

Lalu pada pada file App.js ketikkan kode seperti berikut ini.

import React, { useState, useEffect } from 'react'
import './App.css';

function App() {
  const url = 'https://api.github.com/users'

  const [users, setUsers] = useState([])

  const getDataUsers = async () => {
    const response = await fetch('https://api.github.com/users')
    const dataku = await response.json()
    const users = dataku.slice(0, 8)
    setUsers(users)
  }

  useEffect(() => {
    getDataUsers()
  }, [])

  return (
    <div className="App">
      <h3>List Users</h3>
      {users.map((user) => {
        return (
          <p key={user.id}>
            {user.login}
          </p>
        )
      })}
    </div>
  );
}

export default App;

Jika sudah silahkan save dan cek hasilnya dengan url localhost:3000

Penjelasan:

• Pertama kita buat variable dengan nama url untuk menyimpan alamat API yang ingin kita ambil datanya
• Kemudian kita buat variable users dan setUsers untuk menyimpan data yang dibawa oleh useState
• Lalu kita fetch datanya secara asynchronous seperti kode di atas. Dan kita simpan data tersebut menggunakan fungsi setUsers(users)
• Oh ya disitu ada fungsi slice, karena kita hanya ingin menampilkan beberapa data saja
• Setelah itu, kita jalankan fungsi getDataUsers() menggunakan useEffect agar lebih simple
• Terakhir, untuk menampilkan ke view, kita gunakan fungsi map()

Gimana? mudahkan? Mohon maaf jika ada yang kurang jelas. Silahkan dieksplor sendiri, jika ada pertanyaan silahkan tulis di kolom komentar. Sekian semoga bermanfaat, Wassalamualaikum, wr. wb.