Dự án này được xây dựng dựa trên công nghệ React, một thư viện JavaScript phổ biến dùng để xây dựng giao diện người dùng động và hiện đại. Dự án sử dụng React Router để quản lý việc điều hướng trong ứng dụng một trang (SPA). Ngoài ra, dự án còn sử dụng Bootstrap và React Bootstrap để tạo giao diện người dùng đẹp mắt và phản hồi nhanh chóng, cũng như SASS để quản lý các tệp CSS một cách hiệu quả hơn.
Chức năng chính của dự án có thể được hiểu qua cấu trúc thư mục và mã nguồn:
Giao diện người dùng cơ bản: Dự án bao gồm các thành phần giao diện như Header, Footer, và MainNavbar, được định nghĩa trong thư mục components. Các thành phần này tạo nên khung sườn cơ bản cho ứng dụng web.
Hiển thị sản phẩm: Thư mục containers chứa các thành phần như ShirtPage, ShirtsCategory, và ShirtsList, có thể hiểu là các trang hoặc phần tử để hiển thị thông tin sản phẩm, danh mục sản phẩm, và danh sách sản phẩm.
Điều hướng và định tuyến: Sử dụng BrowserRouter, Switch, và Route từ react-router-dom để quản lý việc điều hướng giữa các trang và thành phần khác nhau trong ứng dụng.
Tối ưu hóa hiệu suất: Dự án sử dụng reportWebVitals để theo dõi và cải thiện hiệu suất của ứng dụng web.
Styling: Sử dụng SASS (với các tệp .scss) để tạo ra các tệp CSS tối ưu và dễ quản lý, bao gồm cả việc nhập các thành phần từ Bootstrap để tùy chỉnh giao diện.
Dự án được cấu hình để chạy các lệnh như start, build, test, và eject thông qua react-scripts, cho phép phát triển, kiểm thử, xây dựng, và tùy chỉnh cấu hình một cách linh hoạt.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Để cài đặt dự án này, bạn cần thực hiện các bước sau:
Mở Terminal hoặc Command Prompt.
Di chuyển đến thư mục chứa dự án của bạn. Ví dụ: nếu dự án của bạn nằm trong thư mục c:/Users/PC/maz-e-commerce, bạn sẽ sử dụng lệnh:
Chạy lệnh sau để cài đặt các phụ thuộc cần thiết cho dự án thông qua yarn:
Nếu bạn không có yarn được cài đặt, bạn có thể sử dụng npm bằng cách chạy:
Sau khi hoàn tất quá trình cài đặt, bạn có thể khởi động dự án bằng cách sử dụng lệnh:
Hoặc nếu bạn đang sử dụng npm:
Lệnh này sẽ khởi động máy chủ phát triển và mở dự án trong trình duyệt tại địa chỉ http://localhost:3000.
cd c:/Users/PC/maz-e-commerce
yarn install
npm install
yarn start
npm start