-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnote0.txt
116 lines (80 loc) · 3.14 KB
/
note0.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
- json viewer
- conflict driven data
- change ui according location
-> index as a key is an anti-pattern
** >> Never ever keep hard corded data/images in your component folder
>> make separate folder named like utils/common
>> like log urls + other images's links
- 2 types of export
-> export default component
<- import Component from "path";
-> export const component = " ";
<- import { component } from "path"
- Not write code more than 100-120 lines in a single file
<- code should be readable and remember code should not be messy
- monolith v/s microservice architecture
-> Shimmmer ui
-> corsproxy.io
-> useRouterError
<<<<------------------------------------------------------------------------------------->>>>>
-> Class based Component
-> Lifecycle of class based component
-> react lifecycle method diagrams
-> render phase ( mounting) (updating) ( unmouting )
- constructor
- render
-> commit phase ( componentDidMount ) ( componentDidUpdate) ( componentWillUnmount)
- react updates the DOM
- componentDidMount
-> What is AJAX.
-> Single Responsibility Principle
-> How to bundle whole React Project
-> Bundle separate Component
-Chunking
-Code Spliting
-Dynamic Bundling
-lazzy loading
-on demand loading
-> Lazy loading
-> Lazy And Suspense - fallback
-> material.ui
-> Chakra.ui
-> ant design
-> shardcdn
--> createContext - Episode 11.
-- Do your own.
Q) What is prop drilling ?
Q) What is lifting the state up ?
Q) What are Context Provider and Context Consumer
--> Higher Order Components...
--> zustan - State Management Library
<<<<------------------------------------------------------------------------------------->>>>>
------------------------------------------> Redux <--------------------------------------------
-- offers easy debugging
1) react-Redux
2) redux-toolkit
- vanila redux -> is too complex
-> add to cart button clicked
-> dispathes an action which call reducer function which is update the slice of the store
-> we'll {Header'll} use *selector* to read the data from the slice and that selection will modified the
component at cart section -> this phenomena is known as subscribing to the store
-> Cart component subscribing to the store via selector
-> Provider from react-redux
-> configure from react-toolkit
older version of redux -> vanila redux
-> it is immutable
But new version -> redux tool kit
-> it is mutale, here we can change the data of the state
-> here reduc use immer library for mutation
Immer simplifies handling immutable data structures
Immer can be used in any context in which immutable data structures need to be used
-------------
- installation
- build our store
- connect our store to our app
- slice ( cartSlice)
- dispathe ( action )
- Selector
-------------
<<<<------------------------------------------------------------------------------------->>>>>
<<<<------------------------------------------------------------------------------------->>>>>