Bismillaahirrohmaanirrohiim…

Sebagai lanjutan dari tulisan sebelumnya tentang contoh “penggunaan react router“, kini kita lanjutkan belajar tentang integrasi bootstrap di reactJS.

Pertama, buka CMD lalu posisi cursor diposisikan di “cd belajar-router“

Kemudian ketikkan perintah di bawah ini:

npm install --save bootstrap
npm install --save reactstrap

jika sebelumnya “react dan react-dom” belum diinstall (bisa di cek di file package.json), jalankan perintah di bawah ini

npm install --save reactstrap react react-dom

lalu jalankan dengan cara ketik

npm start

Kedua, edit file src/index.js tambahkan kode di bawah ini:

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

Ketiga, buka file src/components/Home.js

edit isinya seperti dibawah ini

import React, { Component } from 'react';
import Header from "./Header";
import { Button } from 'reactstrap';


class Home extends Component {
    state = {}
    render() {
        return (
            <div>
                <Header />
                <h1>Home</h1>
                <p>Ini adalah halaman home</p>

                <Button color="primary">primary</Button>{' '}
                <Button color="secondary">secondary</Button>{' '}
                <Button color="success">success</Button>{' '}
                <Button color="info">info</Button>{' '}
                <Button color="warning">warning</Button>{' '}
                <Button color="danger">danger</Button>{' '}
                <Button color="link">link</Button>
            </div>
        );
    }
}

export default Home;

 

Silahkan disave lalu lihat browser, lihatlah browser yang telah dibuka dengan alamat http://localhost:3000.

Semoga bermanfaat.