React Restaurant

Live Demo https://react-restaurant-1s5u.onrender.com

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

Namaste Food

Header

• Logo
• Nav Items

Body

• Search
• RestaurantContainer
• RestaurantCard
• • Img
• • Name of Res, Star Rating, cuisine, delery tie

Footer

• Copyright
• Links
• Address
• 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 functions)

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

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

Types of testing (developer)

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

setting up Testing in our App

• Install Reast Tesxting Library
• Installed jest
• Installed Babel dependencies
• Configure Babel
• Config parcel config file to disable default babel tranpilation
• Jest - npx jest --init
• Install jsdom library

Terminal Commandes

npm install
npm install @reduxjs/toolkit  
npm i react-redux
npm start

npx update-browserslist-db@latest
npm install --save-dev @testing-library/react
npm install --save-dev babel-jest @babel/core @babel/preset-env


npm i -D @testing-library/react
npm i -D jest
npm run test
npx jest --init

npm install --save-dev jest-environment-jsdom