Bootstrap là gì?

Trích từ website chính thức: 

Bootstrap là một framework HTML, CSS, và JS phổ biến cho việc phát triển các dự án web mang tính responsive (tự động điều chỉnh theo kích thước màn hình), mobile-first (ưu tiên hiển thị trên mobile). Bootstrap 4 là phiên bản mới.

Bootstrap là một bộ sưu tập khổng lồ với những đoạn code dễ dùng, có thể sử dụng nhiều lần được viết bằng HTML, CSS, và JavaScript. Nó cũng là một framework được Front-end Devs và Designers sử dụng để build website mang tính responsive một cách nhanh chóng. 

Bootstrap giúp bạn không phải viết CSS nhiều, dành nhiều thời gian hơn để thiết kế giao diện webpages.

React là gì?

React là một thư viện JavaScript linh hoạt có hiệu suất cao dùng để xây dựng giao diện người dùng (UI). Nó cho phép bạn tạo nên các UI phức tạp từ các components (phần tử) nhỏ lẻ.

Các cách khác nhau để thêm Bootstrap 4 vào app React

Có nhiều cách để thực hiện:

  • Cài đặt thư viện Bootstrap NPM
  • Sử dụng Bootstrap CDN 
  • Dùng thư viện React-Bootstrap trong React
  • Sử dụng Reactstrap

1. Cài đặt thư viện Bootstrap NPM 

Đây là cách được chọn nhiều để thêm Bootstrap 4 vào app React. Chúng ta cần chạy lệnh bên dưới trong terminal để có thể thêm Bootstrap vào app.

npm install bootstrap

Sau khi cài đặt bootstrap từ terminal, bước tiếp theo là import Bootstrap css file vào app React. Đến đường dẫn src/index.html và nhập vào dòng bên dưới.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Bootstrap yêu cầu phải có các thư viện Javascript khác như JQuery, Popper.js, và Bootstrap.js để có thể sử dụng được các component JS. Do đó, chạy lệnh dưới, đồng thời cho các thư viện tương tự.

npm install popper.js jquery

Thêm code bên dưới vào src/index.js

import $ from 'jquery';

import Popper from 'popper.js';

import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

2. Sử dụng Bootstrap CDN

Đây là một trong các cách dễ nhất để thêm Bootstrap vào app React. Bạn cần nhập code vào public/index.html file như sau:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Khi Bootstrap yêu cầu jQuery, Popper và Bootstrap js thêm vào React app để có thể chạy được các component JS. Nhập các dòng code bên dưới vào cùng một file.

<script   src="https://code.jquery.com/jquery-3.4.1.slim.min.js"   integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="   crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

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

3. Sử dụng thư viện React-Bootstrap trong React

React-Bootstrap thay thế Bootstrap JavaScript. Mỗi component được xây dựng mới từ đầu như một component React đúng nghĩa, mà không cần sự phụ thuộc như jQuery. 

Chạy dòng bên dưới để thêm vào app React

npm install react-bootstrap

4. Sử dụng Reactstrap

Cài đặt Reactstrap và Bootstrap từ NPM. Reactstrap không bao gồm Bootstrap CSS, vì vậy cần cài đặt thêm.

Chạy lệnh bên dưới qua terminal để thêm Reactstrap.

npm install --save bootstrap

npm install --save reactstrap react react-dom

Import Bootstrap CSS trong file src/index.js:

import 'bootstrap/dist/css/bootstrap.css';

Import yêu cầu các component reactstrap trong file src/App.js file hoặc file custom component:

import { Button } from 'reactstrap';

Chúng ta đã đi qua các cách khác nhau để thêm Bootstrap 4 vào một app React. Hy vọng bạn sẽ thực hiện thành công.

Nguồn: Suraj Roy

VietnamWorks InTech