React Food Ordering

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

Table of Contents

• About
• Examples
  • 🥪 useReducer
  • 🪜 useContext
  • 🪱 React.forwardRef
  • 🪝 Custom Hooks
    • 🕸️ useHttp
    • ✍️ useInput
• Preview
• License
• Contact
• Acknowledgements

---

About

React Food Ordering 展示 React.js 中除了 useState, useEffect, useRef 以外的進階概念，例如: useReducer 使用時機 當 useState 多到很難管理 當一個狀態有太多種行動類型 (action type) 當狀態之間有一定的關聯性 useContext 使用時機 當 state lifting 變得不方便 當傳遞 props 需要經過多個 components React.forwardRef 使用時機 當你想將在 custom component 上使用 useRef useCallback, useMemo 使用時機 當你想讓 function 或 data 只因特定的依賴改變而刷新 (或是不被輕易刷新) 當你只用 React.memo 無法處理刷新問題 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

• Define Context blueprint (states and methods interface)
• Define Context Provider (with state and methods instances)
• Wrap parent component with ContextProvider
• useContext in child components

🪱 React.forwardRef

• Wrap custom component with React.forwardRef
• Assign useRef to the custom component

🪝 Custom Hooks

🕸️ useHttp

• Define internal states and functions
  • We wrap functions with useCallback to make it easier to use in useEffect
• Export states and functions we want to reuse
• Import useHttp and utilize states and functions

✍️ useInput

• Design useInput
• Utilize 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:

• GitHub discussions
• The email which is located in GitHub profile

Acknowledgements

• Maximilian Schwarzmüller