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.
Bismillaahirrohmaanirrohiim... Saat ini teknologi sudah berkembang cepat, ada kalanya kita ingin diberikan informasi secara cepat…
Bismillaahirrohmaanirrohiim... Jika web diakses oleh banyak orang, khususnya yang berbasis wordpress, maka secara normal proses…
Bismillaahirrohmaanirrohiim... Saat ini, sekolah baik SD, SMP, ataupun SMA tentunya ingin dapat melihat dan memonitor…
Bismillaahirrohmaanirrohiim... Pada artikel kali ini saya akan berbagi informasi tentang program pendataan pendukung calon legislatif…
Bismillaahirrohmaanirrohiim... Saat kita melakukan screenshot di browser chrome, pada windows 11 menyediakan fungsi yang bagus…
Bismillaahirrohmaanirrohiim... Untuk website yang ingin tidak muncul popup translate dari browser, bisa dicoba kode di…