Belajar Menginstall React Bootstrap dan Mengenal Componentnya

Hello there :)

Bertemu kembali bersama saya, Gina Ferlindawati dalam blog kali ini. Disini, kita akan belajar menginstall React Bootstrap. Okay tidak perlu berlama-lama lagi. Let's practice!!!

• Buatlah project baru react di komputer. Ketikkan perintah berikut ini "create-react-app app-name"

• Ketika sukses terinstall, lalu buka directory aplikasi react yang telah dibuat.

• Bukalah aplikasi react tersebut pada Visual Studio Code. Lalu install React Bootstrap. Ketikkan perintah berikut ini "npm install react-bootstrap bootstrap"

• Jika react-bootstrap telah sukses terinstall, pastikan cek pada directory node_modules bahwa didalamnya terdapat folder bootstrap.
• Bukalah file index.js, lalu ketikkan perintah berikut (import 'bootstrap/dist/css/bootstrap.min.css')

• Bukalah website React-Bootstrap, lalu buka menu Components.
• Buka menu Alert, lalu copy code tersebut ke code editor.

• Buatlah folder componen pada directory src, lalu buatlah file Alert.js didalam folder componen.
• Lalu paste code Alert sebelumnya pada file Alert.js, lalu ubah nama Functionnya.

• Buka file App.js, lalu ketikkan perintah dibawah ini.

• Lalu running program tersebut pada browser. Maka hasilnya akan seperti ini.

• Buatlah folder componen pada directory src, lalu buatlah file Accordion.js didalam folder componen.
• Lalu paste code Alert sebelumnya pada file Accordion.js, lalu ubah nama Functionnya.

• Buka file App.js, lalu ketikkan perintah dibawah ini.

• Lalu running program tersebut pada browser. Maka hasilnya akan seperti ini.

Oke, latihan kita kali ini telah selesai. Terima kasih telah mencoba membuat tampilan sederhana menggunakan React-Bootstrap bersama saya. Sampai berjumpa kembali pada blog selanjutnya. See you when i see you friends :)

Nama : Gina Ferlindawati

NIM : 2022102004

Prodi : Teknik Informatika

Matkul : Advance Web Programming

Dosen : Sutrisno, M.Kom.