Đây là một trang web hoàn chỉnh mà tôi đã xây dựng, tất nhiên, bên dưới những thành phần này là khá nhiều mã viết tay Show
Để tham khảo, trang trông như thế này Bootstrap có nhiều thứ nhưng trong trường hợp này, chúng tôi sẽ coi nó như một thư viện cho phép chúng tôi nhập và sử dụng các thành phần khác nhau để tạo giao diện người dùng trong các ứng dụng React của mình. Điều này giúp tiết kiệm một lượng thời gian đáng kể vì các nhà phát triển không cần phải viết mọi thứ từ đầu Tôi quá hào hứng để giải thích cho bạn nghe, chúng ta hãy bắt đầu ĐIỀU KIỆN TRƯỚC
Điều hướng đến thư mục mong muốn của bạn và tạo dự án React bằng cách nhập lệnh sau vào terminal hoặc cmd npx create-react-app cartpage-app Xin lưu ý rằng quá trình xây dựng này có thể mất một chút thời gian tùy thuộc vào tốc độ internet của bạn Sau khi cài đặt hoàn tất, hãy mở thư mục trong trình chỉnh sửa mã của bạn. Sau đó, gõ npm start để khởi chạy máy chủ phát triển. Bạn có thể xem ứng dụng React mặc định bằng cách điều hướng đến http. //máy chủ cục bộ. 3000/ trong trình duyệt của bạn Bước 2 - Cài đặt BootstrapChúng ta phải cài đặt Material-UI để truy cập các chức năng hoặc thành phần khác nhau của nó. Mở thiết bị đầu cuối của bạn và đảm bảo rằng bạn đang ở trong thư mục chính của ứng dụng Sau đó, trong thiết bị đầu cuối của bạn, hãy cài đặt Vật liệu bằng cách gõ lệnh sau npm install react-bootstrap@next [email protected] Bước 2. i — Cài đặt Phông chữ Tuyệt vờiĐể bắt đầu, bạn cần cài đặt các gói sau vào dự án của mình bằng npm. Dưới đây là các ví dụ cài đặt mọi thứ bạn cần và kiểu biểu tượng chắc chắn bằng cách sử dụng từng trình quản lý gói tương ứng npm i — save @fortawesome/fontawesome-svg-corenpm install — save @fortawesome/free-solid-svg-iconsnpm install — save @fortawesome/react-fontawesome Vì lợi ích của dự án này, điều này là đủ, nhưng có những cài đặt khác cần thiết cho các biểu tượng thương hiệu hoặc những thứ khác Chúng tôi có thể xác nhận rằng các phụ thuộc trên đã được cài đặt bằng cách kiểm tra gói. json. Điều này được hiển thị dưới đây Bước cuối cùng là nhập các tệp bootstrap trong Ứng dụng của chúng tôi. js như thế này Hãy chia nhỏ các thành phần và xem những gì chúng ta có thể làm
3i. THANH NAVĐiều đầu tiên là tạo thành phần thanh điều hướng và nhập nó vào Ứng dụng của chúng tôi. tập tin js. Một cái gì đó như thế này Lưu ý rằng Nav. js nằm trong thư mục thành phần và điều đó rất hữu ích khi nhập nó như đã thực hiện ở dòng 2 Và bây giờ cho mã THÀNH PHẦN UI BOOTSTRAPMột danh sách đầy đủ các thành phần có thể được tìm thấy ở đây. Điều bạn cần biết là để nhập các thành phần Bootstrap, tên của thành phần thường là tên chính của thẻ thành phần như đã thấy trong trường hợp của Navbar ở trên. Trên dòng 16 trong hình ảnh củaReac-bootstrap được cài đặt là những gì chúng tôi sử dụng để cố gắng trích xuất một thành phần nhập khẩuThành phần phải được gọi với từ khóa nhập khẩu phổ biến trong phản ứng và từ vị trí 'reac-bootstrap/Componentas đã thấy trên Dòng 2 bên dưới Điều này là cơ bản nhất có thể khi sử dụng Bootstrap với React Bây giờ chúng ta đã hiểu điều đó, hãy bắt đầu mọi thứ một chút 3ii. THÀNH PHẦN CARTITEMGHI CHÚ
import { Button, Container, Card, Image } from ‘react-bootstrap’; Hệ tư tưởng tương tự được sử dụng khi nhập các biểu tượng phông chữ tuyệt vời. Tuy nhiên có một nhược điểm. ”Nó có thể tăng số lượng mã bạn gửi cho khách hàng. ” FONT THÀNH PHẦN BIỂU TƯỢNG TUYỆT VỜIKhi nói đến phông chữ tuyệt vời, như thường lệ, tất cả những gì bạn cần biết là tên lớp của biểu tượng và phần còn lại là đi dạo trong công viên Đầu tiên như đã thấy ở dòng 8 và 9, Font awesome có hai lần nhập, chính thành phần đó import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’ và sau đó là biểu tượng import { faPlusCircle, faMinusCircle, faTrash, faLongArrowAltLeft } from ‘@fortawesome/free-solid-svg-icons’ Có thể nhận thấy rằng các tên biểu tượng tương tự như các lớp thông thường được sử dụng để gọi các biểu tượng bằng cách sử dụng thẻ, nhưng quy ước đặt tên của nó cũng là PascalCase. Đây là một ví dụ sử dụng biểu tượng dấu trừ Sử dụng React với Bootstrap có tốt không?Mỗi thành phần đã được xây dựng từ đầu như một thành phần React thực sự, không có các thành phần phụ thuộc không cần thiết như jQuery. Là một trong những thư viện React lâu đời nhất, React-Bootstrap đã phát triển và phát triển cùng với React, khiến nó sự lựa chọn tuyệt vời làm nền tảng giao diện người dùng của bạn .
Cách tốt nhất để sử dụng Bootstrap với React là gì?Cách tốt nhất để sử dụng React-Bootstrap là thông qua gói npm mà bạn có thể cài đặt bằng npm (hoặc yarn nếu bạn thích). Nếu bạn định tùy chỉnh các tệp Bootstrap Sass hoặc không muốn sử dụng CDN cho biểu định kiểu, thì cũng có thể hữu ích khi cài đặt vanilla Bootstrap |