Tanggal :August 5, 2020

Belajar Menangkap API Json Dengan Axios pada React Js.

Spread the love

Sudah Hampir Seminggu saya tidak menulis melanjutkan Seri React Js ini karena adanya musibah Banjir Bandang yang ada dimasamba dan rumah mimin terkena dampaknya. ya tidak usah berlama lama kita lansung saja belajar menangkap Api JSON React JS dengan Axios.

Pada Seri belajar sebelumnya kita telah belajar mempelajari Berpindah Halaman dengan React js menggunakan router, jika tidak ingin ketinggalan silahkan download file belajar sebelumnya disini.

Lansung saja, Pertama tama kita akan menginstall Axios pada React Js Kita dengan menggunakan package manager dengan perintah dibawah ini :

npm i axios

Setelah itu kita akan mencoba menangkap API yang disediakan Oleh TMDB.

Pada file sebelumnya kita telah membuat file Landingpage dan About yang digunakan untuk belajar berpindah halaman, nah kali ini kita akan mencoba menangkap API JSON dengan Axios di halaman Landingpage.

Lansung saja tambahkan code berikut di Halaman landingpage.

componentDidMount() {
    const apiUrl =
      "https://api.themoviedb.org/3/movie/550?api_key=cab1bfdcab9dc7c24e9132e4fb6c85f2";
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => console.log("This is your data", data));
  }

Sehingga File Landing Page kita akan Seperti Dibawah ini :

import React, { Component } from "react";
import Header from "../parts/Header";
import Card from "../parts/Cards";
export default class LandingPages extends Component {
  componentDidMount() {
    const apiUrl =
      "https://api.themoviedb.org/3/movie/550?api_key=cab1bfdcab9dc7c24e9132e4fb6c85f2";
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => console.log("This is your data", data));
  }
  render() {
    return (
      <>
        <Header></Header>
        
        <div>
          <h1>Ini About</h1>
          <a href="/about">Go to About Page</a>
        </div>
      </>
    );
  }
}

Perlu Di Ingat bahwa Alamat URL pada penangkapan api TMDB Membutuh user api key untuk membolehkan kita dalam menangkap api, sehingga jika alamat url pada tutorial ini tidak bisa maka session tokennya sudah habis, anda dapat mendaftarkan akun pada alamat TMDB Disini.

Setelah itu apa yang terjadi? Mari kita lihat Hasilnya :

Tampak Pada Console log sudah menampilkan Data JSON dari Alamat API yang kita coba tangkap. Selanjutnya kita akan Menampilkan Data Tersebut kedalam Card.

Sabar ya, kita coba pada seri selanjutnya.

Sebaiknya Pelajari List Belajar React Js Kita dibawah ini :

  1. Membuat Project React Js Pertamamu !
  2. Pengenalan Lingkungan Kerja React js.
  3. Membuat Header dengan React Bootstrap di React js.
  4. Berpindah Halaman di React Js menggunakan React Router Dom.
  5. Belajar Menangkap API Json Dengan Axios pada React Js.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *