Khung CSS phổ biến nhất cho bố cục đáp ứng là Bootstrap. Bộ công cụ nguồn mở này bao gồm các biến Sass, khung lưới đáp ứng và một số lượng lớn các plugin JavaScript. Nó hiện đã được thiết kế lại trong React để có thể hoạt động với các ứng dụng React. Bootstrap 4 dựa trên jQuery, tuy nhiên, jQuery không lý tưởng cho React vì nó thao tác trực tiếp với DOM, trong khi React hoạt động với DOM ảo. Vì React Bootstrap thay thế Bootstrap JavaScript một cách hiệu quả nên mỗi thành phần đã được thiết kế lại để hoạt động liền mạch với React

Tại sao phản ứng Bootstrap?

React-Bootstrap là sự triển khai lại dựa trên React của các thành phần Bootstrap. Nó không yêu cầu bootstrap. js hoặc jQuery. Bạn đã có mọi thứ mình cần nếu đã cài đặt React và React-Bootstrap

Cài đặt React Bootstrap. Chúng tôi có thể cài đặt nó bằng npm hoặc sợi

npm install react-bootstrap

Bây giờ hãy hiểu hoạt động của React Bootstrap bằng một ví dụ

Tạo ứng dụng phản ứng. Để xây dựng một ứng dụng phản ứng, hãy làm theo các bước dưới đây

Bước 1. Tạo một ứng dụng phản ứng bằng lệnh sau

npx create-react-app foldername

Bước 2. Sau khi hoàn tất, hãy thay đổi thư mục của bạn thành ứng dụng mới được tạo bằng lệnh sau

cd foldername

Bước 3. Cài đặt phụ thuộc Bootstrap

npm install bootstrap

Cấu trúc dự án. Nó sẽ giống như sau

Thí dụ. Trong ví dụ này, chúng tôi sẽ tạo một thanh tiến trình động bằng cách sử dụng Reac-bootstrap

Ứng dụng. js

import Progress from "./Progress";
function App() {
return (
    

    
    
);
}

export default App;

Tiến triển. jsx

import React from "react";
import ProgressBar from 'react-bootstrap/ProgressBar'
function Progress() {
    return (
        

            

                GeeksforGeeks
            

            

            
50%
            


            
90%
            


            
30%
            


            
10%
            


            
70%
            
    
        
    )
}

export default Progress;

Bước để chạy ứng dụng. Nhập lệnh sau để chạy ứng dụng

npm start

đầu ra

Vui lòng viết bình luận nếu bạn thấy bất cứ điều gì không chính xác hoặc bạn muốn chia sẻ thêm thông tin về chủ đề thảo luận ở trên

ReactJS Bootstrap là thư viện thành phần bộ công cụ front-end được phát triển bởi React để tạo các phần tử dựa trên thành phần đáp ứng. Nó là một bản sao của Javascript Bootstrap và cung cấp các thành phần năng động, dễ tích hợp và có thể truy cập để tạo thuận lợi cho quá trình phát triển của chúng tôi. Một số thành phần React được sử dụng rộng rãi từ ReactJS Bootstrap là các nút, trường nhập liệu, huy hiệu, bảng, v.v. Sau khi đọc bài viết này, bạn sẽ có thể sử dụng React Bootstrap trong các ứng dụng phản ứng của mình như một chuyên gia

Tại sao ReactJS Bootstrap được giới thiệu mặc dù Javascript Bootstrap đang hoạt động rất tốt?

Javascript Bootstrap sử dụng JQuery để cấp nguồn cho giao diện thành phần của nó. JQuery thao tác trực tiếp Mô hình đối tượng tài liệu (DOM), vì vậy Javascript Bootstrap mâu thuẫn với cách tiếp cận khai báo mà ReactJS tuân theo. Đôi khi bạn đã thấy Javascript Bootstrap được sử dụng bên trong các Dự án ReactJS, nhưng các thành phần hỗ trợ của chúng là các biểu định kiểu Vanilla Bootstrap đơn giản và không gọi JQuery. Trong những trường hợp đó, bạn có thể sử dụng Javascript Bootstrap. Tuy nhiên, các thành phần React dựa trên JQuery không thể tích hợp theo cách như vậy. Do đó, các nhà phát triển ứng dụng React đã phát triển thư viện thành phần của họ tuân theo khái niệm Virtual DOM và không liên quan đến JQuery

Làm cách nào để thiết lập ReactJS Bootstrap vào Dự án của bạn?

Có nhiều cách khác nhau để tích hợp bootstrap vào ứng dụng phản ứng của bạn. Để cài đặt tất cả các phụ thuộc cần thiết, bạn có thể sử dụng npm install bootstrap hoặc trình quản lý gói yarn hoặc đặt toàn cục của trình duyệt bằng ReactJS Bootstrap CDN

NPM cài đặt phương pháp bootstrap.  

npm install react-bootstrap bootstrap

Sử dụng trình quản lý gói Yarn.  

________số 8

phương thức CDN.  

Khi bạn đã thiết lập tất cả các phụ thuộc vào các mô-đun nút của mình, tiếp theo, bạn cần thiết lập các phụ thuộc biểu định kiểu. Bạn có thể nhập chúng vào src/index của mình. js hoặc ứng dụng js hoặc bạn có thể thêm CDN trong toàn cầu trình duyệt của mình

Sử dụng tính năng nhập vào Ứng dụng của bạn. js hoặc src/chỉ mục. js cho CSS.  

npx create-react-app foldername

Sử dụng tính năng nhập vào Ứng dụng của bạn. scss cho SASS.  

Ghi chú. Bạn cần nhập tệp sass vào Ứng dụng của mình. js/chỉ mục. tập tin js

npx create-react-app foldername

Sử dụng CDN

npx create-react-app foldername

Sau khi thêm các mô-đun nút này và nhập CSS, giờ đây bạn có thể sử dụng ReactJS Bootstrap trong Ứng dụng React và ứng dụng React của mình.  

Sử dụng các thành phần ReactJS sau khi quá trình tích hợp của bạn hoàn tất

Có rất nhiều thành phần mà ReactJS Bootstrap cung cấp. Hãy để chúng tôi xem một số thành phần thường được sử dụng và thảo luận về cách nó tăng thêm giá trị cho ứng dụng React và ứng dụng React của bạn

nút.  

React Bootstrap hỗ trợ các nút được thiết kế với các biến thể khác nhau, bao gồm nhiều kích cỡ và trạng thái

Để sử dụng Nút trong Thành phần của bạn, bạn cần nhập thành phần nút và sử dụng bộ chọn được cung cấp

npx create-react-app foldername

tab.  

Bạn có thể tạo các giao diện theo thẻ động bằng cách sử dụng ReactJS Bootstrap, với các thành phần cấp cao để tạo nhanh các Điều hướng

Để sử dụng các Tab bên trong thành phần của bạn, bạn cần nhập Tab và thành phần Tab, đồng thời đặt các phím sự kiện và Điều hướng hoạt động mặc định tương ứng

npx create-react-app foldername

Bàn.  

Bạn có thể tạo Bảng có nhiều biến thể khác nhau với nhiều tùy chọn với chủ đề, đường viền và khả năng phản hồi.  

Để sử dụng Bảng, hãy nhập nó vào bên trong thành phần của bạn. Thêm cặp td và tr tùy theo yêu cầu và cấu trúc của bạn

npx create-react-app foldername

thả xuống.  

Danh sách thả xuống là các phần tử giao diện người dùng có thể chuyển đổi với một danh sách được hiển thị xuyên suốt để lựa chọn. Thành phần này sử dụng Popper JS, cung cấp tính năng định vị động và phát hiện khung nhìn

Để sử dụng menu thả xuống, hãy nhập thành phần Dropdown trong thành phần của bạn. Bạn có thể sử dụng các thuộc tính và đạo cụ do thành phần cung cấp để tùy chỉnh thêm chủ đề, biến thể và nhiều tính năng khác

npx create-react-app foldername

cảnh báo.  

Cảnh báo cung cấp thông báo phản hồi theo ngữ cảnh cho các hành động của người dùng và có sẵn trong nhiều biến thể. Bạn có thể đặt bất kỳ chuỗi độ dài nào bên trong nó và nó sẽ đảm nhận khả năng phản hồi

Để sử dụng Cảnh báo, hãy nhập nó vào bên trong thành phần của bạn. Bạn cần cung cấp các biến thể làm đạo cụ cho thành phần

yarn add react-bootstrap

Có nhiều thành phần có giá trị và dễ sử dụng được cung cấp bởi React Bootstrap. Chúng tôi đã thảo luận về một số điều ở trên và xem xét các cách khác nhau mà bạn có thể sử dụng chúng với các thuộc tính và đạo cụ phù hợp. Chúng ta hãy xem một loạt chúng trong nháy mắt. Bạn có thể kiểm tra tất cả chúng ở đây

yarn add react-bootstrap

Làm cách nào để sửa đổi thành phần được hiển thị hoặc thẻ HTML?

Bạn có thể muốn cập nhật các thành phần giao diện người dùng mà bạn đã hiển thị trên giao diện người dùng nhiều lần. Cách tốt nhất để làm như vậy là giữ nguyên kiểu dáng của thành phần kết xuất và chuyển đổi thành phần kết xuất. Bạn cần sử dụng API prop “as” trong các thành phần Bootstrap ReactJS của mình

Hãy xem một ví dụ để hiểu điều này tốt hơn.  

Nhập một thành phần ReactJs Bootstrap Nav

yarn add react-bootstrap

Bây giờ, hãy tạo một Thành phần Nav đơn giản

yarn add react-bootstrap

Bây giờ, đầu ra trông giống như thế này.  

Giả sử rằng bây giờ bạn phải giữ kiểu dáng của Điều hướng, nhưng bạn muốn hiển thị hoặc chuyển một trong các Thanh Điều hướng thành một nút. Có thể chuyển đổi bằng cách sử dụng chỗ dựa “as”

Hãy để chúng tôi tạo một Phần tử nút

yarn add react-bootstrap

Bây giờ, hãy sử dụng prop “as” bên trong một trong các Thanh điều hướng của thành phần Điều hướng

yarn add react-bootstrap

Đầu ra kết quả sẽ như thế này.  

Quản lý khả năng truy cập trong các thành phần Bootstrap của ReactJs.  

React Bootstrap có “Khả năng truy cập theo mặc định. ” Một người sử dụng các thành phần bên trong Ứng dụng không cần phải lo lắng về điều đó. Theo tài liệu React Bootstrap,

“Mỗi thành phần được triển khai có tính đến khả năng tiếp cận. Kết quả là một tập hợp các thành phần có thể truy cập theo mặc định, hơn những gì có thể từ Bootstrap đơn giản. ”

Mặc dù, nếu bạn cần quản lý và kiểm soát khả năng truy cập của các Thành phần giao diện người dùng mà bạn đang hiển thị với sự trợ giúp của Bootstrap ReactJS, bạn có thể xác định rõ ràng các chỉ mục tab và nhãn aria theo yêu cầu của mình

Thêm chủ đề tùy chỉnh vào ReactJS Bootstrap

ReactJS Bootstrap tương thích cao với các chủ đề Javascript Bootstrap hiện có. Bạn chỉ cần sử dụng quy trình cài đặt cơ bản do Javascript Bootstrap cung cấp để có được điều đó. Tuy nhiên, trong trường hợp bạn cần thiết lập chủ đề tùy chỉnh cho thành phần của mình, bạn cần ghi đè chủ đề của Bootstrap.  

Hãy để chúng tôi xem làm thế nào bạn có thể làm điều đó

1. Trước tiên, bạn cần cài đặt sass và tạo tệp SCSS của mình để viết mã ghi đè

yarn add react-bootstrap

2. Tiếp theo, bạn cần nhập tệp CSS bootstrap vào tệp sass chủ đề tùy chỉnh của mình

yarn add react-bootstrap

3. Cuối cùng, bạn cần nhập tệp này vào chỉ mục của mình. js/Ứng dụng. js thay vì tệp CSS bootstrap để làm cho tệp chủ đề tùy chỉnh có hiệu lực

Ghi chú. Bạn cần thêm ký hiệu '~' trong khi nhập bootstrap để giải quyết các mô-đun nút trong dự án của mình

Phản ứng Bootstrap với các trạng thái

React Bootstrap tuân theo hành vi của React Javascript, cho phép bạn chuyển các props tới các thành phần Bootstrap ReactJS. Những thứ này có thể làm cho các thành phần rất linh hoạt khi được sử dụng với các trạng thái. Việc thêm các trạng thái làm chỗ dựa cho thành phần sẽ tránh thao tác trực tiếp với trạng thái DOM và quản lý hiệu quả các thành phần có độ phức tạp cao

Hãy để chúng tôi xem một ví dụ.  

yarn add react-bootstrap

Trong ví dụ trên, mở là trạng thái quản lý việc bật tắt Thành phần có thể thu gọn

Thêm Chuyển tiếp vào các thành phần Bootstrap ReactJS của bạn.  

You can add fundamental CSS transitions to your bootstrap components. React Bootstrap has bundled all of them into a composable component, a commonly used animation wrapper in react.

Có 2 hiệu ứng chuyển cảnh thường được sử dụng là Collapse và Fade

Thu gọn thực hiện quá trình chuyển đổi theo chiều dọc hoặc chiều ngang và mờ dần phát theo độ mờ của vùng chứa trong quá trình chuyển đổi. Hãy xem cách bạn có thể nhập chúng vào dự án của mình

yarn add react-bootstrap

Bây giờ, chúng ta hãy xem một ví dụ cho Fade Transition

Trong đoạn mã trên, một trình xử lý được gắn vào nút, chuyển đổi khả năng hiển thị của Thành phần mờ dần, tùy thuộc vào trạng thái

Đầu ra trông giống như thế này

Bảo trì tỷ lệ trong ReactJS Bootstrap.  

Bạn có thể thêm Tỷ lệ khung hình cho các thành phần bạn đang sử dụng từ React Bootstrap. Các tỷ lệ khung hình này có thể được xác định trước hoặc tùy chỉnh, tùy thuộc vào yêu cầu của bạn và bạn cần nhập tỷ lệ này vào thành phần của mình để sử dụng Tỷ lệ trước

Tỷ lệ được xác định trước.  

Tỷ lệ tùy chỉnh.  

Sự kết luận

Tóm lại, ReactJS Bootstrap cung cấp nhiều thành phần và tính linh hoạt để liên kết chúng với Thành phần React của bạn. Nó di chuyển cùng với kiến ​​trúc ReactJS, tuân theo Virtual DOM và quản lý trạng thái. Nó có các tính năng khả năng truy cập và phản hồi được xác định trước giúp điều này thậm chí còn mạnh mẽ hơn. Bạn cũng có thể sử dụng mẫu ReactJS Bootstrap trong ứng dụng React của mình để sử dụng các trang web sẵn sàng sử dụng nhằm phát triển nhanh hơn. Hai trong số các mẫu ReactJs Bootstrap được sử dụng rộng rãi là Reactify và Architect UI

Cuối cùng, tôi hy vọng blog này đã cung cấp cho bạn một số hiểu biết sâu sắc hơn về ReactJS Bootstrap và các thành phần của nó. Bây giờ bạn có thể tự tin bắt đầu sử dụng Bootstrap với React. Nếu bạn muốn chuyển đổi mã Figma sang mã HTML, hãy xem CopyCat

Làm cách nào tôi có thể sử dụng Bootstrap trong React?

Bootstrap có tốt cho React không?

Tôi có thể sử dụng phương thức Bootstrap trong React không?

Làm cách nào để sử dụng Bootstrap 5 trong ReactJS?