Cara Menggunakan Bootstrap di React

Menggunakan Bootstrap di React memungkinkan Anda untuk memanfaatkan kerangka kerja CSS populer ini untuk desain responsif dan komponen UI yang siap pakai. Berikut adalah langkah-langkah untuk mengintegrasikan Bootstrap dengan aplikasi React:

1. Instalasi Bootstrap

Anda bisa menginstal Bootstrap melalui npm atau menggunakan CDN.

a. Instalasi dengan npm

Instal Bootstrap:
```
npm install bootstrap
```

Impor Bootstrap di Proyek React: Anda perlu mengimpor file CSS Bootstrap ke dalam proyek React Anda. Tambahkan impor ini ke dalam file src/index.js atau src/App.js.

File src/index.js:

import 'bootstrap/dist/css/bootstrap.min.css'; // Impor file CSS Bootstrap
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

b. Menggunakan CDN

Jika Anda lebih memilih menggunakan CDN, Anda bisa menambahkan link CDN Bootstrap di dalam tag <head> pada file public/index.html.

File public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div id="root"></div>
</body>
</html>

2. Menggunakan Komponen Bootstrap di React

Setelah menginstal Bootstrap, Anda bisa mulai menggunakan kelas-kelas Bootstrap dalam JSX.

Contoh Penggunaan Bootstrap di React:

File src/App.js:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container">
      <header className="bg-primary text-white text-center py-3">
        <h1>Bootstrap dengan React</h1>
      </header>
      <div className="row mt-4">
        <div className="col-md-6">
          <div className="card">
            <div className="card-body">
              <h5 className="card-title">Card Title</h5>
              <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" className="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div className="col-md-6">
          <button className="btn btn-success">Success Button</button>
        </div>
      </div>
    </div>
  );
}

export default App;

3. Menggunakan Komponen Bootstrap React (Opsional)

Ada juga pustaka tambahan yang menyediakan komponen Bootstrap sebagai komponen React yang lebih terintegrasi, seperti react-bootstrap dan reactstrap.

a. React-Bootstrap

Instal React-Bootstrap:
```
npm install react-bootstrap bootstrap
```

Gunakan Komponen React-Bootstrap: File src/App.js:

import React from 'react';
import { Container, Row, Col, Button, Card } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Container>
      <header className="bg-primary text-white text-center py-3">
        <h1>React-Bootstrap dengan React</h1>
      </header>
      <Row className="mt-4">
        <Col md={6}>
          <Card>
            <Card.Body>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
              <Button variant="primary">Go somewhere</Button>
            </Card.Body>
          </Card>
        </Col>
        <Col md={6}>
          <Button variant="success">Success Button</Button>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

b. Reactstrap

Instal Reactstrap:
```
npm install reactstrap bootstrap
```

Gunakan Komponen Reactstrap: File src/App.js:

import React from 'react';
import { Container, Row, Col, Button, Card, CardBody, CardTitle, CardText } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Container>
      <header className="bg-primary text-white text-center py-3">
        <h1>Reactstrap dengan React</h1>
      </header>
      <Row className="mt-4">
        <Col md={6}>
          <Card>
            <CardBody>
              <CardTitle>Card Title</CardTitle>
              <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
              <Button color="primary">Go somewhere</Button>
            </CardBody>
          </Card>
        </Col>
        <Col md={6}>
          <Button color="success">Success Button</Button>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

Penjelasan

Instalasi Bootstrap: Anda dapat memilih untuk menginstal Bootstrap melalui npm atau menggunakan CDN. Jika menggunakan npm, impor file CSS Bootstrap di file JavaScript utama Anda.
Penggunaan Kelas Bootstrap: Setelah menginstal, gunakan kelas Bootstrap dalam JSX untuk menerapkan gaya seperti yang dilakukan dalam HTML biasa.
React-Bootstrap dan Reactstrap: Pustaka tambahan ini menyediakan komponen Bootstrap sebagai komponen React, memungkinkan penggunaan yang lebih alami dalam aplikasi React dan lebih mudah dalam mengelola status dan props.

Sumber

PreviousCara menulis CSS di React NextCara Menggunakan Tailwind CSS di React

Last updated 9 months ago

import 'bootstrap/dist/css/bootstrap.min.css'; // Impor file CSS Bootstrap import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React App</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div id="root"></div> </body> </html>

import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <div className="container"> <header className="bg-primary text-white text-center py-3"> <h1>Bootstrap dengan React</h1> </header> <div className="row mt-4"> <div className="col-md-6"> <div className="card"> <div className="card-body"> <h5 className="card-title">Card Title</h5> <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" className="btn btn-primary">Go somewhere</a> </div> </div> </div> <div className="col-md-6"> <button className="btn btn-success">Success Button</button> </div> </div> </div> ); } export default App;

import React from 'react'; import { Container, Row, Col, Button, Card } from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <Container> <header className="bg-primary text-white text-center py-3"> <h1>React-Bootstrap dengan React</h1> </header> <Row className="mt-4"> <Col md={6}> <Card> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> </Col> <Col md={6}> <Button variant="success">Success Button</Button> </Col> </Row> </Container> ); } export default App;

import React from 'react'; import { Container, Row, Col, Button, Card, CardBody, CardTitle, CardText } from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <Container> <header className="bg-primary text-white text-center py-3"> <h1>Reactstrap dengan React</h1> </header> <Row className="mt-4"> <Col md={6}> <Card> <CardBody> <CardTitle>Card Title</CardTitle> <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText> <Button color="primary">Go somewhere</Button> </CardBody> </Card> </Col> <Col md={6}> <Button color="success">Success Button</Button> </Col> </Row> </Container> ); } export default App;