Bạn có thể trộn phản ứng và Bootstrap không?

Mặc dù bạn không phải sử dụng bất kỳ thư viện cụ thể nào để tích hợp Bootstrap với các ứng dụng React, nhưng việc này thường dễ dàng hơn là cố gắng bọc các plugin Bootstrap jQuery. React Bootstrap là tùy chọn phổ biến nhất cố gắng hoàn toàn ngang bằng với Bootstrap. Reacstrap cũng là một lựa chọn tốt cho các dự án đang tìm kiếm các bản dựng nhỏ hơn với chi phí của một số tính năng

Mỗi trang web tài liệu tương ứng của dự án có hướng dẫn chi tiết để cài đặt và sử dụng chúng. Cả hai đều phụ thuộc vào tệp css Bootstrap, vì vậy hãy cài đặt cả tệp đó

npm install bootstrap

Bản sao

Ngoài ra, bạn có thể sử dụng yarn

yarn add bootstrap

Bản sao

Nhập CSS Bootstrap và CSS chủ đề Bootstrap tùy chọn vào đầu tệp src/index.js của bạn

import 'bootstrap/dist/css/bootstrap.css';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.

Bản sao

Sử dụng chủ đề tùy chỉnh

Ghi chú. tính năng này khả dụng với [email protected] và cao hơn

Đôi khi bạn có thể cần điều chỉnh các kiểu trực quan của Bootstrap (hoặc gói tương đương)

Kể từ ngày [email protected], bạn có thể nhập tệp

yarn add bootstrap

1. Điều này cho phép sử dụng các biến Sass tích hợp của gói cho các tùy chọn kiểu toàn cầu

Để bật

yarn add bootstrap

2 trong Tạo ứng dụng React, bạn sẽ cần cài đặt

yarn add bootstrap

3

npm install sass

Bản sao

Ngoài ra, bạn có thể sử dụng yarn

yarn add sass

Bản sao

Để tùy chỉnh Bootstrap, hãy tạo một tệp có tên

yarn add bootstrap

5 (hoặc tương tự) và nhập biểu định kiểu nguồn Bootstrap. Thêm bất kỳ phần ghi đè nào trước (các) tệp đã nhập. Bạn có thể tham khảo tên của các biến có sẵn

// Override default variables before the import
$body-bg: #000;

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

Bản sao

Ghi chú. Bạn có thể thêm tiền tố vào các đường dẫn với

yarn add bootstrap

6, như được hiển thị ở trên, để giải quyết các mô-đun từ

yarn add bootstrap

7

Cuối cùng, nhập tệp

yarn add bootstrap

1 mới được tạo thay vì Bootstrap mặc định

yarn add bootstrap

9 vào đầu tệp src/index.js của bạn, chẳng hạn

Các ứng dụng web đáp ứng và mạnh mẽ đã trở thành một nhu cầu không thể thiếu đối với các doanh nghiệp hiện đại. Đối với điều này, việc sử dụng ngăn xếp công nghệ truyền thống gồm JS, HTML và CSS trong giao diện người dùng của trang web là không đủ

Thay vào đó, các nhà phát triển phải chuyển sang các giải pháp thay thế phát triển hiện đại và mạnh mẽ hơn để tạo các ứng dụng web đáp ứng các nhu cầu kinh doanh phức tạp trong khi vẫn đảm bảo hiệu suất dễ dàng

Phần lớn các nhà phát triển đang sử dụng React với Bootstrap để đạt được mục tiêu này trong các dự án phát triển web của họ. Nếu bạn đang tự hỏi làm thế nào bạn có thể tạo các ứng dụng web mạnh mẽ và đáp ứng, thì blog này chính là nơi thích hợp để bắt đầu

Trong blog này, chúng tôi sẽ thảo luận về cách bạn có thể sử dụng React và Bootstrap một cách hiệu quả để tạo các ứng dụng web mạnh mẽ và thân thiện với thiết bị di động cho các dự án của bạn

Mục lục

Tại sao nên sử dụng React với Bootstrap?

React là một trong những thư viện JS phổ biến nhất để phát triển front-end. Nó hỗ trợ các nhà phát triển tạo các trang web và ứng dụng web mạnh mẽ bằng cách sử dụng các thành phần giao diện người dùng có thể tái sử dụng và nhiều thư viện giao diện người dùng

Bootstrap là một thư viện CSS nổi tiếng và có thể hỗ trợ các nhà phát triển tạo các trang web đáp ứng độc đáo với tốc độ nhanh một cách hiệu quả

Bằng cách kết hợp khả năng sử dụng của React với khả năng của Bootstrap, các nhà phát triển có thể dễ dàng tạo các trang web đáp ứng bằng React

Nó giúp các nhà phát triển giao diện người dùng vượt ra ngoài các ràng buộc của CSS như cơ sở mã bùng nổ, dự phòng, v.v.

Làm cách nào để tích hợp Bootstrap với React?

Bây giờ bạn đã biết cách Bootstrap có thể tăng tốc quá trình phát triển dựa trên React, hãy tiến hành tích hợp React & Bootstrap vào các dự án của bạn. Bạn có thể đạt được điều này theo ba cách chính, như được thảo luận bên dưới

a. ) Tích hợp với Bootstrap CDN

Tích hợp Bootstrap với sự trợ giúp của Bootstrap CDN là một trong những cách nhanh nhất để sử dụng Bootstrap trong các dự án phát triển web dựa trên React của bạn một cách hiệu quả. Cũng như CDN, bạn có thể tránh tải xuống các phụ thuộc React bên ngoài và bắt đầu sử dụng Bootstrap trong các dự án của mình ngay lập tức. Để tích hợp Bootstrap hiệu quả bạn có thể làm theo các bước dưới đây

Bước 1. Giả sử bạn đã tạo ứng dụng React của mình bằng cách sử dụng

1, chúng tôi chỉ cần đưa liên kết của phiên bản hiện tại của Bootstrap được cung cấp bên dưới vào CDN trong phần đầu trong khoảng thời gian

2

Bước 2. Để đảm bảo bạn sử dụng Bootstrap trong dự án React của mình một cách dễ dàng, bạn sẽ cần các thành phần Javascript đi kèm với bootstrap. Đối với điều này, chúng tôi sẽ liên kết đến

3 như được mô tả bên dưới trong thẻ script và đặt nó ngay trước phần cuối của thẻ body

Bước 3. Sau khi đặt các liên kết trong công khai/chỉ mục. html, cơ sở mã hoàn chỉnh sẽ trông giống như ví dụ hiển thị bên dưới và bạn sẽ sẵn sàng sử dụng chức năng Bootstrap

b. ) Tích hợp BootStrap dưới dạng phụ thuộc React

Đối với các nhà phát triển sử dụng công cụ xây dựng hoặc gói mô-đun như webpack để tạo dự án React của họ, sử dụng phần phụ thuộc React để tích hợp bootstrap sẽ là cách dễ dàng nhất để bắt đầu. Để tích hợp Bootstrap dưới dạng phụ thuộc React, bạn có thể làm theo các bước được đề cập bên dưới

Bước 1. Để bắt đầu cài đặt phần phụ thuộc, bạn có thể chạy lệnh được đề cập bên dưới trong ứng dụng React của mình để cài đặt phiên bản Bootstrap mới nhất một cách hiệu quả

npm install bootstrap

Bước 2. Sau khi phụ thuộc Bootstrap được cài đặt, chúng tôi có thể bao gồm các thành phần CSS và JS của Bootstrap trong gói nhập ứng dụng của chúng tôi như được hiển thị bên dưới

// Acess Bootstrap CSS with the link below
import "bootstrap/dist/css/bootstrap.min.css";

// Acess Bootstrap Bundle JS with the link below
import "bootstrap/dist/js/bootstrap.bundle.min";

Bước 3. Nếu bạn đã sử dụng ứng dụng tạo phản ứng để xây dựng dự án của mình, để cài đặt Bootstrap làm phụ thuộc phản ứng, hãy truy cập src/index. js để nhập bootstrap. Nó sẽ trông giống như ví dụ dưới đây

import React from "react";
import ReactDOM from "react-dom/client";

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";

// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import "./index.css";

import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  
    
  
);
reportWebVitals();

Sau khi cài đặt hoàn tất, bạn có thể dễ dàng sử dụng Bootstrap để tạo các dự án dựa trên React hiệu quả và độc đáo

c. ) Tích hợp sử dụng các gói Bootstrap như Reac-bootstrap và Reacstrap

Reac-bootstrap và reactstrap hỗ trợ các nhà phát triển sử dụng Bootstrap dưới dạng các thành phần React trong dự án của họ. Một trong những lợi ích lớn nhất của việc sử dụng các gói như vậy là nó đi kèm với tất cả các phần tử Bootstrap được đóng gói dưới dạng các thành phần phản ứng, giúp người dùng sử dụng chúng dễ dàng hơn nhiều

Nó còn cho phép các nhà phát triển trực tiếp sử dụng Bootstrap trên các thành phần và thành phần phản ứng của lớp của bạn. Để hiểu cách các gói bootstrap hoạt động trực tiếp trên các phần tử React, chúng ta hãy thử tạo một ứng dụng phản ứng bằng cách sử dụng từng gói

i. ) Ứng dụng React sử dụng gói React-Bootstrap

Để bắt đầu sử dụng Reac-bootstrap, chúng ta sẽ bắt đầu nhập gói bằng lệnh được đề cập bên dưới

npm install react-bootstrap bootstrap

Sau khi cài đặt hoàn tất, bạn đã sẵn sàng sử dụng gói Reac-bootstrap. Bây giờ, hãy thử tạo một ứng dụng phản ứng đơn giản sử dụng thành phần phản ứng-bootstrap bằng cách sử dụng cơ sở mã bên dưới

import React, { useState } from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
import Toast from "react-bootstrap/Toast";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import "./App.css";

const ExampleToast = ({ children }) => {
  const [show, toggleShow] = useState(true);
  return (
    <>
      {!show &&  toggleShow(true)}>Show Toast}
       toggleShow(false)}>
        
          React-Bootstrap
        
        {children}
      
    
  );
};
const App = () => (
  
    
      
This is the work of React Bootstrap
      
        Congrats Now You know How To use React-Bootstrap package{" "}
        
          🎉
        
      
    
  
);
export default App;

Từ ví dụ trên, chúng ta có thể kết luận rằng các nhà phát triển có thể dễ dàng nhập các thành phần Bootstrap cần thiết và sử dụng chúng với các phần tử React

ii. ) Ứng dụng phản ứng bằng Reactstrap

Reactstrap là một gói phản ứng khác mà bạn có thể sử dụng để tích hợp bootstrap trong ứng dụng React của mình. Tuy nhiên, trước khi chúng tôi bắt đầu sử dụng Reacstrap, điều cần thiết là phải nhớ rằng bản thân gói không bao gồm Bootstrap CSS. Do đó chúng nên được cài đặt riêng

Để cài đặt reactstrap, hãy sử dụng lệnh bên dưới

npm install --save bootstrap
npm install --save reactstrap react react-dom

Để tiếp tục bao gồm Bootstrap CSS, bạn sẽ phải nhập nó bằng cách sử dụng lệnh sau

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

Sau khi cài đặt, bạn đã sẵn sàng sử dụng các thành phần reactstrap một cách hiệu quả trong các dự án phản ứng của mình. Hãy thử sử dụng reactstrap với các ví dụ sau

0

Lời cuối cùng về việc triển khai React với Bootstrap

Với hướng dẫn ở trên, giờ đây bạn có thể dễ dàng sử dụng các thành phần Bootstrap với React để tạo giao diện người dùng ứng dụng duy nhất cho các dự án của mình

Có thể bằng cách sử dụng CDN, Phụ thuộc React hoặc các thành phần tạo sẵn, bằng cách bao gồm các thành phần bootstrap với React, bạn có thể dễ dàng nâng cao chất lượng của ứng dụng web của mình một cách dễ dàng

Tuy nhiên, trong khi chọn phương pháp bao gồm Bootstrap, hãy luôn lưu ý đến nhu cầu phát triển độc đáo và khả năng cá nhân của bạn

Ví dụ: nếu bạn đang nắm trong tay bootstrap thì sử dụng CDN sẽ là một lựa chọn tốt. Tuy nhiên, để phát triển nhanh hơn, sử dụng các gói React như đã đề cập ở trên là điều cần thiết

Vì vậy, hãy bắt đầu sử dụng Bootstrap ngay với lựa chọn phương pháp của bạn bằng cách sử dụng hướng dẫn của chúng tôi và tạo các ứng dụng React tương tác và thân thiện với người dùng cho khách hàng của bạn một cách dễ dàng

---

Giám sát hiệu suất phản ứng với trạng thái

Trực quan hóa các lỗi React và các vấn đề về hiệu suất ảnh hưởng đến trải nghiệm người dùng cuối của bạn. Với giám sát hiệu suất React của Atatus, bạn có thể xác định và giải quyết vấn đề nhanh hơn với các điểm dữ liệu chuyên sâu hỗ trợ bạn phân tích và giải quyết chúng

Sử dụng Atatus, bạn có thể có cái nhìn tổng quan về cách khách hàng trải nghiệm ứng dụng React của bạn. Tìm hiểu cách xác định nguyên nhân gốc rễ của thời gian tải chậm, thay đổi tuyến đường, v.v. ở giao diện người dùng bằng cách xác định các tắc nghẽn hiệu suất ở giao diện người dùng

Lỗi phản ứng và giám sát hiệu suất của trạng thái

Đảm bảo rằng ứng dụng React của bạn gửi tất cả các yêu cầu XHR. Theo dõi và đo lường thời gian phản hồi và tỷ lệ thất bại của các cuộc gọi XHR. Tối ưu hóa hiệu suất yêu cầu AJAX bằng cách xác định các cuộc gọi chậm và không thành công. Phân tích lệnh gọi AJAX trong thời gian thực dựa trên trình duyệt, người dùng, phiên bản, thẻ và các thuộc tính khác

Xác định lý do đằng sau hiệu suất giao diện người dùng kém và tải trang chậm đang ảnh hưởng đến khách hàng của bạn. Kiểm tra người dùng cá nhân đang gặp phải hiệu suất kém do trang chậm, ngoại lệ React hoặc phương pháp AJAX không thành công

Xác định trải nghiệm của người dùng cuối của bạn bị ảnh hưởng như thế nào bởi mạng hoặc địa lý. Ngoài việc xác định nội dung React chậm, thời gian tải lâu và lỗi trong phiên, dấu vết phiên còn cung cấp chế độ xem thác nước của phiên

Xem xét kỹ hơn hiệu suất ứng dụng React của bạn với Status. Để bắt đầu, hãy kích hoạt bản dùng thử miễn phí Atatus trong 14 ngày

Làm cách nào để đưa Bootstrap vào Reacjs?

Bạn có thể sử dụng bootstrap 5 với React không?

Tôi có thể sử dụng các lớp bootstrap với React bootstrap không?