Chiều rộng thu gọn của thanh điều hướng Reac-bootstrap

Các ứng dụng một trang trở nên phổ biến trong vài năm gần đây, vì rất nhiều framework front-end đã được giới thiệu như Angular, React, Vue. js, Ember, v. v. Do đó, jQuery không phải là yêu cầu cần thiết để xây dựng ứng dụng web. Ngày nay, React có khung JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web và Bootstrap trở thành khung CSS phổ biến nhất. Vì vậy, cần phải tìm hiểu theo nhiều cách khác nhau để Bootstrap có thể được sử dụng trong các ứng dụng React, đó là mục đích chính của phần này.

Các bài viết liên quan

• Dart Libraries – Thư viện Dart
• ReactJS là gì?
• Hướng dẫn cài đặt Nodejs
• Nút. js Trình quản lý gói
• State and Props in react

Tóm tắt nội dung

• Thêm Bootstrap cho React
• Sử dụng Bootstrap CDN
• Bootstrap dưới dạng phụ thuộc
• Gói React Bootstrap
• Cài đặt React Bootstrap
  • Nhập Bootstrap
• Use reactstrap
  • Nhập Bootstrap

Thêm Bootstrap cho React

Chúng ta có thể thêm Bootstrap vào ứng dụng React theo một số cách. Dưới đây là ba cách phổ biến nhất

• Sử dụng Bootstrap CDN
• Bootstrap dưới dạng phụ thuộc
• Gói React Bootstrap

Sử dụng Bootstrap CDN

Đây là cách dễ nhất để thêm Bootstrap vào ứng dụng React. Không cần cài đặt hoặc tải xuống Bootstrap. Chúng ta có thể chỉ cần đặt một vào phần của tệp index.html của ứng dụng React như được hiển thị trong đoạn mã sau.

Nếu có nhu cầu sử dụng các thành phần Bootstrap phụ thuộc vào JavaScript / jQuery trong ứng dụng React, chúng ta cần đưa jQuery, Popper.js và Bootstrap.js vào tài liệu. Thêm các lần nhập sau vào các thẻ

Trong đoạn mã trên, chúng tôi đã sử dụng phiên bản mỏng của jQuery, mặc dù chúng tôi cũng có thể sử dụng phiên bản đầy đủ. Giờ đây, Bootstrap đã được bổ sung thành công trong ứng dụng React và chúng ta có thể sử dụng tất cả các CSS tiện ích và các thành phần giao diện người dùng có sẵn từ Bootstrap trong ứng dụng React

Bootstrap dưới dạng phụ thuộc

Nếu chúng ta đang sử dụng một công cụ xây dựng hoặc một gói mô-đun chương trình như Webpack, thì hãy nhập Bootstrap làm phụ thuộc là tùy chọn ưu tiên để thêm Bootstrap vào ứng dụng React. Chúng tôi có thể cài đặt Bootstrap như một phụ thuộc cho ứng dụng React. Để cài đặt Bootstrap, hãy chạy các lệnh sau trong dòng lệnh

$ npm install bootstrap --save  

Sau khi cài đặt Bootstrap, chúng ta có thể nhập nó vào mục nhập tệp ứng dụng React. Nếu dự án React được tạo bằng công cụ tạo-ứng dụng phản ứng, hãy mở tệp src / index. js and add code after

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

Giờ đây, chúng ta có thể sử dụng các lớp CSS và các tiện ích hữu ích trong ứng dụng React. Ngoài ra, nếu chúng ta muốn sử dụng các thành phần JavaScript, chúng ta cần cài đặt các gói jquery và popper. js từ npm. Để cài đặt các gói sau, hãy chạy lệnh sau trong dòng lệnh

$ npm install jquery popper.js  

Tiếp theo, chuyển đến tệp src / index. js và thêm các lần nhập sau

import $ from 'jquery';  
import Popper from 'popper.js';  
import 'bootstrap/dist/js/bootstrap.bundle.min';  

Bây giờ, chúng ta có thể sử dụng Bootstrap JavaScript Components trong ứng dụng React

Gói React Bootstrap

Gói React Bootstrap là cách phổ biến nhất để thêm bootstrap vào ứng dụng React. Có rất nhiều gói Bootstrap được xây dựng bởi cộng đồng, với mục đích xây dựng lại các thành phần Bootstrap như các thành phần React. Hai gói Bootstrap phổ biến nhất là

phản ứng-bootstrap. Đây là bản tái hiện hoàn chỉnh của các thành phần Bootstrap dưới dạng các thành phần React. Nó không cần bất kỳ phụ thuộc nào như bootstrap. js hoặc jQuery. Nếu thiết lập React và React-Bootstrap được cài đặt, chúng ta có mọi thứ chúng ta cần

dây phản ứng. Đây là một thư viện chứa các thành phần React Bootstrap 4 thiên về thành phần và điều khiển. Nó không phụ thuộc vào JavaScript jQuery hoặc Bootstrap. Tuy nhiên, react-popper cần thiết để xác định vị trí nội dung nâng cao như Chú giải công cụ, Cửa sổ bật lên và Trình đơn thả xuống tự động

Cài đặt React Bootstrap

Hãy để chúng tôi tạo một ứng dụng React mới bằng cách sử dụng lệnh tạo-ứng dụng phản ứng như sau

$ npx create-react-app react-bootstrap-app

Sau khi tạo ứng dụng React, cách tốt nhất để cài đặt Bootstrap là thông qua gói npm. Để cài đặt Bootstrap, hãy điều hướng đến thư mục ứng dụng React và chạy lệnh sau

$ npm install react-bootstrap bootstrap --save 

Nhập Bootstrap

Bây giờ, mở tệp src / index. js and add after code to input file Bootstrap

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

Chúng tôi cũng có thể nhập các thành phần riêng lẻ như nhập {SplitButton, Dropdown} từ 'react-bootstrap'; . Nó cung cấp các thành phần công cụ mà chúng ta cần sử dụng và có thể giảm đáng kể số lượng mã

Trong ứng dụng React, hãy tạo một tệp mới có tên ThemeSwitcher. js trong thư mục src và đặt mã sau