in Javascript

Membuat template bootstrap pada react (bagian 2)

Halo dev, sebelumnya saya telah membuat tulisan tentang membuat template pada react dengan bootstrap (bagian 1). Pada tulisan tersebut, saya telah berhasil membuat tampilan navbar bootstrap pada react. Kali ini, saya akan melanjutkan tulisan tersebut.

Goal kita kali ini adalah untuk membuat template dengan bootstrap pada react. Tampilan yang akan kita buat adalah seperti berikut ini:

template bootstrap pada rect

template bootstrap pada rect

Tampilan tersebut memiliki komponen sebagai berikut:

  1. Navbar => header website (sudah dibahas pada tutorial sebelumnya)
  2. Sidebar => menampilkan genre film
  3. Content => menampilkan list film (akan dibahas pada tutorial berikutnya)

Jadi, goal kita kali ini adalah membuat Sidebar dengan menggunakan bootstrap pada react.

Langkah 1: buat file Sidebar.js

Sidebar.js ini nantinya akan berisi data genre yang berasal dari API. Oleh karena itu, Sidebar.js termasuk ke dalam smart komponen.

Buat direktori Containers di dalam direktori src. Kemudian di dalam Containers, buat file Sidebar.js sehingga susunan direktori saat ini menjadi seperti berikut:

Kode untuk file Sidebar.js:

Data sidebar untuk saat ini masih menggunakan kode HTML manual. Akan tetapi, nantinya data sidebar (genre) yang didapatkan dari API.

Langkah 2: load Sidebar.js di dalam index.js

Ubah file index.js:

Catatan: perubahan kode ditandai dengan warna background yang berbeda

Langkah 3: run webpack dan lihat hasilnya

Jalankan perintah berikut:

 

Kemudian buka file index.html menggunakan browser. Hasilnya adalah sebagai berikut:

template bootstrap pada rect

template bootstrap pada rect

Done!!!

Sampai disini, goal tutorial pada artikel ini telah tercapai. Sampai jumpa di artikel selanjutnya.

Write a Comment

Comment

Webmentions

  • Membuat template dengan bootstrap pada react - Sigit Hanafi [dotcom]

    […] Sampai disini, goal tutorial pada artikel ini telah tercapai. Sampai jumpa di artikel selanjutnya. […]