Dự án "Shopping Karo" được xây dựng sử dụng một số công nghệ và chức năng chính sau:
Công nghệ:
React.js: Là thư viện JavaScript để xây dựng giao diện người dùng, dự án sử dụng React cho cả client-side.
React Router: Được sử dụng để xử lý định tuyến trong ứng dụng SPA (Single Page Application), cho phép người dùng điều hướng giữa các trang mà không cần tải lại trang web.
Context API: Sử dụng để quản lý trạng thái toàn cục của ứng dụng, giúp truyền dữ liệu qua lại giữa các component mà không cần thông qua props.
useReducer và useState: Các Hook của React được sử dụng để quản lý trạng thái trong các component.
CSS: Để tạo kiểu cho giao diện người dùng.
Chức năng:
Hiển thị sản phẩm: Có các trang như Home, About, Cart, Products, và ProductDetails để hiển thị thông tin sản phẩm và các thông tin khác của cửa hàng.
Quản lý giỏ hàng: Sử dụng CartContext để quản lý các sản phẩm trong giỏ hàng.
Lọc và sắp xếp sản phẩm: FilterContext cung cấp chức năng lọc sản phẩm theo danh mục, giá cả và sắp xếp sản phẩm.
Quản lý sản phẩm: ProductContext quản lý trạng thái của sản phẩm, bao gồm việc lấy danh sách sản phẩm và thông tin chi tiết của một sản phẩm cụ thể.
Reducer: Sử dụng các reducer như CartReducer, FilterReducer, và ProductReducer để xử lý các hành động liên quan đến giỏ hàng, bộ lọc sản phẩm và sản phẩm.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Đảm bảo bạn đã cài đặt Node.js và npm. Bạn có thể kiểm tra bằng cách chạy node -v và npm -v trong terminal để xem phiên bản.
Di chuyển đến thư mục dự án bằng lệnh cd:
cd path/to/shopping_karo
npm install
npm start
Lệnh này sẽ khởi động dự án ở chế độ phát triển. Mở http://localhost:3000 để xem nó trong trình duyệt của bạn. Trang sẽ tự động tải lại nếu bạn thực hiện thay đổi mã nguồn.