React Bootstrap

  • Post
    React Bootstrap

    Aplikasi satu halaman mendapatkan popularitas selama beberapa tahun terakhir, begitu banyak kerangka kerja front-end telah diperkenalkan seperti Angular, React, Vue.js, Ember, dll. Akibatnya, jQuery bukanlah persyaratan yang diperlukan untuk membangun aplikasi web. Saat ini, React memiliki kerangka kerja JavaScript yang paling banyak digunakan untuk membangun aplikasi web, dan Bootstrap menjadi kerangka kerja CSS paling populer. Jadi, perlu mempelajari berbagai cara di mana Bootstrap dapat digunakan di aplikasi React, yang merupakan tujuan utama dari bagian ini.

    Menambahkan Bootstrap untuk React

    Kita dapat menambahkan Bootstrap ke aplikasi React dengan beberapa cara. The tiga cara yang paling umum diberikan di bawah:

    1. Using the Bootstrap CDN
    2. Bootstrap as Dependency
    3. React Bootstrap Package

    Using the Bootstrap CDN

    Ini adalah cara termudah untuk menambahkan Bootstrap ke aplikasi React. Tidak perlu menginstal atau mengunduh Bootstrap. Kita cukup meletakkan <link> ke bagian <head> dari file index.html dari aplikasi React seperti yang ditunjukkan pada cuplikan berikut.

    1. <link rel=”stylesheet”href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”&gt;

    Jika ada kebutuhan untuk menggunakan komponen Bootstrap yang bergantung pada JavaScript / jQuery di aplikasi React, kita perlu memasukkan jQuery , Popper.js , dan Bootstrap.js ke dalam dokumen. Tambahkan impor berikut dalam tag <script> di dekat akhir tag penutup </body> dari file index.html .

    <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js&#8221; integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>

     

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&#8221; integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>

     

    <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&#8221; integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>

    Pada potongan di atas, kami telah menggunakan jQuery versi slim, meskipun kami juga dapat menggunakan versi lengkapnya. Sekarang, Bootstrap berhasil ditambahkan di aplikasi React, dan kita dapat menggunakan semua utilitas CSS dan komponen UI yang tersedia dari Bootstrap di aplikasi React.

    Bootstrap as Dependency

    Jika kita menggunakan alat build atau bundler modul seperti Webpack, maka mengimpor Bootstrap sebagai dependensi adalah opsi yang lebih disukai untuk menambahkan Bootstrap ke aplikasi React. Kita dapat menginstal Bootstrap sebagai dependensi untuk aplikasi React. Untuk menginstal Bootstrap, jalankan perintah berikut di jendela terminal.

    1. $ npm install bootstrap –save

    Setelah Bootstrap diinstal, kita dapat mengimpornya di file entri aplikasi React. Jika proyek React dibuat menggunakan alat create-react-app , buka file src / index.js , dan tambahkan kode berikut:

    1. import‘bootstrap/dist/css/bootstrap.min.css’;

    Sekarang, kita dapat menggunakan kelas dan utilitas CSS di aplikasi React. Selain itu, jika kita ingin menggunakan komponen JavaScript, kita perlu menginstal paket jquery dan popper.js dari npm . Untuk menginstal paket berikut, jalankan perintah berikut di jendela terminal.

    1. $ npm instal jquery popper.js

    Selanjutnya, buka file src / index.js dan tambahkan impor berikut.

     

    import $ from ‘jquery’; 

    import Popper from ‘popper.js’; 

    import ‘bootstrap/dist/js/bootstrap.bundle.min’; 

    Sekarang, kita dapat menggunakan Komponen JavaScript Bootstrap di aplikasi React.

    React Bootstrap Package

    Paket React Bootstrap adalah cara paling populer untuk menambahkan bootstrap di aplikasi React. Ada banyak paket Bootstrap yang dibuat oleh komunitas, yang bertujuan untuk membangun kembali komponen Bootstrap sebagai komponen React. The dua paket Bootstrap yang paling populer adalah:

    1. react-bootstrap: Ini adalah implementasi ulang lengkap dari komponen Bootstrap sebagai komponen React. Itu tidak membutuhkan dependensi seperti bootstrap.js atau jQuery. Jika pengaturan React dan React-Bootstrap diinstal, kita memiliki semua yang kita butuhkan.
    2. reactstrap: Ini adalah pustaka yang berisi komponen React Bootstrap 4 yang mendukung komposisi dan kontrol. Itu tidak tergantung pada jQuery atau Bootstrap JavaScript. Namun, react-popper diperlukan untuk pemosisian konten lanjutan seperti Tooltips, Popovers, dan Dropdown flipping otomatis.

    Instalasi React Bootstrap

    Mari kita buat aplikasi React baru menggunakan perintah create-react-app sebagai berikut.

    1. $ npx buat-react-app react-bootstrap-app

    Setelah membuat aplikasi React, cara terbaik untuk menginstal Bootstrap adalah melalui paket npm. Untuk menginstal Bootstrap, buka folder aplikasi React, dan jalankan perintah berikut.

    1. $ npm install react-bootstrap bootstrap –save

    Mengimpor Bootstrap

    Sekarang, buka file src / index.js dan tambahkan kode berikut untuk mengimpor file Bootstrap.

    import ‘bootstrap/dist/css/bootstrap.min.css’; 

    Kita juga dapat mengimpor komponen individual seperti import {SplitButton, Dropdown} dari ‘react-bootstrap’; alih-alih seluruh perpustakaan. Ini menyediakan komponen spesifik yang perlu kita gunakan, dan secara signifikan dapat mengurangi jumlah kode.

    Di aplikasi React, buat file baru bernama ThemeSwitcher.js di direktori src dan masukkan kode berikut.

     

    import React, { Component } from ‘react’;

    import { SplitButton, Dropdown } from ‘react-bootstrap’;

     

    class ThemeSwitcher extends Component {

     

    state = { theme: null }

     

    chooseTheme = (theme, evt) => {

    evt.preventDefault();

    if (theme.toLowerCase() === ‘reset’) { theme = null }

    this.setState({ theme });

    }

     

    render() {

    const { theme } = this.state;

    const themeClass = theme ? theme.toLowerCase() : ‘default’;

     

    const parentContainerStyles = {

    position: ‘absolute’,

    height: ‘100%’,

    width: ‘100%’,

    display: ‘table’

    };

     

    const subContainerStyles = {

    position: ‘relative’,

    height: ‘100%’,

    width: ‘100%’,

    display: ‘table-cell’,

    };

     

    return (

    <div style={parentContainerStyles}>

    <div style={subContainerStyles}>

     

    <span className={h1 center-block text-center text-${theme ? themeClass : 'muted'}} style={{ marginBottom: 25 }}>{theme || ‘Default’}</span>

     

    <div className=”center-block text-center”>

    <SplitButton bsSize=”large” bsStyle={themeClass} title={${theme || 'Default Block'} Theme}>

    <Dropdown.Item eventKey=”Primary Block” onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>

    <Dropdown.Item eventKey=”Danger Block” onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>

    <Dropdown.Item eventKey=”Success Block” onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>

    <Dropdown.Item divider />

    <Dropdown.Item eventKey=”Reset Block” onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>

    </SplitButton>

    </div>

    </div>

    </div>

    );

    }

    }

    export default ThemeSwitcher;

    Sekarang, perbarui file src / index.js dengan cuplikan berikut.

    Index.js

     

    import ‘bootstrap/dist/css/bootstrap.min.css’;

    import React from ‘react’;

    import ReactDOM from ‘react-dom’;

    import App from ‘./App.js’;

    import ‘./index.css’;

    import ThemeSwitcher from ‘./ThemeSwitcher’;

     

    ReactDOM.render(<ThemeSwitcher />, document.getElementById(‘root’));

    Menggunakan reactstrap

    Mari kita buat aplikasi React baru menggunakan perintah create-react-app sebagai berikut.

    1. $ npx buat-reaksi-aplikasi reactstrap-app

    Selanjutnya, instal reactstrap melalui paket npm. Untuk menginstal reactstrap, buka folder aplikasi React, dan jalankan perintah berikut.

    1. $ npm instal bootstrap reactstrap –save

    Mengimpor Bootstrap

    Sekarang, buka file src / index.js dan tambahkan kode berikut untuk mengimpor file Bootstrap.

    import ‘bootstrap/dist/css/bootstrap.min.css’;

    Kita juga dapat mengimpor komponen individual seperti import {Button, Dropdown} dari ‘reactstrap’; alih-alih seluruh perpustakaan. Ini menyediakan komponen spesifik yang perlu kita gunakan, dan secara signifikan dapat mengurangi jumlah kode.

    Di aplikasi React, buat file baru bernama ThemeSwitcher.js di direktori src dan masukkan kode berikut.

     

    import React, { Component } from ‘react’;

    import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from ‘reactstrap’;

     

    class ThemeSwitcher extends Component {

     

    state = { theme: null, dropdownOpen: false }

     

    toggleDropdown = () => {

    this.setState({ dropdownOpen: !this.state.dropdownOpen });

    }

     

    resetTheme = evt => {

    evt.preventDefault();

    this.setState({ theme: null });

    }

     

    chooseTheme = (theme, evt) => {

    evt.preventDefault();

    this.setState({ theme });

    }

    render() {

    const { theme, dropdownOpen } = this.state;

    const themeClass = theme ? theme.toLowerCase() : ‘secondary’;

     

    return (

    <div className=”d-flex flex-wrap justify-content-center align-items-center”>

     

    <span className={h1 mb-4 w-100 text-center text-${themeClass}}>{theme || ‘Default’}</span>

     

    <ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>

    <Button id=”caret” color={themeClass}>{theme || ‘Custom’} Theme</Button>

    <DropdownToggle caret size=”lg” color={themeClass} />

    <DropdownMenu>

    <DropdownItem onClick={e => this.chooseTheme(‘Primary’, e)}>Primary Theme</DropdownItem>

    <DropdownItem onClick={e => this.chooseTheme(‘Danger’, e)}>Danger Theme</DropdownItem>

    <DropdownItem onClick={e => this.chooseTheme(‘Success’, e)}>Success Theme</DropdownItem>

    <DropdownItem divider />

    <DropdownItem onClick={this.resetTheme}>Default Theme</DropdownItem>

    </DropdownMenu>

    </ButtonDropdown>

     

    </div>

    );

    }

    }

    export default ThemeSwitcher;

    Sekarang, perbarui file src / index.js dengan cuplikan berikut.

    Index.js

     

    import ‘bootstrap/dist/css/bootstrap.min.css’;

    import React from ‘react’;

    import ReactDOM from ‘react-dom’;

    import App from ‘./App.js’;

    import ‘./index.css’;

    import ThemeSwitcher from ‘./ThemeSwitcher’;

     

    ReactDOM.render(<ThemeSwitcher />, document.getElementById(‘root’));

     

    credit. javatpoint

Tagged: 

  • You must be logged in to reply to this topic.