Namaste-React

Parcel

• Dev Build
• Local Server
• HMR = Hot Module Replacement
• File Watching Algorithm - written in C++
• Caching - Faster Builds
• Image optimization
• Minification
• Bundling
• Compressing
• Consistent Hashing
• Code spliting
• Differencial Bundling
• Diagnostic
• Error Handling
• HTTPS hosting in development
• Tree Shaking - remove unused code
• Different dev and prod bundles

Types of Export/Import

• default:

  • export default Component;
  • import Component from "path";

• named:

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

React Hooks

(Normal JS utility functions)

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

Whenever a state variable is changes React re-render the component

2 types of routing in web apps

1. Client side routing: page does not reload
2. Server side routing: page reload

• Chunking
• code spliting
• dynamic bundling
• lazy loading
• dynamic import
• all above are different names for the same things

Higher Order Components:

Higher order component is a function which takes a component as input and return enhanced version of the component.

const HigherOrderComponent = (Component) => {
  return (props) => {
    return (
      <div>
        <label>propmoted</label>
        <Component {...props} />
      </div>
    );
  };
};

Redux Toolkit

• Install @reduxjs/toolkit and react-redux
• Build our store
• Connect our app to our app
• Create a slice (cart slice)
• Dispatch(action)
• Read data using 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
• Install jest
• Install Babel dependency (required when using jest with Babel. We are using Babel as dependency of Parcel)
• Configure Babel
• Configure Parcel Config file to disable default Babel transpilation
• Jest configuration Command: npx jest --init
• Install jsdom library
• npm run test
• Install @babel/preset-react - to make JSX work in test cases
• Include @babel/preset-react inside my babel configuration
• Install @testing-library/jest-dom npm i -D @testing-library/jest-dom