Categories: ReactJS

Integrasi bootstrap di reactJS

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.

Bagikan
rasupe

Share
Published by
rasupe

Recent Posts

Source code Template website sekolah dengan react js

Bismillaahirrohmaanirrohiim... Berikut ini source code yang dapat dimodifikasi untuk membuat front end website sekolah dengan…

7 hours ago

Subdomain pada cyberpanel tidak dapat diakses

Bismillaahirrohmaanirrohiim... Jika domain dan sub domainnya berada dalam satu vps cyberpanel, maka seringkali jadi tidak…

5 days ago

10 Aplikasi Kasir Terbaik di Indonesia (2025)

Bismillaahirrohmaanirrohiim... Dalam era digital saat ini, penggunaan aplikasi kasir (Point of Sale/POS) menjadi solusi penting…

6 days ago

Website di aapanel sering mati sendiri

Bismillaahirrohmaanirrohiim... Saat browsing-browsing saya seringkali melihat iklan aapanel, sekilas membuat penasaran sampai akhirnya saya mencoba…

1 week ago

Reset password cyberpanel via SSH

Bismillaahirrohmaanirrohiim... Berikut ini perintah untuk reset password admin cyberpanel melalui SSH command line. pastikan login…

1 week ago

Template Blogger Blogspot Gratis dan Bagus

Bismillaahirrohmaanirrohiim... Berikut ini beberapa template blogspot yang dapat anda gunakan secara gratis namun tampilannya bagus.…

2 months ago