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 beberapa template blogspot yang dapat anda gunakan secara gratis namun tampilannya bagus.…
Bismillaahirrohmaanirrohiim... Bagi yang menggunakan xampp, mungkin sudah familiar dengan database mysql dan web base phpmyadmin.…
Bismillaahirrohmaanirrohiim... Bagi pengguna server linux, adakalanya kena serangan hacker, dimana servernya digunakan untuk menjalankan aksi…
Bismillaahirrohmaanirrohiim... Saat kita membuat kotak dengan lebar dan tinggi tertentu, tentunya teks didalamnya harus kita…
Bismillaahirrohmaanirrohiim... Clearfix pada css biasanya digunakan untuk menangani posisi elemen saat menggunakan float, dimana float…
Bismillaahirrohmaanirrohiim... Setelah menginstall node.js dan ingin menggunakan perintah npx atau npm di power shell atau…