Integrasi Bootswatch Di Reactjs

Bismillaahirrohmaanirrohiim…

Apa itu bootswatch? ia yakni template gratis untuk bootstrap, terdiri dari bermacam template gampang diinstall, open source, gampang diedit dan diimplementasikan ketika pembuatan website.

Sebelum memakai bootswatch di react JS, kita harus menginstall bootstrap dulu.

Baca juga:

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

Untuk lebih mudahnya, baca “Integrasi bootstrap di reactJS“.

Oke, aku anggap kita sudah menginstall bootstrap, reactstrap, react-dom, dll.

Sekarang kita eksklusif 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 aku sertakan file untuk source ini selengkapnya dapat did0wnl0ad disini.

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

Jika tidak ada error, berarti sudah berhasil.

Selamat!!!

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: