Now Reading:

Cara Fetching Data API di ReactJS

Cara Fetching Data API di ReactJS

Step by Step Fetching Data API Dengan ReactJS

  1. Create Project

Membuat project dengan menginstall ReactJS yang di simpan di dalam folder documents. Silahkan buka terminal dan ketik perintah seperti di bawah ini.

Perintah di atas adalah cara untuk mengarahkan ke direktori documents dan mendownload reactjs dengan nama react_api. Setelah berhasil di download selanjutnya kita arahkan ke direktori react_api dengan perintah cd react_api lalu menjalankan localhost server dengan perintah npm start.

2. Open folder react_api di text editor

Open folder react_api di text editor, misalnya sublime text, atom, dsb. Selanjutnya hapus semua file di dalam folder public dan folder src seperti gambar di bawah ini (sebelah kiri adalah di folder public dan sebelah kanan adalah di folder src).

public-react-apisrc-react-api

 

 

 

 

 

3. Buat file index.html dan simpan di dalam folder public dengan code seperti di bawah ini.

4. Buat file index.js dan simpan di dalam folder src dengan  code seperti di bawah ini.

5. Buat file Main.js dan simpan di dalam folder src dengan isi seperti berikut.

Script di atas adalah untuk membuat menu yang akan menampilkan content data API.

6. Buat file Home.js dan simpan di dalam folder src dengan isi seperti berikut.

7. Buat file Australia.js dan simpan di dalam folder src dengan isi seperti berikut.

8. Buat file Turkey.js dan simpan di dalam folder src dengan isi seperti berikut.




9. Buat file About.js dan simpan di dalam folder src dengan isi seperti berikut.

10. Buat file style.css dan simpan di dalam folder src dengan isi seperti berikut.

Cara fetching data api di reactjsSampai saat ini kita telah mengetahui cara fetching data API di ReactJS.

Jika tutorial ini dirasa bermanfaat mohon di share ya dan tungguin juga tutorial selanjutnya 😀

Content Developer of Web Development

Share This Articles