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.
