Membuat Aplikasi Pencarian Film dengan React.js

Arjuna Mahavira

Sosial Media


1 orang menyukai ini
Suka

Summary

React JS adalah library JavaScript yang umum digunakan saat membangun antarmuka pengguna untuk website atau aplikasi web. Oleh karena itu, React JS dapat digambarkan sebagai perpustakaan yang berisi berbagai kode JavaScript yang sudah tertulis. Anda hanya perlu mengambil kode yang Anda inginkan. Jadi, dengan framework JavaScript tersebut, coding lebih cepat.

Description

Persiapan:  Menyiapkan environment node js

Pastikan node.js sudah terinstal pada lingkungan kerja. Jika belum dapat menginstallnya dari website resmi node.js https://nodejs.org/en/download/prebuilt-installer

Untuk memastikan sudah terinstal, jalankan:

node -v

A screenshot of a computer Description automatically generated

Langkah 1: Membuat Proyek React Baru

Buat proyek React baru dengan menggunakan Create React App:

npx create-react-app <nama_project>

Kemudian, masuk ke direktori proyek:

cd movie-search-app

Jalankan aplikasi react:

npm start

Setelah itu anda dapat mengaksesnya di localhost port 3000 pada web browser anda

Langkah 2: Instal Bootstrap

Terdapat beberapa cara menginstal bootstrap, salahsatunya menggunakan CDN dengan menambahkan link ke dalam file `public/index.html`. untuk cara selengkapnya dapat kunjungi website bootstrap https://getbootstrap.com/ 

 Langkah 3: Membuat Struktur Folder dan File Komponen

Buat folder `components` di dalam direktori `src`, lalu buat file-file berikut di dalamnya:

  • SearchBar.js
  • MovieList.js
  • MovieCard.js
  • Pagination.js
  • MovieDetailModal.js

Struktur folder akan menjadi seperti ini:

src/

|-- components/

|   |-- SearchBar.js

|   |-- MovieList.js

|   |-- MovieCard.js

|   |-- Pagination.js

|   |-- MovieDetailModal.js

|-- App.js

 

Langkah 4: Modifikasi File App.js

Isi file `App.js` dengan komponen utama aplikasi.

Langkah 5: Isi File SearchBar.js

Buat komponen untuk input dan tombol pencarian dalam file `SearchBar.js`.

Langkah 6: Isi File MovieList.js

Buat komponen untuk menampilkan daftar film dalam file `MovieList.js`.

Langkah 7: Isi File MovieCard.js

Buat komponen untuk setiap kartu film dalam file `MovieCard.js`.

Langkah 8: Isi File Pagination.js

Buat komponen untuk navigasi halaman dalam file `Pagination.js`.

Langkah 9: Isi File MovieDetailModal.js

Buat komponen untuk modal detail film dalam file `MovieDetailModal.js`.

Dengan begini aplikasi react sudah berhasil dibuat, dan ini merupakan tampilan hasil aplikasinya

Search Bar

Movie list

Movie details

Dan pagination

Untuk selengkapnya project ini dapat di lihat di 

https://github.com/arjunamhv/omdbapi

Informasi Course Terkait
  Kategori: Web Programming
  Course: Dasar - Dasar ReactJS