Simple Book Catalog Web using React JS and API

Rifa Adinta Farda

Sosial Media


0 orang menyukai ini
Suka

Summary

Membuat tampilan web katalog buku sederhana menggunakan React JS dan API

Description

Pada pembelajaran terjadwal course Fullstack Programming, untuk silabus “React and Guess Lecturer” Mahasiswa ditugaskan untuk mengimplementasikan API pada website apapun dan mengimplmentasikanya ke sebuah tampilan webiste dengan menggunakan node js,

disini saya menggunakan framework React JS dan API katalog buku

Struktur dari projek Aplikasi Katalog Buku :

  1. katalog-buku: folder projek kita.
  2. config: folder untuk menyimpan file-file konfigurasi dari webpack.
  3. dist: folder yang terbuat secara otomatis setelah kita menjalankan webpack. 
  4. node_modules: folder untuk menyimpan library.
  5. src: folder untuk file-file yang dibutuhkan oleh projek kita. 
  6. components: folder untuk menyimpan component.
  7. css: folder untuk menyimpan file-file css yang umum digunakan.
  8. pages: folder untuk menyimpan setiap halaman dari projek kita.
  9. constant.js: file untuk menyimpan variabel yang sering digunakan.
  10. index.js: file utama dari React.Js yang melekatkan elemen HTML ke React DOM. File ini juga berfungsi sebagai file induk dari projek kita saat webpack mem-bundle (menggabungkan module/library) yang dibutuhkan.
  11. .babelrc: file konfigurasi dari babel. Babel adalah transpiler (mengkonversi sintak JavaScript terbaru menjadi sintak lama). Karena belum semua fitur-fitur baru JavaScript diterapkan oleh browser.
  12. .prettierrc: file konfigurasi untuk aturan penulisan kode yang dianjurkan.
  13. package.json: file berisi metadata tentang projek kita. Berisi daftar library yang projek butuhkan.
  14. yarn.lock: file berisi informasi lebih detil mengenai library(versinya). 

API_BASE_URL = https://my-json-server.typicode.com/ridoansaleh/books-api

Tampilan Jadi :

Informasi Course Terkait
  Kategori: Web Programming
  Course: Dasar – dasar Node JS