• Api will not work in some cases due to CORS policy : No 'Access-Control-Allow-Origin'. if you want to run this app on your local machine you have to allow CORS policy
• install this chrome extension on your local machine to open the app : https://chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

Parcel

• Dev Build
• Local Server
• HMR -> Hot Module Replacement
• File Watching Algorithm -> written in C++
• Cache - Faster Build
• Image Optimization
• 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

Code-related content

// for displaying anything onto the browser we use ReactDOM

// React.createElement() -> React Element -> JS object -> when we render this element onto DOM this becomes HTML element // const heading = React.createElement( // "h1", // { id: "heading-1" }, // "Namaste React 🚀" // );

// JSX -> is NOT HTML in JS -> it is HTML like syntax const jsxHeading =

Namaste React 🚀

// JSX -> babel in parcel transpile it into React.createElement() -> React Element -> JS object -> when we render this element onto DOM this becomes HTML element

// React component // class based component - OLD // functional component - NEW

// ? what is a React functional component? // just a normal JavaScript function which returns some normal piece of JSX // ! name it with a CAPITAL letter, otherwise it will give error

// below is example // const TitleComponent = () => { // return

Namaste React 💻🚀

// } // const ParaComponent = () => { // return

Hello I'm Bharat Dhiman
MERN stack developer

// }

// ! can inject any JavaScript code in JSX using {javascript code} // const data = 10000; // const HeadingComponent = () => { // return

// // //

Namaste React using Functional Component

//

// }

• config driven UI -> UI changes based on data coming to api

website basic structure (food ordering website)

• ! Header

•  * Logo
  

•  * Nav Items
  

• ! Body

•  * Search bar
  

•  * Restaurant container
  

•  * Restaurant card
  

•      * Image
  

•      * Name
  

•      * Star rating
  

•      * Cuisine
  

•      * Delivery time
  

• ! Footer

•  * Copyright
  

•  * Links
  

•  * Address
  

•  * Contact
  

Two types of export/import

• default export/import

export default Component; import Component from "path";

• Names export/import

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

React Hooks

(Normal JS utility function)

• useState() - to generate superpowerfull State variable in react
• useEffect() -

2 types of routing in web apps

• server side routing -> it refreshes the whole page to navigate to different section of a website
• client side routing -> component getting interchange, whole page does not get refreshed

Redux Toolkit

• Install @reduxjs/toolkit and react-redux
• Build our store
• Connect our store to out app
• Slice (Cartslice)
• Dispatch Action
• Selector

Types of testing (Developer)

• Unit Testing
• Integration Testing
• End to End Testing => e2e testing