Integrasi Bootstrap Di Reactjs

Bismillaahirrohmaanirrohiim…

Sebagai lanjutan dari goresan pena sebelumnya wacana rujukan “penggunaan react router“, sekarang kita lanjutkan berguru wacana integrasi bootstrap di reactJS.

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

Kemudian ketikkan perintah di bawah ini:

Baca juga:

• Contoh Penggunaan Component Pada React Js
• Contoh Penggunaan React Router Di React Js
• Cara Gampang Install React Js Dengan Cepat

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 instruksi di bawah ini:

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

Ketiga, buka file src/components/Home.js

edit isinya menyerupai 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 yakni 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 kemudian lihat browser, lihatlah browser yang telah dibuka dengan alamat http://localhost:3000.

Semoga bermanfaat.

Sumber https://rasupe.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: