Cara membuat bootstrap dalam aplikasi baru menggunakan React

  

Cara membuat aplikasi baru menggunakan React

 

1.       Buatlah Aplikasi React menggunakan terminal command line pada Software Visual studio Code  dan tekan Enter.

npx create-react-app my-app

my-app adalah nama folder tempat penyimpanan aplikasi yang dibuat menggunakan react.

2.       Ubahlah direktori menuju nama folder yang telah dibuat dengan mengetik perintah cd+nama folder seperti dibawah ini. Kemudian tekan Enter.

cd my-app

Project Structure: kita berada dalam project direktori seperti yang kita telah berhasil membuat aplikasi react As  dan install package yang telah dibutuhkan. Setelah membuat aplikasi react , struktur proyek akan terlihat seperti pada gambar berikut.

 

3.  Pilih terminal nodejs pada command line terminal. Jika kita ingin menginstal bootrap di aplikasi react yang saja dibuat . Arahkan menuju folder direktori aplikasi yang telah dibuat . Disini nama foldernya adalah B:\my-app>.

npm install bootsrap

Bootstrap telah berhasil diinstall. Pilih folder dan version bootstrap yang diinstall dengan mengamati dalam folder node_modules.

Versi bootstrap yang telah diinstall dapat juga diamati di file package.json .

Filename: package.json

4.  Setelah install bootstrap, import  Bootstrap minified CSS file dan  Bootstrap JavaScript minified bundle file kedalam index.js dimana ada dalam  B:\my-app\src.

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/js/bootstrap.bundle.min';

 

dua pernyataan diatas dibutuhkan didalam file index.js untuk mengimpor dependencies didalam file react supaya menggunakan kelas bootstrap di dalam React app component.

Filename: index.js

5.   Install popper.js dan jquery untuk menggunakan komponen javascript bootstrap. Untuk menginstall jquery dan popper.js silahkan buka terminal dalam folder my-app , ketik perintah berikut di terminal command line laulu tekan enter.

npm install jquery popper.js

setelah install import kedua dependencies ke dalam aplikasi React didalam case index.js . berikut kedua statement yang digunakan untuk mengimpor dependencies ini.

import $ from 'jquery';

import Popper from 'popper.js';

 

Filename: index.js

6.   Buatlah bootstrap sederhana sebagai contoh bootstrap button  didalam case nama file App.js.

FileName : App.js

7.       Run aplikasi React dengan mengetik perintah deploy pada command line terminal nodejs seperti dibawah ini

       npm start

8.       Setelah running server , kita akan melihat output layer  seperti dibawah ini.