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
0 Response to "Integrasi Bootstrap Di Reactjs"
Posting Komentar