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:


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

Subscribe to receive free email updates:

0 Response to "Integrasi Bootstrap Di Reactjs"

Posting Komentar