Sử dụng Bootstrap với React có tốt không?

Đâ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

Giáo sư Bootstrap

ĐÂY LÀ NƠI ‘BOOTSTRAP’ XUẤT HIỆN

Để 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
  • Đảm bảo rằng bạn đã cài đặt npm trên máy tính của mình
  • Visual Studio Code, bạn có thể tải xuống từ đây
  • Kiến thức về tạo và nhập các thành phần trong React
  • Kiến thức cơ bản về các lớp bootstrap
  • Một chút mong muốn được thổi bay
  • Liên kết đến kho lưu trữ TẠI ĐÂY
BẠN SẼ HỌC ĐƯỢC GÌ
  • Sử dụng các Thành phần Bootstrap trong React (giảm số lượng lớp bạn phải thêm)
  • Thưởng. Sử dụng các biểu tượng phông chữ tuyệt vời trong React
Bước 1 — Bắt đầu

Đ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 Bootstrap

Chú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

  1. Thành phần thanh điều hướng
  2. Thành phần mặt hàng giỏ hàng
BƯỚC 3-TÒA NHÀ

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 BOOTSTRAP

Mộ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ẩu

Thà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 CARTITEM

GHI CHÚ

  • Khi thành phần chính đã được nhập, các tập hợp con của nó cũng không cần nhập. Ví dụ. Thẻ Bootstrap có các lớp tập hợp con của thân thẻ và tiêu đề thẻ, tất cả đều tuân theo sau khi thẻ được nhập
  • Quy ước đặt tên cho các lớp Bootstrap dưới dạng thành phần React là đặt dấu chấm sau tên thành phần bằng PascalCase như đã thấy trong 'Thanh điều hướng'. Thương hiệu' và 'Thẻ. Cơ thể người'
  • Khi nhập nhiều thành phần từ Reac-bootstrap, phương thức được sử dụng trên dòng 10 thường được sử dụng. tôi. e
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ỜI

Khi 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