Integrasi bootswatch di reactJS

Bismillaahirrohmaanirrohiim…

Apa itu bootswatch? beliau adalah template gratis untuk bootstrap, terdiri dari bermacam template mudah diinstall, open source, mudah diedit dan diimplementasikan saat pembuatan website.

Sebelum menggunakan bootswatch di react JS, kita harus menginstall bootstrap dulu.
Untuk lebih mudahnya, baca “Integrasi bootstrap di reactJS“.

Oke, saya anggap kita sudah menginstall bootstrap, reactstrap, react-dom, dll.
Sekarang kita langsung modifikasi file “JS” yang ada di aplikasi.

index.js

//TODO: pake bootwatch
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './routes';
import 'bootstrap/dist/css/bootstrap.min.css';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Router />, document.getElementById('root'));

serviceWorker.unregister();

router.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function routes() {
    return(
        <Router>
            <div>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </div>
        </Router>
    );
}

export default routes;

Home.js

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


class Home extends Component {
    componentDidMount() {
        document.title = 'Home - React Bootstrap';
    }
    state = {}

    render() {
        return (
            <div>
                <Header />

                <br />
                <div className="container">
                    <div className="row">
                        <div className="col-md-12">
                            <center>
                                <h1>Button</h1>
                                <h3>Integrasi ReactJS dengan Bootstrap.</h3>
                            </center>
                        </div>
                    </div>

                    <br />
                    <br />

                    <Btn />

                    <br />
                    <br />

                    <h1>Button from Reactstrap</h1>

                    <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>

                    <br />
                    <br />
                </div>
            </div>
        );
    }
}

export default Home;

Karena file sangat banyak, maka saya sertakan file untuk source ini selengkapnya bisa didownload disini.

Silahkan di utak atik sendiri source nya, dan jalankan lalu lihat hasilnya.

Jika tidak ada error, berarti sudah berhasil.

Selamat!!!