in Javascript

Membuat template dengan bootstrap pada react

Halo dev, sebelumnya saya telah membuat tulisan tentang persiapan membuat web dengan reactjs. Karena artikel ini berhubungan dengan artikel tersebut, silakan untuk dibaca terlebih dulu. Tutorial kali ini akan membahas bagaimana membuat template dengan bootstrap pada react.

Tutorial sebelumnya, kita telah memiliki struktur direktori seperti berikut:

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
  2. Sidebar => menampilkan genre film (akan dibahas pada tutorial berikutnya)
  3. Content => menampilkan list film (akan dibahas pada tutorial berikutnya)

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

Langkah 1: ubah file index.html

File index.html merupakan file yang akan diakses pertama kali ketika pengunjung mengunjungi website. File ini digunakan untuk me-load CDN dari bootstrap.css dan bootstrap.js. Pada file index.html terdapat <div> dengan atribut id ‘container’. Tag elemen ini digunakan untuk menampilkan hasil render kode react.

Langkah 2: membuat file Navbar.js

Ketika kita membuat website atau aplikasi dengan react, terdapat dua jenis komponen, yaitu komponen yang berhubungan dengan state (data layer) dan komponen yang hanya bertugas untuk menampilkan sebuah tampilan (disebut sebagai dumb komponen).

Navbar yang akan kita buat, termasuk ke dalam dumb komponen yang berarti, Navbar hanya akan menampilkan tampilan Navbar saja tanpa berhubungan dengan state (data layer).

Buat direktori baru dengan nama Components di dalam direktori movie-directory-app/src/.

Kemudian, di dalam direktori Components buat file dengan nama Navbar.js. Sehingga struktur direktori aplikasi kita menjadi seperti berikut:

File Navbar.js berisi kode berikut:

Navbar.js hanya memiliki satu fungsi yaitu fungsi render(). Fungsi ini merupakan fungsi yang harus ada pada setiap komponen. Fungsi render berfungsi untuk mengembalikan elemen HTML.

Setelah membuat file Navbar.js, kita harus me-load file tersebut pada file index.js yang merupakan endpoint dari react.

Ubah file index.js menjadi seperti berikut ini:

Catatan: perubahan kode ditandai dengan warna background yang berbeda

Pada index.js, kita meng-import Navbar.js dengan menggunakan kode berikut:

Navbar.js kemudian digunakan pada fungsi render() pada file index.js.

Langkah 3: run webpack dan lihat hasilnya

Jalankan perintah berikut:

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

template bootstrap pada rectjs

template bootstrap pada rectjs

Done!!!

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

Write a Comment

Comment

Webmentions

  • Membuat template bootstrap pada react (bagian 2) - Sigit Hanafi [dotcom]

    […] 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, […]