11. React fetch data from api | Belajar React Js pemula

11. React fetch data from api | Belajar React Js pemula
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web react

Get Data Dari API Menggunakan React js

Tugas dari front-end developer adalah salah satunya mengelolah data agar memanjakan user dalam menggunakan website kita. Data yang di olah yaitu salah satu sumbernya adalah dari rest api. Nah  pada turorial kali ini kita akan belajar get data deri rest api menggunkan react.

Persiapan untuk mulai get data dari rest api

untuk get data dari rest api yang teman-teman harus pahami adalah membuat list karena data yang kita get dari rest api akan kita olah menjadi berupa list sederhana. Yang selanjutnya teman-teman harus siapkan adalaah axios, axios salah satu library javasxript yang akan kita gunakan untuk get data dari rest api.

cara install axios

silahkan tambahakan axios di project temen-teman dengan cara jalankan printah berikut untuk menginstall axios pada project react

npm install axios

atau

yarn add axios

jika ingin melihat documentasi axios silahkan klik disini dan temukan fitur-fitur keren di documentasi axios. Cara import axios pada project react teman-teman

import axios from 'axios';

untuk latihan get data kali ini kita akan menggunakan Fake rest api. silahkan buka link di bawah

https://jsonplaceholder.typicode.com/

ok, langsung saja kita praktek get data dari rest api, pada tutorial kali ini kita akan membuat dua component, Component pertama yaitu App.js yang berisi state untuk menyimpan data dari rest api dan satu life cycle yaitu componentDidMount yang berfungsi untuk mencajalan kode untuk get data dari rest api menggunakan axios. pertama silahkan deklarasikan state pada component App.js

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

get data dari rest api menggunakan axios pada life cycle componentDidtMount

    componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res =>
      this.setState({
        data: res.data
      })
    );
  }

jika data sudah di get dari rest api, sekarang tinggal tampilkan data yang sudah di dapat munggunakan map

render() {
    return <>{this.state.data.map((data, key) => {
    return  	
  })}</>;
  }

dan pada component list hanya menerima title dan body dari artikel yang di get dari rest api tadi.

import React, { Component } from "react";
class List extends Component {
  render() {
    return (
      <div>
        <h4>{this.props.judul}</h4>
        <p>{this.props.isi}</p>
        <hr/>
      </div>
    );
  }
}
export default List;

full code component App

import React, { Component } from "react";
import axios from "axios";
import List from "./List";
class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res =>
      this.setState({
        data: res.data
      })
    );
  }
  render() {
    return <>{this.state.data.map((data, key) => {
    return <List judul={data.title} isi={data.body} />
  })}</>;
  }
}
export default App;

kesimpulan

untuk memudahkan belajar get data dari rest api, teman-teman harus paham dulu tentang life cycle yang ada direact js. selain axios teman-teman juga bisa menggunakan fetch untuk mengget data rest api.

Mau liat atau download source code aplikasi premium bisa disini.

Tweet