/react-food-ordering

A food ordering application built with react.js.

Primary LanguageJavaScriptMIT LicenseMIT

Contributors MIT License Author LinkedIn


Food icons created by Freepik - Flaticon

React Food Ordering

A food ordering application built with react.js.
View Demo · Report Bug · Request Feature

Table of Contents

About

React Food Ordering 展示 React.js 中除了 useState, useEffect, useRef 以外的進階概念，例如:

  1. useReducer 使用時機
    • 當 useState 多到很難管理
    • 當一個狀態有太多種行動類型 (action type)
    • 當狀態之間有一定的關聯性
  2. useContext 使用時機
    • 當 state lifting 變得不方便
    • 當傳遞 props 需要經過多個 components
  3. React.forwardRef 使用時機
    • 當你想將在 custom component 上使用 useRef
  4. useCallback, useMemo 使用時機
    • 當你想讓 function 或 data 只因特定的依賴改變而刷新 (或是不被輕易刷新)
    • 當你只用 React.memo 無法處理刷新問題
  5. Custom Hooks 使用時機
    • 當某些 state 的處理過於複雜又需要大量重複使用
    • 例如 form validations, http requests
    • Maybe you don't need to reinvent the wheel [useHttp] [react-hook-form]

Built With

  • HTML5, CSS3, Javascript ES6
  • React.js
  • Styled Components

[DEMO] : https://windsuzu.github.io/react-food-ordering

Examples

🥪 useReducer

  1. Define defaultState
  2. Define reducer (control center that tweaks states by actions)
  3. Instantiate useReducer
  4. Dispatch actions

🪜 useContext

🪱 React.forwardRef

🪝 Custom Hooks

🕸️ useHttp

✍️ useInput

Preview

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Reach out to the maintainer at one of the following places:

Acknowledgements