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... Berikut ini cara format angka menggunakan javascript, misalkan 1000 menjadi 1.000 atau 1500000 menjadi…
Bismilaahirrohmaanirrohiim... jika server anda dipakai orang untuk mining, maka cpu usage akan habis dipakai dia,…
Bismillaahirrohmaanirrohiim... masalah muncul saat akses https://ipaddress:10000 muncul seperti ini Error – Document follows This web…
Bismillahirrohmaanirrohiim... Ebook ini menghadirkan wawasan mendalam mengenai pergeseran kekayaan dari uang, aset, tanah, dan bahan…
Bismillaahirrohmaanirrohiim... Jika kita membuat aplikasi web base menggunakan bootstrap, saat user membuka modal, kadangkala mereka…
Bismillaahirrohmaanirrohiim... Berikut ini kumpulan css yang berguna, untuk mengingat saja. Input atau button delay saat…