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

Food

/**

• Header
  • Logo
  • Nav Items
• Body
  • Search
  • RestaurantContainer
  • RestaurantCard
  • Img
  • Name of Res, Star Rating, cuisine, delivery time
• Footer
  • Copyright
  • Links
  • Address
  • Contact */

• Two types of Export/Import

  • Default Export/Import
  • Named 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() - Super powerful 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 (developer)

• 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
  • if parcel using babel behind the scene then why we configure babel.config.js file again -> read this: parcel.org>languages>JavaScript>Babel, Usage with other tools
• Configure Parcel Config file to disable default babel transpilation
• Jest configuration - 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