Terakhir diperbarui: 2021-03-07

API dan React Router di ReactJS

Pada codelab ini Anda akan mempelajari tentang pengambilan data melalui API (Application Programming Interface) dan membuat navigasi untuk berpindah halaman menggunakan React Router.

Pengetahun yang Anda harus miliki

Sebelum memulai codelab ini, sebaiknya Anda memiliki pengetahuan dasar tentang:

• Pemrograman dasar dengan HTML, CSS, dan JavaScript
• Cara membuat project baru di ReactJS
• Konsep DOM (Document Object Model)
• Konsep ReactJS Bagian 1
• Konsep ReactJS Bagian 2

Apa yang Anda akan pelajari

• Mengambil data dari API
• Membuat routing di ReactJS

Apa yang Anda perlu persiapkan

• Laptop/PC
• Koneksi internet yang stabil
• Node.js telah ter-install dan dikenali secara global dalam sistem
• VS Code sebagai editor
• Chrome browser

Application Programming Interface (API) adalah antarmuka untuk saling bertukar data antar perangkat lunak dan keras atau pun sesama perangkat keras. Didefinisikan berupa request dengan format tertentu yang harus dipatuhi, biasanya berformat JSON atau XML.

Dalam React, kita berkomunikasi dengan API menggunakan AJAX. Anda bisa menggunakan library AJAX apa saja yang Anda inginkan dengan React. Beberapa yang populer yaitu Axios, jQuery AJAX, dan window.fetch bawaan browser.

Praktikum 1: Menampilkan data dari API

Data API yang digunakan dari https://jsonplaceholder.typicode.com/ . Silakan lakukan langkah-langkah praktikum berikut ini.

1. Buka project React di VS Code yang sebelumnya telah dibuat.
2. Buka file di src/index.js. Hapus kode program dari praktikum sebelumnya dan buatlah sebuah komponen bernama DaftarArtikel

function DaftarArtikel(props){
  return(
    <div>
      <h3>{props.judul}</h3>
      <div>{props.isiArtikel}</div>
    </div>
  );
}

3. Kemudian buat komponen Blog dengan class extends React.Component

class Blog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,         // jika terjadi gagal ambil data dari API
      isLoaded: false,     // untuk status ketika sedang memuat
      dataArtikel: []      // untuk menampung data API
    };
  }

  // ... isi method selanjutnya di sini ...
}

4. Tambahkan method componentDidMount() yang berisi request data API ke dalam component Blog tersebut. Method ini akan dipanggil sebelum render komponen. Pahami kode berikut.

  componentDidMount(){
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(
        (dataJson) => {
          this.setState({
            isLoaded: true,
            dataArtikel: dataJson
          })
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        })
  }

5. Terakhir tambahkan method render() ke class Blog untuk menampilkan daftar artikel yang sudah diperoleh dari API.

render () {
    const { error, isLoaded, dataArtikel } = this.state;
    
    if (error) {
      return <div>Terjadi galat: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Sedang memuat...</div>;
    } else {
      return (
        <div>
          <h2>Daftar Artikel</h2>
          {
            dataArtikel.map(artikel => {
              return <DaftarArtikel judul={artikel.title} isiArtikel={artikel.body} />
            })
          }
        </div>
      );
    }
  }

6. Save file src/index.js tersebut, lalu npm start untuk melihat hasilnya di browser. Maka akan tampil daftar artikel sesuai data dari https://jsonplaceholder.typicode.com/posts .
7. Lakukan inspeksi elemen, lalu buka console browser. Di situ akan terlihat ada error bahwa React meminta untuk menambahkan key pada tiap komponen artikel. Silakan ditambahkan key menggunakan data id dari artikel tersebut.

Di React, Anda dapat membuat Single Page Application (SPA) dengan memanfaatkan React Router. React Router adalah sekumpulan dari komponen navigasi yang dapat digabungkan (compose) secara deklaratif dengan aplikasi web.

Singkatnya, Anda dapat membuat menu atau tautan di halaman web yang ketika diklik dapat memuat konten tanpa reload atau refresh halaman web. Jadi, seakan-akan kita berada di satu halaman web yang sama, karena itu disebut aplikasi satu halaman (Single Page Application / SPA). Untuk memahaminya lebih lanjut, silakan lakukan praktikum berikut ini.

Praktikum 2: Membuat routing sederhana

Pada praktikum ini, Anda akan membuat 3 halaman yang di-handle oleh router, yaitu halaman beranda, halaman berita, dan halaman tentang. Silakan lakukan langkah-langkah praktikum berikut ini.

1. Install React Router terlebih dahulu dengan npm pada terminal atau console Anda:

npm install react-router-dom

2. Buka file src/App.js pada project React Anda di VS code.
3. Hapus kode program sebelumnya yang ada di src/App.js, lalu import react-router-dom:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

4. Kemudian buat 3 komponen halaman Beranda, Berita, dan Tentang:

function Beranda () {
  return <h2>Beranda</h2>;
}

function Berita () {
  return <h2>Berita</h2>;
}

function Tentang () {
  return (
  <div>
      <h2>Tentang</h2>
      <h3>NIM: isi NIM Anda</h3>
      <h3>Nama: isi Nama Anda</h3>
  </div>
  );
}

5. Selanjutnya buat komponen App sebagai komponen utama yang akan di-render. Komponen App ini berisi navigasi Router (menu) yang memanggil 3 komponen tadi. Sintaks export default di awal function App berfungsi agar dapat kita import nanti di file src/index.js.

export default function App () {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Beranda</Link>
            </li>
            <li>
              <Link to="/berita">Berita</Link>
            </li>
            <li>
              <Link to="/tentang">Tentang</Link>
            </li>
          </ul>
        </nav>

        {/* Tag <Switch> akan mencari link yang cocok di dalam <Route> dan melakukan render sesuai URL yang diklik. */}
        <Switch>
          <Route path="/berita">
            <Berita />
          </Route>
          <Route path="/tentang">
            <Tentang />
          </Route>
          <Route path="/">
            <Beranda />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

6. Berikutnya buka file src/index.js dan hapus kode program sebelumnya. Ganti dengan kode program berikut ini:

import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

7. Silakan save lalu run npm start untuk melihat hasilnya di browser dan coba klik tiap menu yang tersedia, seharusnya sudah dapat berubah kontennya sesuai menu yang diklik.

Praktikum 3: Membuat routing bersarang (Nested Routing)

Anda dapat membuat routing bersarang, maksudnya ketika suatu link diklik di dalam link tersebut terdapat daftar link atau menu yang dapat diklik juga. Jadi, dalam praktikum ini akan dibuat susunan URL atau link seperti berikut:

Untuk memahaminya, silakan lakukan langkah-langkah praktikum berikut ini:

1. Buka file src/App.js pada project React Anda. Beberapa kode program dari praktikum 2 dapat tetap digunakan atau disesuaikan.
2. Tambahkan import yang dibutuhkan seperti kode berikut:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

3. Selanjutnya membuat komponen Beranda dan Tentang. Silakan isi NIM dan Nama Anda pada bagian komponen Tentang.

function Beranda () {
  return <h2>Beranda</h2>;
}

function Tentang () {
  return (
  <div>
      <h2>Tentang</h2>
      <h3>NIM: isi NIM Anda</h3>
      <h3>Nama: isi Nama Anda</h3>
  </div>
  );
}

4. Berikutnya kita akan membuat komponen Codelabs dan Topik. Komponen Codelabs berisi route atau link yang akan ditampilkan ke fungsi render() nantinya.

function Topik () {
  let { topicId } = useParams();
  return <h3>Topik yang terpilih: {topicId}</h3>;
}

function Codelabs () {
  let match = useRouteMatch();

  return (
    <div>
      <h2>Codelabs</h2>
      <ul>
        <li>
          <Link to={`${match.url}/konsep-reactjs`}>Konsep ReactJS</Link>
        </li>
        <li>
          <Link to={`${match.url}/belajar-react-router`}>
            Belajar React Router
          </Link>
        </li>
      </ul>

      {/* Pada halaman Codelabs ini memiliki <Switch> sendiri dengan beberapa route lagi
          di dalam URL /codelabs . Pada bagian route kedua merupakan route default atau
          jika tidak satu pun link topik dipilih. */}
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topik />
        </Route>
        <Route path={match.path}>
          <h3>Silakan Pilih Topik Codelab yang tersedia.</h3>
        </Route>
      </Switch>
    </div>
  );
}

5. Terakhir buat komponen utama yaitu App() yang berisi menu atau daftar link utama.

export default function App () {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Beranda</Link>
          </li>
          <li>
            <Link to="/tentang">Tentang</Link>
          </li>
          <li>
            <Link to="/codelabs">Codelabs</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/tentang">
            <Tentang />
          </Route>
          <Route path="/codelabs">
            <Codelabs />
          </Route>
          <Route path="/">
            <Beranda />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

6. Save file src/App.js tersebut lalu perhatikan hasilnya di browser. Seharusnya tampil tiga link utama, jika link Codelabs diklik maka akan muncul dibawahnya pilihan link lagi yang bisa Anda klik.

Untuk mempelajari lebih lanjut terkait React Router dapat mengaksesnya di sini.

Berdasarkan pada praktikum sebelumnya yang telah dilakukan, Anda diminta untuk membuat tampilan halaman web tersebut lebih menarik dengan style atau tema dari bootstrap. Untuk menu lebih rinci dapat dilihat pada tabel berikut ini:

Selamat, Anda telah berhasil menyelesaikan codelab ini. Semoga mendapat ilmu yang bermanfaat.

Apa selanjutnya?

Silakan cek beberapa sumber belajar lainnya...

• Free Courses and Paid Courses
• React for Designers
• JavaScript fundamentals before learning React
• React Tutorial: An Overview and Walkthrough

Referensi

• AJAX dan API
• React Router: Declarative Routing for React.js