https://github.com/ndrean/superm-v3
Online shop project from React tutorial / JJ with React Router & Mobx. Lazy imports & save to localStorage
https://github.com/ndrean/superm-v3
mobx-react react react-router
Last synced: about 1 month ago
JSON representation
Online shop project from React tutorial / JJ with React Router & Mobx. Lazy imports & save to localStorage
- Host: GitHub
- URL: https://github.com/ndrean/superm-v3
- Owner: ndrean
- Created: 2021-01-07T12:54:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T21:14:26.000Z (about 5 years ago)
- Last Synced: 2025-02-06T06:46:06.403Z (over 1 year ago)
- Topics: mobx-react, react, react-router
- Language: JavaScript
- Homepage:
- Size: 523 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Final project React tuto with Mobx/React Router
Refactored with [Mobx](https://mobx.js.org/README.html) and [React.lazy loading](https://fr.reactjs.org/docs/code-splitting.html)
> Note: biggest difficulty with Mobx is it's doc...
## Docker
Instead of running directly from host:
- ["yarn start"] for dev mode,
- or ["yarn build", "http-server ./build"] to run production mode served with `http-server`,
you can build containers served by Nginx to reuse on Mac or Linux (images have been tagged):
- run the **build** version (rename "docker-compose.build -> docker-compose") Create builder container with Node and `yarn build` the static files, then run Nginx container to serve the copied static files
- run **dev** (current "docker-compose" runs dev mode). Docker-compose creates 2 containers on a network, one with Node/yarn serving, and one with Nginx reverse proxying, with mount binding the source code for live code changes with CTRL R
## React Router
ok
## Mobx
> Linting: -> Imperatively use `configure` to debug
Few rules
- if event `onClick`, use `action(()=> handleClick)`
- proxy `observer`: not 100% clear, when accessing `store.attribute` and `store.getter`, not `store.action()`...
- `runInAction` vs/within `useEffect` to update ...
## Saving to localStorage
On app start, the **App** component reads `store.getCartFromLS()`
The cart is saved to localStorage within a `useEffect` with `runInAction` from the **Product** component:
```js
React.useEffect(() => {
runInAction(() => store.cartToLS());
}, [store, store.cart]);
```
## TODO
- what is "reportwebvitals"?
- V4: test saving with Docker / **Redis** via **Sinatra** backend
## Lazy loading
done