Dự án là một trang web thương mại điện tử được xây dựng bằng React Js. Dự án này bao gồm hai trang: trang chủ để hiển thị danh sách sản phẩm và trang chi tiết để hiển thị chi tiết của sản phẩm được chọn.
Công nghệ được sử dụng trong dự án này bao gồm:
-
HTML: Được sử dụng để xây dựng cấu trúc cơ bản của trang web.
-
CSS: Được sử dụng để tạo ra giao diện người dùng đẹp mắt và thân thiện.
-
JavaScript: Được sử dụng để thêm các chức năng tương tác cho trang web.
-
React: Một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng.
-
Bootstrap: Một framework CSS được sử dụng để thiết kế giao diện người dùng nhanh chóng và dễ dàng.
-
Font-Awesome: Một thư viện biểu tượng được sử dụng để thêm các biểu tượng vào trang web.
Dự án này sử dụng API từ https://fakestoreapi.com/products để lấy danh sách tất cả các sản phẩm và chi tiết của một sản phẩm cụ thể.
Chức năng chính của dự án này bao gồm:
-
Hiển thị danh sách sản phẩm: Người dùng có thể xem danh sách tất cả các sản phẩm trên trang chủ.
-
Hiển thị chi tiết sản phẩm: Khi người dùng chọn một sản phẩm, họ sẽ được chuyển đến trang chi tiết sản phẩm, nơi họ có thể xem thông tin chi tiết về sản phẩm đó.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
npm i
npm start
Để cài đặt một dự án React.js với HTML, CSS, JavaScript, React, Bootstrap, và Font-Awesome từ mã nguồn, bạn cần làm theo các bước sau:
Đầu tiên, bạn cần cài đặt Node.js và npm (Node Package Manager) trên máy tính của bạn. Bạn có thể tải Node.js và npm từ trang web chính thức của Node.js.
Sau khi cài đặt Node.js và npm, bạn cần mở Terminal (hoặc Command Prompt trên Windows) và điều hướng đến thư mục chứa mã nguồn của dự án.
Khi bạn đã ở trong thư mục chứa mã nguồn, bạn cần chạy lệnh sau để cài đặt các gói phụ thuộc của dự án:
Sau khi tất cả các gói phụ thuộc đã được cài đặt, bạn có thể khởi động dự án bằng cách chạy lệnh sau:
Dự án của bạn sẽ được khởi động và bạn có thể truy cập nó từ trình duyệt của mình tại địa chỉ http://localhost:3000 (hoặc cổng khác nếu bạn đã thay đổi cổng mặc định trong mã nguồn).
Lưu ý: Các bước trên giả định rằng mã nguồn của bạn đã được cấu hình đúng và không có lỗi. Nếu bạn gặp lỗi trong quá trình cài đặt hoặc khởi động dự án, bạn cần kiểm tra mã nguồn và đảm bảo rằng tất cả các gói phụ thuộc cần thiết đã được khai báo đúng trong file package.json.