Namaste React

Parcel

• Dev Build

• Local Server

• HMR = Hot Module Replacement

• File wacthing Algorithm - written in C++

• Caching - Faster Builds

• Image Optimization

• Minification

• Bundling

• Compress

• Consitent Hashing

• Code Splitting

• Differential Bundling - support older browsers

• Diagnostics

• Error Handling

• HTTPs

• Tree Shaking = Remover unused code

• Different dev and production Bundles

• link - https://parceljs.org/

Namaste Food

**

• Header
• • Logo
• • Nav-items
• Body
• • Search
• • Res-Conatiner

•  - Res-Card
  

•      - Img
  

•      - Name, address, rating, , cuisine, delivery time
  

• Footer
• • Copyright
• • links
• • address
• • contact *

Two types of Export?Import

• Defaukt Export/Import

export default Component; import Componenet from "path";

• Named Export/Import

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

React Hooks

(Normal JS Utility Functions)

• useState() - Super Powerful State Variables in React
• useEffect()

2 types of routing in web application

• Client side Routing
• Server side Routing

Diff. Names same meaning-1

• Chunking
• Dynamic Bundling
• Code Splitting
• lazy loading
• on demand loading
• dynamix import

Redux Toolkit

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

onClick Evevnts

onClick={handleAddItem}:

• This variation directly assigns the handleAddItem function as the event handler for the button click event. When the button is clicked, the handleAddItem function is invoked without any arguments.

onClick={handleAddItem(item)}:

• This variation immediately invokes the handleAddItem function with the item argument and assigns the return value of the function (assuming it returns a function) as the event handler for the button click event. However, this approach is incorrect because it will immediately invoke handleAddItem(item) when the component renders, rather than waiting for the button click event. This is not the desired behavior for event handling.

onClick={() => handleAddItem(item)}:

• This variation uses an arrow function as a wrapper around handleAddItem(item). When the button is clicked, the arrow function is invoked, which in turn invokes the handleAddItem function with the item argument. This approach correctly delays the invocation of handleAddItem(item) until the button is clicked, ensuring that the handleAddItem function is executed with the correct argument.

Types of Testing

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