React là một trong những khung và thư viện JavaScript phổ biến nhất để xây dựng các ứng dụng một trang và giao diện người dùng. Tính linh hoạt của nó trong việc xây dựng giao diện người dùng bằng cách sử dụng các thành phần có thể tái sử dụng, tốc độ phát triển và cộng đồng hỗ trợ là những lý do khiến nó trở nên phổ biến.
Tuy nhiên, React cần phải được kết hợp với Cascading Style Sheets (CSS) để làm cho các ứng dụng của nó trở nên hấp dẫn và dễ trình bày hơn. Viết CSS từ đầu có thể tốn thời gian.
Các nhà phát triển có thể dành nhiều thời gian để tạo kiểu thay vì các tính năng cốt lõi của React. Tin vui là các công cụ và framework như Bootstrap giúp việc thêm CSS vào ứng dụng React trở nên dễ dàng.
Bootstrap là gì?
Bootstrap là một framework CSS mã nguồn mở để phát triển front-end. Bootstrap cho phép các nhà phát triển tạo các trang web đáp ứng và thân thiện với thiết bị di động với một bộ công cụ và mẫu thiết kế dựa trên JavaScript và CSS toàn diện.
Bootstrap được tạo ra bởi Twitter và cũng được duy trì bởi một nhóm kỹ sư của cùng một công ty. Mã nguồn của nó được duy trì trên GitHub và các thành viên cộng đồng có thể đóng góp và gửi báo cáo lỗi cũng như đề xuất. khởi động 5.3.0-alpha1 là phiên bản mới nhất tại thời điểm viết bài.
Tại sao nên sử dụng Bootstrap với React?
- Tiết kiệm thời gian: Bootstrap đảm nhiệm việc định dạng, giúp bạn có nhiều thời gian hơn để tập trung vào chức năng. Bằng cách này, bạn không phải lo lắng về những thứ như sự xuất hiện của biểu mẫu hoặc nút mà thay vào đó là các vấn đề như liệu nút gửi có đang gửi dữ liệu đến chương trình phụ trợ hoặc API của bạn hay không.
- Dễ sử dụng: Sau khi thêm Bootstrap vào ứng dụng React của bạn, chỉ cần lấy các thành phần UI được thiết kế sẵn và thêm chúng vào ứng dụng của bạn.
- Thiết kế nhất quán: Hầu hết các ứng dụng đều phát triển theo thời gian. Đảm bảo thiết kế trang web nhất quán là điều quan trọng nếu bạn muốn thu hút khách truy cập trung thành. Bootstrap có một phong cách nhất quán sẽ mang lại cho các trang của bạn một giao diện thống nhất.
- Rất nhiều mẫu để lựa chọn: Bootstrap có hàng trăm mẫu khác nhau, từ thanh điều hướng, nút, biểu mẫu và băng chuyền cho đến danh sách thả xuống, chỉ kể tên một số mẫu để bạn lựa chọn.
- Dễ dàng tùy chỉnh: Mặc dù Bootstrap có các mẫu thiết kế, bạn luôn có thể tùy chỉnh kích thước phông chữ, màu sắc và các tính năng khác để phù hợp với nhu cầu của mình.
- Hỗ trợ cộng đồng: Bootstrap có tài liệu phong phú để giúp bạn bắt đầu. Tuy nhiên, bạn vẫn có thể dựa vào một cộng đồng lớn để luôn bổ sung thêm các tính năng mới và duy trì cấu trúc CSS này.
- Thiết kế đáp ứng: Khi bạn thêm Bootstrap vào ứng dụng React của mình, bạn có thể chắc chắn rằng ứng dụng web của mình sẽ phản hồi trên mọi kích thước màn hình.
Cách cài đặt Bootstrap trong React
Ứng dụng React không được cài đặt Bootstrap theo mặc định. Nhưng trước khi khám phá cách thêm/cài đặt Bootstrap trong React, chúng ta cần kiểm tra một số thứ;
Điều kiện tiên quyết
Sử dụng lệnh này để kiểm tra xem node.js đã được cài đặt trên máy của bạn chưa:
node -v
Nếu node.js được cài đặt, bạn sẽ thấy kết quả tương tự như thế này trên thiết bị đầu cuối của mình.
Phiên bản nút
Nếu nó chưa được cài đặt, bạn có thể kiểm tra hướng dẫn tải xuống tại https://nodejs.org/en/.
Sử dụng lệnh này để kiểm tra xem React đã được cài đặt trên máy của bạn chưa:
npm list react
Nếu React được cài đặt toàn cầu trên máy của bạn, bạn sẽ có thứ gì đó như thế này trên thiết bị đầu cuối của mình.
Phiên bản phản ứng
- Cài đặt ứng dụng Reac-create-app trên máy tính của bạn. Sử dụng lệnh này
npm install -g create-react-app
- Tạo ứng dụng React của bạn bằng lệnh này
npx create-react-app my-app
Bạn có thể thay thế ứng dụng của tôi bằng bất kỳ tên nào. Trong trường hợp của chúng tôi, chúng tôi đặt tên ứng dụng của mình là React-b.
Sau khi cài đặt, bạn sẽ có một cái gì đó tương tự trên thiết bị đầu cuối của mình:
Chạy các lệnh này để bắt đầu
- cd Reac-b (sử dụng tên ứng dụng của bạn đã chọn ở bước trước)
- npm start (lệnh này khởi động ứng dụng React của bạn)
Bây giờ chúng ta có thể chuyển sang các bước tiếp theo và thêm/cài đặt Bootstrap vào ứng dụng React của mình:
Phương pháp Bootstrap cài đặt NPM
Node.js được cài đặt mặc định npm (trình quản lý gói nút).
Bạn có thể kiểm tra phiên bản npm của mình bằng lệnh này:
npm -v
Nếu npm được cài đặt, bạn sẽ nhận được kết quả như sau 9.2.0
Bây giờ bạn có thể cài đặt bootstrap bằng lệnh này:
npm install bootstrap
Sau khi hoàn tất, hãy điều hướng đến tệp ./src/index.js. Thêm dòng này ở trên cùng.
nhập “bootstrap/dist/css/bootstrap.css”;
Sử dụng Trình quản lý gói sợi
Không giống như npm, theo mặc định, sợi không được cài đặt khi cài đặt node.js.
Cài đặt sân bằng lệnh này;
npm install -g yarn
Lệnh này sẽ cài đặt sợi trên toàn cầu để bạn không còn phải cài đặt gói mỗi khi xây dựng ứng dụng React.
Chạy lệnh này để thêm bootstrap vào React:
yarn add bootstrap
Sau khi hoàn tất, hãy điều hướng đến tệp ./src/index.js. Thêm dòng này ở trên cùng.
nhập “bootstrap/dist/css/bootstrap.css”;
Bạn phải luôn nhập Bootstrap lên trên tệp đầu vào của ứng dụng trước các tệp CSS khác. Điều này giúp bạn dễ dàng thay đổi các mục Bootstrap nếu bạn muốn thay đổi các giá trị mẫu mặc định khi phát triển ứng dụng React.
phương pháp CDN
Sử dụng liên kết Mạng phân phối nội dung (CDN), bạn có thể thêm Bootstrap vào React. Bằng cách thêm liên kết CDN này, bạn đã đưa thư viện Bootstrap vào ứng dụng React của mình mà không cần tải xuống và lưu trữ tệp trong thư mục dự án của mình. Thực hiện theo các bước sau.
- Trong thư mục gốc, điều hướng đến tệp .public/index.html
- Trong thẻ, thêm thẻ này
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Bạn cần thêm các phần phụ thuộc JavaScript vào ứng dụng của mình. Vào nội dung file index.html và thêm thẻ này ngay trước thẻ đóng
:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap cuối cùng đã được cài đặt trong ứng dụng React của bạn.
Sử dụng React Bootstrap
Các phương pháp tiếp cận mà chúng tôi đã đề cập cho đến nay ban đầu được thiết kế cho các tệp HTML. Để hiểu rõ hơn, hãy xem xét mã có thể mở rộng này từ Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Có gì sai với mã này? Bootstrap sử dụng một lớp để phân loại các bộ phận của nó (DIV) theo mặc định. Tuy nhiên, React sử dụng JSX sử dụng cú pháp CamelCase. Như vậy, bạn phải thay thế lớp đó bằng className theo cách thủ công.
Để mã này hoạt động trong React, chúng ta cần thay thế từng ‘class’ bằng ‘className’. Mã cuối cùng sẽ là:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
May mắn thay, chúng tôi có thêm hai cách tiếp cận, Reac-bootstrap và Reacstrap, trong đó không cần can thiệp thủ công.
React-bootstrap
React-bootstrap có các thành phần React thực sự được xây dựng từ đầu. Thư viện tương thích với lõi Bootstrap.
Hãy làm theo các bước sau để bắt đầu với React-bootstrap:
- Cài đặt React-bootstrap bằng lệnh này:
npm install react-bootstrap bootstrap
- Truy cập src/index.js hoặc App.js và thêm dòng này trước các tệp CSS khác
nhập “bootstrap/dist/css/bootstrap.min.css”;
React-bootstrap cho phép bạn nhập một thành phần cụ thể thay vì toàn bộ thư viện. Ví dụ: nếu bạn muốn nhập một nút vào một trong các thành phần của mình, bạn có thể thực hiện như thế này;
nhập {Button} từ “Reac-bootstrap”;
Thanh phản ứng
Đây là thư viện thành phần React cho Bootstrap. Reactstrap dựa trên khung CSS Bootstrap cho kiểu dáng và chủ đề của nó. Thư viện này nhập các lớp Bootstrap thích hợp vào ứng dụng React của bạn, cho phép bạn tạo kiểu cho ứng dụng của mình một cách nhất quán. Bạn cũng không cần thêm tệp JavaScript Bootstrap để kích hoạt chức năng.
Thực hiện theo các bước sau để thêm Reactstrap vào ứng dụng React của bạn:
- Cài đặt Reactstrap bằng lệnh này:
npm install reactstrap react react-dom
- Nhập Bootstrap bằng các lệnh sau:
npm install --save bootstrap
nhập “bootstrap/dist/css/bootstrap.min.css”; (thêm dòng này vào tệp app.js của bạn)
Bạn cũng có thể sử dụng tùy chọn liên kết CDN để đưa Bootstrap vào ứng dụng của mình. Sau bước đầu tiên, hãy chuyển đến thư mục gốc và điều hướng đến tệp .public/index.html và thêm dòng này vào đánh dấu
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap cho phép bạn nhập một thành phần cụ thể thay vì toàn bộ thư viện. Ví dụ: nếu bạn muốn nhập một nút vào một trong các thành phần của mình, bạn có thể nhập dưới dạng;
nhập {Button} từ “Reacstrap”;
Ứng dụng
Trên đây là một số phương pháp bạn có thể sử dụng để cài đặt Bootstrap trong ứng dụng React nhằm tạo kiểu cho ứng dụng web của mình. Việc lựa chọn phương pháp lắp đặt là vấn đề được ưu tiên vì mục tiêu cuối cùng là như nhau.
Việc kết hợp React với Bootstrap sẽ tránh được việc phải theo dõi tất cả các kiểu CSS khi ứng dụng của bạn phát triển. Việc tạo kiểu ứng dụng trở nên dễ dàng và hiệu quả khi bạn có nhiều thời gian hơn để tập trung vào chức năng.
Bạn có thể khám phá một số lý do tại sao bạn nên chọn React Native để phát triển ứng dụng di động.
