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

/**

  • Header
  • Logo
  • Nav Items
  • Body
  • Search
  • RestaurantContainer
  • RestaurantCard
  • Footer
  • Copyright
  • Links
  • Addredd
  • 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 function)

  • useState() SuperPowerful react variable in the state
  • useEffect()

whenever a state variable updates react will re-render the component

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

IMMER

Immer(German for: always) is a tiny package that allows you to work with immutable state in a more convenient way.

Redux Toolkit

The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated" "I have to add a lot of packages to get Redux to do anything useful" "Redux requires too much boilerplate code"

RTK Query

RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

RTK Query is an optional addon included in the Redux Toolkit package, and its functionality is built on top of the other APIs in Redux Toolkit.