/learn-reactjs-base

Primary LanguageJavaScript

ReactJS Project

Folder structure

src
|__ components (shared components between features)
|  |__ Loading
|     |__ index.jsx
|     |__ styles.scss
|
|__ features
|  |__ Todo
|     |__ components (components of feature Todo)
|     |__ pages (pages of feature Todo)
|     |__ index.jsx (entry point of feature Todo)
|
|__ App.js

FiltersViewer

const filters = {
  isPromotion: true,
  salePrice_lte: 100,
  salePrice_gte: 100,
}

FILTER_LIST

  • id: number
  • getLabel: (filters) => string
  • isActive: (filters) => true/false
  • isVisible: (filters) => true/false
  • isRemovable: boolean
  • onRemove: func
  • onToggle: func
DetailPage handleSubmit
|__ AddToCartForm (form management)
|  |__ QuantityField

/products/:productId --> ProductDescription /products/:productId/additional --> ProductAdditional /products/:productId/reviews --> ProductReviews

DetailPage Click Chon Mua Open Mini Cart Go to Cart Page

Cart

  • showMiniCart: true / false
  • cartItems -> item (product, quantity)

State tính toán phụ thuộc vào state có sẵn

  • cartItemsCount
  • cartTotal --> createSelector()