Namaste React 🚀

Parcel

• Dev Build
• Local Server
• HMR - Hot Module Replacement
• File Watching Algorithim - Written In C++
• Caching - Faster Builds
• Image Optimization
• Minification
• Bundling
• Compressing
• Consistent Hashing
• Code Splitting
• Differential Bundling - To Support Older Browsers
• Diagnostics
• Error Handling
• HTTPs
• Tree Shaking - Remove Unused Code
• Different Dev and Production Bundles

React Hooks

(Normal JS utility functions)

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

Types of Routing in Web Apps

• Client Side Routing
• Server Side Routing

Optimizations

• Single Responsibility Principle - SRP
• Chunking / Bundling / Code Splitting / Dynamic Bundling / On Demand Loading / Lazy Loading

Redux Toolkit

• npm install @reduxjs/toolkit
• npm install react-redux
• Build our Store
• Connect our Store to the app
• Slice ( cartSlice )
• Dispatch ( action )
• Selector

Types of Testing ( Developer )

• Unit Testing - Developer test the component in Isolation - Single Component
• Integration Testing - Multiple Components
• End to End Testing ( e2e Testing ) - Test all the flows

Setting Up testing in our app

• Install React Testing Library
• Install Jest
• Install Babel Dependencies
• Configure Babel
• Configure Parcel config file to disable default Babel Transpilation
• Jest Configuration - npx jest --init
• Install JsDom Library - npm install --save-dev jest-environment-jsdom
• Install npm i -D @babel/preset-react - Enabling JSX
• Include @babel/preset-react inside my Babel configuration
• Install npm i -D @testing-library/jest-dom
• import "@testing-library/jest-dom";

Namaste Youtube

• Debouncing

Debouncing with 200ms

• If difference between 2 key strokes < 200ms - DECLINE API CALL

Cache

• Time Complexity to search in Array - O( n )
• Time Complexity to search in Array - O( 1 )