Cara Connect React dengan REST API

Dalam tutorial ini, kita akan belajar cara connect React dengan REST API menggunakan library Axios. Kami akan menggambarkan langkah-langkahnya mulai dari instalasi hingga mengambil dan menampilkan data dari API.

React sendiri merupakan salah satu framework JavaScript populer yang digunakan untuk membangun antarmuka pengguna yang interaktif. Namun, ketika Anda ingin mengambil atau mengirim data dari server, Anda perlu menghubungkan React dengan REST API.

Instalasi

Untuk menginstal aplikasi React, Anda dapat mengikuti langkah-langkah berikut:

Pastikan Anda memiliki Node.js dan npm terinstal di komputer Anda. Node.js biasanya disertai dengan npm. Anda dapat memeriksa apakah Node.js sudah terinstal dengan menjalankan perintah berikut di terminal:

node -v

Jika Node.js sudah terinstal, Anda akan melihat versi Node.js yang terpasang. Jika tidak ada yang terlihat, Anda perlu menginstal Node.js.

Selanjutnya, Buka terminal dan pindah ke direktori tempat Anda ingin membuat proyek React. Jalankan perintah berikut untuk membuat proyek React menggunakan Create React App:

npx create-react-app nama-proyek

Gantilah “nama-proyek” dengan nama yang Anda inginkan untuk proyek Anda.

Setelah perintah selesai dieksekusi, Anda dapat masuk ke direktori proyek dengan menjalankan perintah:

cd nama-proyek

Setelah itu kita perlu menginstal library Axios, yang akan kita gunakan untuk melakukan permintaan HTTP ke REST API. Buka terminal dan jalankan perintah berikut:

npm install axios

Sekarang Anda dapat menjalankan aplikasi React dengan menjalankan perintah:

npm start

Perintah ini akan memulai server pengembangan dan aplikasi React akan dijalankan dalam mode pengembangan. Setelah itu, Anda dapat membuka browser dan pergi ke alamat http://localhost:3000 untuk melihat aplikasi React yang sedang berjalan.

Connect Komponen React dengan REST API

Buatlah komponen React yang akan berfungsi sebagai wadah untuk memanggil API dan menampilkan data yang diterima. Misalnya, kita akan membuat komponen UserList yang akan menampilkan daftar pengguna dari API.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      <h1>User List</h1>
      {users.map(user => (
        <div key={user.id}>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      ))}
    </div>
  );
};

export default UserList;

Berikut penjelasan dari code di atas:

1. Pertama, kita mengimpor React, useEffect, useState, dan axios dari library yang sesuai.
2. Kemudian, kita mendefinisikan komponen UserList sebagai functional component.
3. Di dalam komponen, kita menggunakan useState hook untuk membuat state users yang awalnya kosong.
4. Menggunakan useEffect hook, kita melakukan pemanggilan API saat komponen pertama kali dirender. Kita menggunakan axios.get untuk melakukan permintaan GET ke URL API yang sesuai. Setelah menerima respons, kita menggunakan setUsers untuk memperbarui state users dengan data pengguna yang diterima.
5. Dalam metode render, kita menggunakan map untuk meloop melalui setiap objek pengguna dalam users dan menampilkannya dalam elemen <div>. Kita menggunakan properti key untuk memberikan kunci unik kepada setiap elemen dalam daftar.
6. Komponen UserList diekspor sehingga dapat digunakan di komponen lain dalam aplikasi React.

Anda dapat menggunakan komponen UserList ini dalam komponen induk lain atau dalam aplikasi React Anda untuk menampilkan daftar pengguna dari API yang ditentukan. Pastikan untuk mengganti URL API dengan endpoint yang sesuai dengan API yang ingin Anda gunakan.

Kesimpulan

Connect React dengan REST API adalah langkah penting dalam mengembangkan aplikasi web yang interaktif. Dengan menggunakan library seperti Axios, Anda dapat dengan mudah melakukan permintaan HTTP ke endpoint API dan mengambil data yang diperlukan