-Dev Build -Local Server -HMR Hot Module Replacement -File Watching Algorithm- written in c++ -catching -Faster Builds -Image Optimization -Minification -Bundling -Compressing file -Consistent Hashing -Code Splitting -Differential Bundling - support older browsers -Diagnostic -Error Handling -Https -Tree Shaking - remove unused code -Different dev and prod bundles
- Header -Logo -Nav Items
- Body -Search -RestaurantContainer -RestaurantCard -Img -Name of Res, Star Rating, Cuisine,delivery time etc
- Footer
- Copyright
- Links
- Address
- Contact
- Named
export const Component;
import {Component} from "path"
- Default export/import
export default Component;
import component from "path"
Normal JS utility function -useState()- Superpowerful state variables in react -useEffect()
-Parent Constructor -Parent Render
-First Constructor
-First Render
-Second constructor
-Second Render
-third constructor
-third Render
<DOM UPDATED - IN SINGLE BATCH
-First ComponentDidMount
-Second ComponentDidMount
-Third ComponentDidMount
-Parent ComponentDidMount
-constructor (dummy) -Render (dummy) componentDidMount <this.setState> -> State variable is updated
-render(API data)
-<html (new API data loaded)>
-ComponentDidUpdate
-Chunking -Code splitting / Data fetching -Dynamic Bundling -Lazy Loading -On demand loading -dynamic import
- Install @reduxjs/toolkit and react-redux
- Build our store
- Connect our store to our app
- Slice (cartSlice
- Dispatch (action)
- Selector
- Unit testing
- Integration testing
- End to end testing - e2e testing
- Install react testing libraray
- Installed jest
- Installed babel dependencies
- Configure babel
- Configure Parcel Config file to disable default babel transpilation
- Jest configuration
- Install jsdom library
- Install @babel/preset-react - to make JSX work in test cases
- Include @babel/preset-react inside my babel config
- Install @testing-library/jest-dom