Đâ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
- 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
Đ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-appXin 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 bootstrap@5.0.2Bướ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-fontawesomeVì 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
- Thành phần thanh điều hướng
- Thành phần mặt hàng giỏ hàng
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
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ừ