/* My Food App structure will look like this,

        1) Header
            - Logo
            - Nav Items(right side)
            - Cart
            
        2) Body
            - Search bar
            - Restaurants List
                - Restaurant card
                    - Image
                    - Name
                    - Rating

        3) Footer
            - Links
            - Copyrights

*/

Redux ToolKit

• Install @reduxjs/toolkit and react-redux
• Build our store
  • in seperate file
  • import this store or bridge that to the app to the core (ie, App.js) using Provider provided by react-redux.
• Connect our store to app
• Slice (cartSlice)
  • addItem is the action (dispatch action)
  • function next to that is the reducer function()
• dispatch (action)
• Selector

Namaste React 🚀

Parcel

• Dev Build
• Local Server
• HMR = Hot Module Replacement
• File Watching Algorithm - written in C++
• Caching - Faster Builds
• Image Optimization
• Minification
• Bundling
• Compress
• Consistent Hashing
• Code Splitting
• Differential Bundling - support older browsers
• Diagnostic
• Error Handling
• HTTPs
• Tree Shaking - remove unused code
• Different dev and prod bundles

Namaste Food

/**

• Header
• • Logo
• • Nav Items
• Body
• • Search
• • RestaurantContainer
• • RestaurantCard

•  - Img
  

•  - Name of Res, Star Rating, cuisine, delery tie
  

• Footer
• • Copyright
• • Links
• • Address
• • Contact */

Two types of Export/Import

• Default Export/Import

export default Component; import Component from "path";

• Named Export/Import

export const Component; import {Component} from "path";

React Hooks

(Normal JS utility functions)

• useState() - Superpowerful State Variables in react
• useEffect()

2 types Routing in web apps

• Client Side Routing
• Server Side Routing

Redux Toolkit

• Install @reduxjs/toolkit and react-redux
• Build our store
• Connect our store to our app
• Slice (cartSlice)
• dispatch(action)
• Selector

Types of testing (devloper)

• Unit Testing
• Integration Testing
• End to End Testing - e2e testing

Setting up Testing in our app

• Install React Testing Library
• Installed jest
• Installed Babel dependencies
• Configure Babel
• Configure Parcel Config file to disable default babel transpilation
• Jest - npx jest --init
• Install jsdom library
• Install @babel/preset-react - to make JSX work in test cases
• Include @babel/preset-react inside my babel config
• npm i -D @testing-library/jest-dom