LÀM THẾ NÀO bao gồm Bootstrap js trong phản ứng?

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

Phản ứng Bootstrap là gì?

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 để cài đặt Bootstrap trong React?

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.  

yarn add react-bootstrap

phương thức CDN.  

Làm cách nào để nhập bootstrap trong phản ứng?

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.  

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

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

@import "~bootstrap/scss/bootstrap";

Sử dụng CDN

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

Cách sử dụng Bootstrap trong React

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

 import Button from "react-bootstrap/Button";
 

             Button

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

import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";

       

             
               
               
               
             
           

Cái 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

________số 8

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

import Dropdown from "react-bootstrap/Dropdown";

 

             
               
                 Dropdown Button
               
 
               
                 Action
                 
                   Another action
                 
                 
                   Something else
                 
               
             

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.  

Phần 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