iNotebook_ Fetching Notes from Context _ Complete React Course in Hindi #60
16 views
Feb 11, 2024
In the 60th episode of the "Complete React Course in Hindi," the tutorial delves into the iNotebook project, specifically focusing on fetching notes from the React Context. This video provides a practical guide on retrieving and displaying notes stored in the Context API, showcasing how to seamlessly integrate this data into the iNotebook frontend. The instructor walks viewers through the process of accessing context values and dynamically rendering notes on the user interface. Whether you're a React developer looking to enhance your skills in data retrieval or a learner interested in practical implementations of React Context, this tutorial offers valuable insights into fetching and displaying notes in the iNotebook project.
View Video Transcript
0:00
So, рдкрд┐рдЫрд▓реЗ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рд╣рдо рд▓реЛрдЧреЛрдВ рдиреЗ рджреЗрдЦрд╛ рдХрд┐ рдХрд┐рд╕ рддрд░рд╣ рд╕я┐╜я┐╜
0:02
Use Location Hook рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдЕрдкрдиреА iNotebook рдЖрдкрдХреЛ рдХреБрдЫ рдРрд╕рд╛ рдмрдирд╛рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣я┐╜я┐╜
0:07
рдХрд┐ рдЬрдм рд╣рдо Out рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ, About рдЪрдордХреЗ, Home рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ рддреЛ Home рдЪрдордХреЗ, рдЕрдм рд╣рдо рд▓реЛрдЧ рдХреНрдпрд╛ рдХрд░реЗрдВрдЧя┐╜я┐╜
0:11
рдпрд╣рд╛рдБ рдкрд░ рд╕рд╛рд░реЗ рдХреЗ рд╕рд╛рд░реЗ notes рдХреЛ рд▓реЗрдХрд░ рдЖрдПрдВрдЧреЗ, рдФрд░ рдпрд╣ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдо рд▓реЛрдЧ рдХреНрдпрд╛ рдХрд░реЗрдВрдЧреЗ
0:15
рдпрд╣ рд╕рд╛рд░реЗ рдХреЗ рд╕рд╛рд░реЗ notes рдЕрдкрдиреЗ context рдХреЗ рдЕрдВрджрд░ рд▓реЗрдХрд░ рдЬрд╛рдПрдВрдЧреЗ, рдЕрдм рдЕрдЧрд░ рдЖрдк рд▓реЛрдЧ рдХреЛ рдпрд╛рдж рд╣реЛ
0:20
рдХрд┐ рдореИрдВрдиреЗ, рдпрд╣рд╛рдБ рдкрд░ рдпрд╣ рдХрд╣рд╛, used, it is defined, but never used
0:25
рдЪрд▓реЛ рдпреЗ рд╕рдм рдЪреАрдЬрд╝реЗ рд╣рдо рдареАрдХ рдХрд░ рд▓реЗрдВрдЧреЗ рдкрд░ рдЕрдЧрд░ рдЖрдк рд▓реЛрдЧреЛрдВ рдХреЛ рдпрд╛рдж рд╣реЛ рддреЛ рдореИрдВрдиреЗ рдпрд╣рд╛рдБ рдкрд░ рджреЛрдиреЛрдВ рдЪреАрдЬрд╝реЗ рдПрдХ рд╕рд╛рде рдЪрд▓рд╛рдИ рдея┐╜я┐╜
0:31
рдПрдХ рддреЛ рдореИрдВрдиреЗ рдЕрдкрдирд╛ рдпреЗ рд╕рд░реНрд╡рд░ рдЪрд▓рд╛рдпрд╛ рдерд╛ рдЬреЛ рдХрд┐ рдореЗрд░реЗ back-end folder рдХреЗ рдЕрдВрджрд░ рд╣реИ рдЙрд╕реА рдХреЗ рд╕рд╛рде рд╕рд╛рде рдореИрдВрдиреЗ рдЕрдкрдиреА рдпреЗ рдЪя┐╜я┐╜
0:36
рд░рд┐рдпрд╛рдЯ рдЕрдкреНрд▓реАрдХреЗрд╢рди рдЗрд╕рдХреЛ рднреА рдЪрд▓рд╛рдпрд╛ рдерд╛ рдПрдХ рдПрдХ рдЫреЛрдЯрд╛ рд╕рд╛ рдЪреЗрдВрдЬ рдХрд░рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рдЕрдкрдиреЗ рдмреИрдХ рдПрдВрдб рдореЗрдВ рдФрд░ рд╡реЛ рдпрд╣ рд╣реИ рдХрд┐ рдпрд╛рд░ рдЗрд╕ рдПрдХреНрд╕рд╛рдВрдкрд▓ рдЖрдк рдирд╣реАрдВ рд▓рд┐рдЦреВрдВрдЧрд╛ рдореИрдВ рдореИрдВ рд▓рд┐рдЦреВрдВрдЧрд╛ i notebook back-end
0:45
iNotebook backend listening at local host port рдареАрдХ рд╣реИ save рдХрд░реВрдБрдЧрд╛ рдФрд░ рдпрд╣ рд▓реА рд╕реНрдЯрд╛рд░реНрдЯ рд╣реЛ рдЬрд╛рдПрдЧрд╛ рдареАрдХ рд╣я┐╜я┐╜
0:54
рдЕрдкрдиреА thunderline collection рдХреЛ рдЦреЛрд▓реВрдБрдЧрд╛ iNotebook рд╡рд╛рд▓реА collection рдХреЛ рдФрд░ рдЗрд╕рдореЗрдВ fetch all notes рдХрд░рдХя┐╜я┐╜
1:00
рдореИрдВрдиреЗ рдПрдХ endpoint рдордирд╛рдпрд╛ рдерд╛ рдЬрд┐рд╕рдХреЗ рдЕрдВрджрд░ рдореИрдВрдиреЗ рдПрдХ рдФрд░ token рдбрд╛рд▓рд╛ рдея┐╜я┐╜
1:04
рдФрд░ рдпрд╣ рдФрд░ token рдЬрд┐рд╕ рднреА user рдХрд╛ рд╣реЛрдЧрд╛ рдореБрдЭреЗ рдЙрд╕рдХреЗ рд╕рд╛рд░реЗ notes рджреЗрдЦрдиреЗ рдХреЛ рдорд┐рд▓реЗрдВрдЧя┐╜я┐╜
1:09
рддреЛ рдореИрдВрдиреЗ send рдХрд┐рдпрд╛ рдФрд░ рдпреЗ рд╕рд╛рд░реЗ notes рдореБрдЭреЗ рджреЗрдЦрдиреЗ рдХреЛ рдорд┐рд▓реЗ рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛ рдЗрд╕рдХреЛ copy рдХрд░реВрдБрдЧя┐╜я┐╜
1:13
рдФрд░ рдореИрдВ рдХрд░реВрдБрдЧрд╛ рдХреНрдпрд╛ рдХрд┐ рдЗрд╕рдХреЛ рдмрдВрдж рдХрд░ рджреВрдБрдЧрд╛ рдФрд░ рдЕрдкрдиреЗ рдЗрд╕ notes state рдореЗрдВ рдЖрдЙрдБрдЧя┐╜я┐╜
1:19
рдЬреЛ рдХрд┐ рдореЗрд░рд╛ context рд╣реИ рд╣реИ рдФрд░ рдореИрдВ рдпрд╣рд╛рдВ рдкрд░ рд▓рд┐рдЦреВрдВрдЧрд╛ рдХреМрди рд╕реНрдиреЛрдЯреНрд╕ рдЗрдЬ рдПрдХреНрд╡рд▓ рдЯреВ рдФрд░ рдЗрд╕рдХреЛ рдкреЗрд╕реНрдЯ рдХрд░ рджреВрдВрдЧрд╛ рдЖрдк рдпрд╣ рдХреНрдпрд╛ рдХрд░ рджрд┐рдпрд╛ рддреЛ рдпрд╣ рджреЗрдЦя┐╜я┐╜
1:27
but for now time hard code notes hard code API request
1:40
рдФрд░ рдЕрдкрдиреЗ notes рдХреЛ рд▓реЗрдХрд░ рдЖ рд╕рдХрддреЗ рд╣реИрдВ, рдареАрдХ рд╣реИ, рддреЛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛ value is equal to рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╕реЗ рд▓рд┐рдЦреВрдБрдЧрд╛ рдФрд░ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦреВрдБрдЧрд╛ notes рдареАрдХ рд╣я┐╜я┐╜
1:47
рд╕реЗрд╡ рдХрд░ рджрд┐рдпрд╛ рдореИрдВрдиреЗ notes рд▓рд┐рдЦрдХрд░ рдЕрдм рдореИрдВ рдЬрд╣рд╛рдБ рднреА use context hook рдХреЛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реВрдБрдЧрд╛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рдЗрд╕рдХреЛ use рдХрд░ рд╕рдХрддрд╛ рд╣реВя┐╜я┐╜
1:54
рдЕрдЪреНрдЫрд╛ рдПрдХ рдЪреАрдЬ рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рдХрд░рдирд╛ рдЪрд╛рд╣реВрдБрдЧрд╛, рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рдХрд░реВрдБрдЧрд╛ рдХреНрдпрд╛ рдХреА рдпреВрдЬ рд╕реНрдЯреЗрдЯ рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реВрдБрдЧрд╛
2:00
рдФрд░ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦреВрдБрдЧрд╛ рдХреА рдЬреЛ рдореЗрд░рд╛ notes рд╣реИ, рдореЗрд░реЗ notes рдФрд░ set notes is equal to
2:07
рдФрд░ рдЗрд╕рдХреЛ рдореИрдВ рдХрд░ рджреВрдБрдЧрд╛ notes initial рдареАрдХ рд╣реИ, рдФрд░ рдЗрд╕ variable рдХрд╛ рдирд╛рдо рднреА notes initial рдХрд░ рджреЗрдВрдЧреЗ
2:16
рддреЛ рдореИрдВ рдПрдХ рддреЛ notes рдХреЛ export рдХрд░реВрдБрдЧрд╛ рдФрд░ рдПрдХ set notes рдХреЛ рдХрд░реВрдБрдЧрд╛ рдареАрдХ рд╣реИ рддрд╛рдХрд┐ рдореИрдВ notes рдХреЛ рддреЛ access рдХрд░ рдирд╣реАрдВ рдкрд╛рдКрдВ рд╕рд╛рде рд╕рд╛рде set notes рдХреЛ рднреА use рдХрд░ рдкрд╛рдКрдВ рдЬрдм рдЬрдм рдореБрдЭреЗ notes рдХреЛ update рдХрд░рдирд╛ рд╣реЛ рддреЛ рдареАрдХ рд╣реИ рдФрд░ рдпреЗ рдореИрдВ рдХрд╣рд╛рдВ рд▓реЗрдХрд░ рдЖрдБрдЧрд╛ рдпреЗ рдореИрдВ рд▓реЗрдХрд░ рдЖрдБрдЧрд╛ рдЕрдкрдиреЗ home.js рдХреЗ рдЕрдВрджрд░ рддреЛ home.js рдХреЗ рдЕрдВрджрд░ рдореБрдЭреЗ use context рдХреЛ рдЗрд╕реНя┐╜я┐╜
2:46
рд▓реЗрдХрд░ рдЖрдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рдЕрдкрдиреЗ notes рдХреЛ рдареАрдХ рд╣реИ рдФрд░ рдореИрдВ рдпрд╣рд╛рдВ рдкрд░ рд▓рд┐рдЦ рджреВрдВрдЧя┐╜я┐╜
2:50
const notes is equal to рдпрд╣рд╛рдВ рдкрд░ рдПрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реВрдБ рдпрд╣рд╛рдВ рдкрд░ рдореИя┐╜я┐╜
2:56
рдЗрд╕реА рддрд░рд╣ рд╕реЗ рд░рд╣рди рджреЗрддрд╛ рд╣реВрдБ рдпрд╣рд╛рдВ destructure рднреА рдХрд░ рд╕рдХрддрд╛ рд╣реВрдБ рдареАрдХ рд╣реИ const notes set notes is equal to context destructuring notes set notes variable context notes set notes
3:16
рдпрд╣ рдХрд╛рдо рдХрд░ рджрд┐рдпрд╛ рдореИрдВрдиреЗ, рдЕрдм рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛, obviously рдпрд╣ use context рдХреЛ import рдХрд░реВрдБрдЧрд╛
3:21
рдРрд╕реЗ рддреЛ рдореИрдВ use рдХрд░ рдирд╣реАрдВ рд╕рдХрддрд╛, рдареАрдХ рд╣реИ, рддреЛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ use context рдХреЛ рднреА use рдХрд░реВрдБрдЧрд╛, рдФрд░ рдЕрдм рдпрд╣рд╛рдБ рдкрд░ рдореИрдВ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛, рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рдпрд╣ curly bracket рд▓рдЧрд╛рдКрдБрдЧрд╛, рдФрд░ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦреВрдБрдЧрд╛ notes.map, рдареАрдХ рд╣реИ, рдФрд░ рдпрд╣рд╛рдБ рдкрд░ рдПрдХ arrow function рджреВрдБрдЧрд╛, рдареАрдХ рд╣реИ, рдФрд░ рдпрд╣рд╛рдБ рдкрд░ рдХреНрдпрд╛ рдХрд░реВрдБрдЧрд╛, return note. рдФрд░ рдпрд╣рд╛рдБ рдкрд░ title, рдареАрдХ рд╣реИ, рд╕рд┐рд░реНрдл рдЗя┐╜я┐╜
3:53
рдХреЛрдВрдЯреЗрдХреНрд╕ рд╡реИрд▓реНрдпреВ рдЗрд╕ рдЯреЛ рдбрд┐рдлрд╛рдЗрди рдУ рдХреЛрдВрдЯреЗрдХреНрд╕ рд╡реИрд▓реНрдпреВ рдЗрд╕ рдиреЛрдЯ рдбрд┐рдлрд╛рдЗрди рддреЛ рдореБрдЭреЗ рдХреНрдпрд╛ рдХрд░рдирд╛ рд╣реИ рдХрд┐ рдпрд╣ рдЬреЛ рдореЗрд░я┐╜я┐╜
3:59
рдХреЛрдВрдЯреЗрдХреНрд╕реНрдЯ рдЗрд╕рдХреЛ рд▓реЗрдХрд░ рдЖрдирд╛ рд╣реИ рддреЛ рдореИрдВ рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рддреЛ рдХреНрдпрд╛ рдХрд░реВрдВрдЧрд╛ рдХрд┐ рдпрд╣рд╛рдВ рдкрд░ рдЬрд╛рдКрдВрдЧрд╛ рдореИрдВ рдСрд▓рд░реЗрдбреА рдРрд╕рд╛ рдЕрд╕реА рдХя┐╜я┐╜
4:07
рддреЛ рд╣реБрдИ, рдирд╣реАрдВ, рдореБрдЭреЗ рдПрдХ рдХрджрдо рдЙрдкрд░ рдЬрд╛рдирд╛ рд╣реИ, рдареАрдХ рд╣реИ, рдЕрдм рдореИрдВ рдЬрд╛рдУрдВрдЧрд╛ context рдореЗрдВ, рдареАрдХ рд╣реИ
4:13
рдПрдХ рдХрджрдо рдЙрдкрд░ рдЬрд╛рдХрд░ context рдореЗрдВ рдЬрд╛рдУрдВрдЧрд╛, рдПрдХ рдХрджрдо рдЙрдкрд░ рдореИрдВ components рд╡рд╛рд▓реЗ folder рдореЗрдВ рдЖ рдЧрдпрд╛, рдареАрдХ рд╣реИ
4:17
src рд╡рд╛рд▓реЗ folder рдореЗрдВ рдЖ рдЧрдпрд╛, рдлрд┐рд░ рдореИрдВ context рдореЗрдВ рдЬрд╛рдУрдВрдЧрд╛, рдлрд┐рд░ рдореИрдВ notes рдореЗрдВ рдЬрд╛рдУрдВрдЧрд╛
4:22
рдФрд░ рдЙрд╕рдХреЗ рдмрд╛рдж рдореИрдВ note context рдореЗрдВ рдЬрд╛рдУрдВрдЧрд╛ рдареАрдХ рд╣реИ рддреЛ рдореИрдВ рдпреЗ context рдХреЛ рд╕рдмрд╕реЗ рдмрдврд╝реЗ import рдХрд░ рд▓реЗрддрд╛ рд╣реВрдБ рдареАрдХ рд╣я┐╜я┐╜
4:30
рддреЛ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рдПрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реВрдБ рдореИрдВ рдпрд╣рд╛рдБ рдкрд░ рд▓рд┐рдЦреВрдБрдЧрд╛ import
4:34
рдФрд░ рдореИрдВ рд▓рд┐рдЦреВрдБрдЧрд╛ context from рдпреЗ рдареАрдХ рд╣реИ note context note context from
4:53
рдиреЛрдЯ рдбрд┐рд╕реНрдЯреНрд░рдХреНрд╢рди рдкреНрд░реЙрдкрд░реНрдЯреА рдиреЛрдЯреНрд╕ рдСрдл рдХреЙрдВрдЯреЗрдХреНрд╕реНрдЯ рдПрд╕ рдПрдбрд┐рдЬ рдЕрдиреНрдбрд┐рдлрд╛рдЗрди рддреЛ рдпрд╣рд╛рдВ рдкрд░ рд╣рд╛рдВ рдареАрдХ рд╣реИ рддреЛ рдпрд╣рд╛рдВ рдкрд░ рдореБрдЭя┐╜я┐╜
5:00
рдХреЛрдЯреЗрдХреНрд╕ рдЙрдкреНрд╕ рдореИрдВрдиреЗ рдЖрдк рдПрдХ рдЧрд▓рддреА рдХрд▓ рджреА рдпрд╣рд╛рдВ рд▓рд┐рдЦрдирд╛ рдерд╛ рдореБрдЭреЗ рдиреЛрдЯ рдХреЙрдиреНрдЯреЗрдХреНрд╕ рдареАрдХ рд╣реИ рдФрд░ рдпрд╣рд╛рдВ рдкрд░ рджреЗрдЦреЛ рдЖрдк рд▓реЛрдЧ рдХя┐╜я┐╜
5:08
рдХреБрдЫ рднреА рд╣рдореЗрдВ рджреЗрдЦрдиреЗ рдХреЛ рдирд╣реАрдВ рдорд┐рд▓рд╛ рдпрд╛рдирд┐ рдХрд┐ рдЬреЛ рдореИрдк рдерд╛ рдореЗрд░рд╛ рдЗрд╕рдиреЗ рдХреБрдЫ рднреА рдирд╣реАрдВ рдХрд░рд╛ рдиреЛрдЯ рдЯреЙрдЯ рдЯрд╛рдЗрдЯрд▓ рд▓рд┐рдЦ рджрд┐рдпя┐╜я┐╜
5:13
note.title рд▓рд┐рдЦрдирд╛ рдерд╛ рдореБрдЭреЗ, рддреЛ рдпрд╣рд╛рдБ рдкрд░ рджреЗрдЦреЛ title, my title, рдпрд╣ рджреЛрдиреЛрдВ notes рдХреЗ title рдореБрдЭреЗ рдпрд╣рд╛рдБ рдкрд░ рджреЗрдЦрдиреЗ рдХреЛ рдорд┐рд▓ рдЧрдпрд╛ рд╣реИ, рдпрд╛рдирд┐ рдХрд┐ рдЬреЛ notes рд╣реИрдВ, рд╡реЛ рддреЛ рдореЗрд░реЗ рдпрд╣рд╛рдБ рдкрд░ рдЖ рдЧрдпреЗ, рдареАрдХ рд╣реИ, рдЕрдм рдореБрдЭреЗ рдЧрд░рдирд╛ рдХреНрдпрд╛ рд╣реИ, рдХрд┐ рдЬреЛ notes рд╣реИ рд╕рд╛рд░реЗ рдХреЗ рд╕рд╛рд░реЗ, рдЙрд╕рдХреЛ рдореБрдЭреЗ рдПрдХ particular component рдмрдирд╛рдирд╛ рдкрдбрд╝реЗрдЧрд╛ рдЙрд╕рдХрд╛, рдФрд░ рдЙя┐╜я┐╜
5:43
рджреВрд╕рд░реЗ рдХрдВрдкреЛрдиреЗрдВрдЯ рдореЗрдВ рд▓реЗрдХрд░ рдЬрд╛рдПрдВрдЧреЗ рдФрд░ рдЙрд╕рдХреЗ рдмрд╛рдж рдФрд░ рдХрд╛рдо рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдЬреЛ рд╣реИ рд╡рд╣ рдпрд╣ рд╣реИ рдХрд┐ рд╣рдореЗрдВ рд▓реЙрдЧ рдЗрди рд╕рд╛рдЗя┐╜я┐╜
5:49
рдЕрдк рдмрдирд╛рдирд╛ рд╣реИ рддреЛ рдХрд╛рдлреА рдХрд╛рдо рд░рд╣ рдЧрдпрд╛ рдЗрд╕ рдПрдкреНрд▓реАрдХреЗрд╢рди рдореЗрдВ рдЕрдЧрд░ рдЖрдк рд▓реЛрдЧреЛрдВ рдиреЗ рдмреНрд▓реЗрд▓рд┐рд╕реНрдЯ рдПрдХреНрд╕реЗрд╕ рдирд╣реАрдВ рдХрд░рд┐рдП рддреЛ рдЬрд░реВя┐╜я┐╜
5:54
рдирд╛ рдЕрднреА рдХреЗ рд▓рд┐рдП рдЗрд╕ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдЗрддрдирд╛ рд╣реА guys thank you so much guys for watching this video
5:58
and I will see you next time