Context api with local storage | project
HTML-код
- Опубликовано: 23 авг 2024
- Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial
pin kardo bhaiya
1:20 basic overview
5:40 Project Setup TODO
8:20 Context API setup
12:08 Todo overall Functionality
13:50 initialising prop and func
19:00 creating index.js for import reduction
20:30 UI app.js from README
21:20 State Creation of Todo
22:00 Add TODO functionality
29:18 update TODO functionality
33:23 Delete TODO functionality
35:26 toggle Checkbox TODO functionality
39:35 basic functionality ended here
39:50 Local Storage
41:20 useEffect JSON Local Storage
47:30 Components
49:30 Todo Form
56:34 Todo Item
1:09:30 Debug
1:13:40 Dhanyawad and Push it
Brother I'm facing some error first toggleComplete is not a function and updateTodo is not a function help I'm rechack my code with sir code but not find any Miss element tell m something
@@vikaschopde2776 where is your code give link
@@vikaschopde2776 or explain in more detail I didn't get what you are saying
@@Niteshmaurya1234 I'm my code have 2 error first is toggleComplete(todo.id) is not a function and second error is updateTodo(todo.id, {...todo,todo:todoMsg}) is not a function how to solve
To anyone new watching this=>
This video ment tobe watched 6/7 times (for new learner it's not possible to clear in one go, best part is it's a great recap of js concepts)
thank u brother i am geting difficulty in ynderstanding his previous projects so now by your suggestion i will watch it again and again
It took me 3 days to complete this video. I went very slow understanding each part. When I started this video, i thought to complete in 1 day, it might look simple application but when you start coding it does takes time. It has difficulties. But sir explained everything in such easy and smooth manner connecting all points. Now I will watch this video again for better clarification at 1.5x speed.
Thank you sir for sharing such amazing content. English wale channel se zada yaha samajh aata hai. Though contents are same, still yaha zada maza aata hai.
sir one small suggestion , sir firstly aap UI define kar diya karo fir functionality(js) ya context define karna , isse hum students ko sochne me easy ho jayega ki functionality / context ki kyo or kaha jarurat hai. Please sir message jarur dekhna.
Sadly he don't 😢
Koi takkar nahi le paayega ess quality content ki aakhir bahut saalo ka experince explain mil raha hai hum logo ko. ❤😂🎉😅
Ye baat to h
Bilkul sir
@@chaiaurcode Sir, kabi fursat mey chai k saath apna tech journey kay sey start huwa ham sab k saath share kare, please sir kuy ki aap ki padhai sey hamra ninada kul jata hai dusar ka lecture dek he ninada aaja ta hai, Sir,app technology ka samanda(sea) ho sir🙏🙏
Just a little contribution from my side sir..Thanks a ton from the bottom of my heart for such marvellous content🙏🙃..Thanks again..Looking to learn a lot from you not only in tech related stuff but life lessons too :))
Most welcome 😊 n thanks ❤️
@@chaiaurcode❤
Thank you! sooo much hitesh bhaiya, Watched so many lecture from free to paid but did not understood Context API till now. Chai aur Code ne sab sahi kar diya.
Having "Guru" like you around makes learning and growing much easier.
pehle coding related videos dekhta ta but boring lagta ta pher tumara english channel dekhar shuru kiya that time i feel very confident to learn programming langs. not just quality videos tumara teaching style is also different totally love you guruji.
Thanks
Amazing explanation
39:51 Basic context api functionality
setup ✅
40:00 Local storage setup start
48:00 Todo form component
58:00 Todoitem component
1:11:00 Project debugging
Ok sir
I have been following both the channels (hindi & english), I think you are able to express more openly and deeply over here and that's the reason I want to watch videos of this channel. Doing great sir !
same here
Bhai kyuki jo mother tongue hoti hai ek insaan usme sabse jyada comfortable hota h or khulkar baat kr paata hai jo other language me itne acche possible nhi ho sakta kyuki wahaan formal bhi rehna padhta h or upper se apni bhasha ka maja hi alag h
I have Completed this lecture in one go and understood about 80% of things because I have gave time and self tries to context API video now I will also try to make this TODO on my own so that I can understand it completely .
Thank You so much sir for such valuable content you are doing a noble work may god bless you 😊😊.
😂
First I thought Microsoft wali Didi was the best frontend instructor and I would have waited even an year for her Apna College channel to upload a React playlist. But I was wrong here. There are several other teachers on yt that have the potential to deliver quality education. And how better can I appreciate the efforts of Sir Hitesh by saying that he is one of those teachers who can deliver quality content to students. Thank God somebody recommended me this channel otherwise I would have kept myself waiting.
bhht khushi hui hai k aap basic se advance tk le k ja rhe ho
Advance se pro b leke jayenge ji
Wow, I've been following your React series closely, and it's been an incredible learning journey! The way you explain complex concepts in such a clear and easy-to-understand manner is truly remarkable. I appreciate the practical examples and hands-on approach you take, which makes it easier for me to apply what I've learned in real projects. Keep up the fantastic work, and please continue creating more React content. It's invaluable for React enthusiasts like me. Thank you, Chai And Code! 😍
plss do watch the last part 14:00 around this , beginners like me will get relaxed after listening the words from bhaiya.
Ye wala video ka part 1 till when local storage was not started was easy for me to get understand kyu ki related to last video and now today i feel like ki kuch se upar samjah aaya.. fir bhi ek baar aur dekhenge video for more clarification and todo app ko banayenge........
Aaj samjh mei thoda jaada aarha tha.
Thanks alot bhaiya...
The way you dissect complex topic so easily, especially with a confident and gentle smile motivates me even further. Thanks for this course
Maja bahut aaya hitesh. Actual production grade of code quality. ❤🎉
❤️❤️
Thank you sir ji video 2-3 bar dekhni padegi 😂
same
Others: watch documentations and teach
Hitesh sir: Apu ustado k ustaad h.
Love from Pakistan 🇵🇰
I'm trying to create a TASK MANAGER API using MERN Stack.. and this video helps a lot to brush up all the necessary topics and get a deeper understanding of the frontend concepts.
Love your videos bro... you're definitely one of the greatest teachers( I've taken a lot, a lootttt of youtube courses from all the biggest creators and programmers, such as John smilga, Beau Carnes, Jack Herrington, Lama Dev, kyle web dev simplified etc etc... as I want to learn from every programmer out there because learning never stops). I've learned a lot from u. Lots of love and respect from Pakistan❤❤❤
Its Unbelievable that this series is free of cost , I am unable to express my gratitude to u Hitesh sir U are just Genius!!!
I don't understand his 50% code
Bro u just need ur basics of javascript to be strong work hard u will get it@@gamingarea9011
@@gamingarea9011 01:14:30 Message for you !
Then your JS is weak maybe@@gamingarea9011
@@gamingarea9011 Take help of chat-gpt wherever you are confused. I do the same.
your content is really amazing and the way of teaching is superb, please make playlist for node js along with react js .
Krte h prabandh
@@chaiaurcode 😂😂
Best todo list❤ ever found on internet
Thanks hitesh sir for such concepts building projects
You can find multiple playlists and various views on React on RUclips, but clear and in-depth explanations and industry-level production code are only available on the Chai aur Code channel. This channel offers a complete masterclass, and @Hitesh Choudhary, you are the greatest teacher.
Uff the content quality ❤❤
😁😁
kis kisko samajh aa gaya apna toh sab upar se gaya hai
Bro try to recreate and try coding along and keep making small changes.. lots and lots of practice is the key... mjhy b first 1-2 months tk kch smjh nh arha tha.. but jesy he ap practice krty rehty ho.. ahista ahista topics apky mind me sink in krna shuru krdete hn. Wish u best of luck.. just don't stop.. and keep practicing and code kro sth sth jo b wo likh rhy hty.. or 1 video ko 1.5x ya 2x ki speed me 2-3 dfa dekhogy to sb topics smjh ajayeingi.. never give up. I'm sure you'll become a great coder if u keep practicing bro 👍
2 din se dekh rha h yeah same video... 3 bar dekh chuka hu.. Avi v samjh nhi aa rha... 😂😢
@@AmanKumarSinhaOfficial context API ki basics learn krwin 1 bar phr se. Aksr core concepts ki revision krni parti h... Basics strong hona bht zrori h coding me.
Tum bina video dekhe ye todo app banana ka try karo agar nhi ban paye toh video dekh lo uski bad wapas se or ek bar todo app banane ka try karna bina video dekhe. mere ko 4 bar bana para or tab jake samaj aya@@AmanKumarSinhaOfficial
Watching and coding 5th time after giving 6 days gap still not able get confidence
Your efforts and knowledge make things easier for us. I personally enjoy learning from you. God bless you, Hitesh Sir. Keep teaching us new things.
Thanku sir ❤ First saw your lecture to understand it theoretically then i did it on system, This way seeing your video twice helped me to clear my doubts
This is a quality content 👌
no youtuber provide such in-depth knowledge as you, sir. Keep it up.
Hitesh Sir,
Apan Software Engineer ho na ho pr Teacher / Professor bht ache ho 😅
Ek ek chiz itne pyaar se samjhate ho ek dum makhana ki tarah, MAZA aa gaya sir video dekh k.
Pehle Mai videos dekhta tha to ap jo jo puchte the mai maan me nhi soch/jawab de bata tha
But aaj bht time baad, Maine answer de pa Raha hu,
abhi 36 mins hi dekh hu & Jaise index.js kyu banae, context file me kya kya likhege, todoProvider ki spelling mistake, provider me values missing thi & deleteTodo k func. Maine prediction kr liya tha,
Aaj thoda confidence aaya h programming me, concept clear ho to bht maza aata h 😁😁😁
Thank you sir ye channel humko dene k liye ❤
sir jb aap 2obara samjhaty hain complex topics... maza aa jata hy.... thank you sir...❤❤
19:14 index.js to make all imports together and then export them from the same file (index.js) to organise all the imports/exports in a project
to finish all of hitesh sir's videos in a day i watch the explanations of all the topics he teach from codevolution its a great channel . Sir explain the concepts very well but the why is missing from the videos
Hi, Sir. I have been following your JavaScript course from the beginning and working on every lecture and coding exercises regularly. It's really amazing. I have not found any series like this anywhere on the internet. Great explanation! I thank you very much for this great effort. Love from Pakistan.
I honestly cant express what an amazing teacher u are , I have been struggling with context API and was unable to understand it . Through your lectures the topic is crystal clear. Keep doing such amazing work. Thank You Again
I have watched many videos about todo apps, but most of them focus solely on the UI, causing all the todos to disappear upon reloading or reopening the app. However, this video stands out because it prioritises functionality and genuine logic, offering more than just a superficial appearance of working. ❤
sir i am from pakistan mainey aaj join kiya aapko
Thank you sir content tau acha lag raha hai ab agey dekhtey hain thank you
😄
I already noticed previously .id error, so didn't make it, except that i got stucked in a new issue that my localstorage was storing function definition, Finally when i cleared local storage, my project worked, Thanks a Lot Hitesh sir for your Great efforts, Enjoying Chai with ...Code
sir mera bug ayaa thaa first time after completion. meine chor diya tha us din. dimag kaam nahi kar raha thaa. phir next day i watched your entire video again and phir jaake saab dots connect huya. application working fine, thanks for the lecture. maza aagaya
I can say this free React course is actually better than paid ones I've taken! The content here is so comprehensive and well-explained, making it super easy to understand even for beginners. Kudos to the creators for providing such high-quality education without charging a dime. Definitely recommending this to anyone looking to learn React without breaking the bank!
39:44 basic contexts functionality done ✔️ 👌 . BTW content quality OP 🔥👍
Thanks for such quality content sir I have started my development journey few weeks back and after learning machine learning and data science in the 2nd year of my college now I'm finally into full stack development and your tutorials helped me to learn things much more faster than expected...plz continue this kind of consistency...best wishes from my side
19:13 index.js file is used to avoid multiple imports in components or any other file. By this we can imports multple things like "todoContext and todoProvider" in one single import statement.
Take Respect and Love from a Bangladeshi Student. Love you sir
this aproach is very advanced. i watched it 4 times and it took three days to understand it properly.
Thanks... These type of comments makes us a lil bit comfortable that I am not rare guy not getting the concept within a day (feeling less stupid) 😌
This was such a lovely explanation Hitesh Sir. Only a person with passion and love for teaching can teach like this. Thank you
19:15 index.js file is made inorder to put all export related stuff in a single place so that we can import them easily later on
Not any projects are small and big , the good level of complexity is introduced in any of them , so just focus and try to do them
Sir, We can also add user-convenient feature show the completed task at bottom of the list. So much grateful for your teaching sir. Please keep continuing your noble teaching. Your video will eventually reach to larger audience.
i just watch it today ... its my first day... i dont understand it only in one watch ... but i belive when i watch it again and do each part just like adding deleting editing with the video it will be understandable... i have been working in react for almost 4 months.. its hard because i just start tech 2023... with out any knowledge ... i learn everything from the scratch ... i am not letting it go ... hope oneday i will be at least on that level where i can confidently make things working ..
I have used localStorage in my project for a different reason and done that task, but now after watching this lecture got to know that it converts it to strings, I am using it for saving strings content only so it didn’t caused any issues. But yeah it’s good to learn it now
great lecture. great explanation. Thankyou for such an amazing series!
Uff🔥🔥🔥🔥 What a lecture, Purely fall in love with your teaching style, the most lovable thing is that you don't show any hurry to complete the video and cleared every detail in a structured way. 💖💖
hitesh heartily request you pls explain this context api topic from fresher point of view ur quality is dam high due to ur exp but literally it's getting little tough to grasp the knowledge in this video... pls can u explain it in more simpler ways... Kudos 👏 to all ur efforts 💯
WOW Maja a gya sir apne jo bhi pusha mene sath har answer dia or han Jisne javaScript Chai k sath padi hai usko koi khaas dikkat ayeg nhi :D Thank you sir. han context api jab mene pehli baar pdi to muje first part a gya tha lekin second part krne m ek din laga tha lekin is video me context se to koi dikkat hui hi nhi... Once again Thank You sir
Because of your previous lectures, this lecture is very simple for me
Full maza aaya...
Thank you so much...
I will definitely consider buying his courses, if this is for free,then paid course would be on another level
Thank you so much sir, You are right sir We can't find such a content even in Paid courses
You are most welcome
I completed this in my first attempt just because of deep explanation Love you sir
Sir, I can't express how good this video is; in the earlier two videos, I didn't get useContext completely. I am very confused about how it is working, but in this project, each and every concept is clear. So, thank you very much, sir ❤❤❤.
Sir you are a very high quality content creator, love from Pakistan!
sir ek hi to dil he sir kitni baar jitoge sir bahot maja aya sir love from gujarat sir 🤩🤩🤩
thank you sir...itine simple way mein samjhane ke liye...❤
0:49 "Project koi bhi chota nhi hota 🔥"
Aur Project se bada koi dharm nhi hota 😊
Thank you....
Finally context api acche se smj agya
Hello sir, I like Your content very much..and i want to say something related to the react tutorial that please start explaining the things with Basic Project(with less complication) and then move to advance project(with some complication).....i hope you'll take it as feedback.and thankyou for working this hard for free of cost..
Thank you very much HITESH sir for this amazing lecture
Timeline (Copy pasted)
1:20 basic overview
5:40 Project Setup TODO
8:20 Context API setup
12:08 Todo overall Functionality
13:50 Initialising prop and func
19:00 Creating index.js for import reduction
20:30 UI app.js from README
21:20 State Creation of Todo
22:00 Add TODO functionality
29:18 Update TODO functionality
33:23 Delete TODO functionality
35:26 toggle Checkbox TODO functionality
39:35 Basic functionality ended here
39:50 Local Storage
41:20 useEffect JSON Local Storage
47:30 Components
49:30 Todo Form
56:34 Todo Item
1:09:30 Debug
1:13:40 Dhanyawad and Push it
Hitesh sir isko lagai na timestamp plzz..
@chaiaurcode
Grt job bruh
Lot Off for Hitesh sir from Pakistan
The quality of content is literally unbeatable , thanku sir for providing high quality content for free of cost
My honest review about this video is, that this video is complex because of the naming as all sounds similar one can get confused easily i followed tutorial for like 3-4 times still didnt get it at the end I made it from scratch and changed naming and Finally now I got the working of this project would recommend that follow video once for understanding and make it from scratching including UI to get about the video more take ref of Git Repo than vid
Its Amazing : today was my interview. the ask me about the context api. the day before i watch your video. explain in this way.. interviewer got happy. with my explanation. Thanks
Hitesh Choudhary
job mili ky? bhai
Sir i paused the video when you introduced the project and i am amazed that i did all things same as you have done but little bit less optimized , otherwise the actual logic of states methods all same!
sir apko itna kese ata hai me abhi 2nd year college me hu sir smjate hai sab kuch smaj me aa jata hai but implemend ke time mujhe kuch yad nhi rehta layout bnata hi nhi kya kru
@@anshdholakiya7606 bro how much time you have spend on core js? Like did you made any project with it without watching any tutorial?
We are waiting for more content love from 🇦🇫Afghanistan I'm learning react and also hindi language from you ❤❤
Thank you for not only showing us how to code but ensuring we grasp the underlying principles. Great work!
39:43 local storage functionality starts.
In order to access state (value) of global variable of context api we use useContext hooks
bhaiya ek bhi bugs nehi aya apse pehele to mai hi solve kar dia upar se deleteTodo aur toggleComplete ke lia 4 logic aur banaya aur sabhi kam kar raha hai.
course aisi banao ki students itni sikh jai ki sir se pehele logic bana sake. BTW love you Bhaiya
good video for learning context api projects. thanks sir
am going to be addict ur Hindi channel. U are such a brilliant teacher who knows how to teach in easy way ☺☺
00:03 Creating a basic TODO project using Context API and local storage
01:58 Local storage allows for saving and retrieving data
05:43 Using Context API with Local Storage for the project.
08:51 Creating a context for managing contacts in React
12:47 Context API with local storage
14:34 Understanding the process of using context API with local storage
18:26 Utilizing the Context API for state management and accessing methods
20:23 Managing contacts and login efficiently
24:53 Understanding how to update and manage data in the context API with local storage.
26:37 Managing state with local storage and context API.
29:57 Using callback functions with the context API and local storage.
31:41 Using context API and local storage for state management
35:11 Improved delete functionality with enhanced business logic
37:15 Using context API and local storage for efficient data management
41:07 Using local storage and session storage in React application
43:00 Using local storage to store and retrieve values
46:24 Using local storage with Context API for automatic state management
48:02 Creating components with convenience
52:06 Creating a method and handling events with context API
54:12 Understanding the new syntax and field value wiring
57:36 Handling state update and functionality in contact lake
1:00:15 Demonstration of looping through and updating objects in context api
1:04:06 Creating a toggle method for handling local storage and API contact
1:05:49 Updating and managing input fields with the Context API
1:09:13 Testing and debugging for local storage functionality
1:10:52 Analyzing project with local storage and mistakes made
1:14:30 The importance of understanding 80% of the lecture
We love your teaching style, teaching content and you're amazing❤❤
39:47 here basic functionality ended and local storage functionality started.
content at begining: 🥰🌼
content at last 15 min: 🗿🗿
well this is my 5th time, but still lagta hai bahut kuchh hai sikhne ko
aap great ho sir ji, wo bolte hai na "gagar me sagar " same concept hai idhar
sir apko itna kese ata hai me abhi 2nd year college me hu sir smjate hai sab kuch smaj me aa jata hai but implemend ke time mujhe kuch yad nhi rehta layout bnata hi nhi kya kru
Hello, your teaching style and experience are excellent.oo good
Thank you! 😃🤗☕️
Video and Audio quality is top-notch. Very very few youtube videos have this benchmark
It feels like we are doing a heavy course by watching your video sir fully appreciated sir thank you so much.
took the project a level up.made multiple lists with todos in them. it was fun!
this series is so much awesome and easy to understand thank you sir laga hi nahi tha ki ek todo app mai itna sab kuch sikh jaunga thank you very much
00:03 Creating a basic project using Context API and local storage
01:58 Local storage allows for saving and retrieving data
05:43 Using Context API with Local Storage for the project.
08:51 Creating a context for managing contacts in React
12:47 Context API with local storage
14:34 Understanding the process of using context API with local storage
18:26 Utilizing the Context API for state management and accessing methods
20:23 Managing contacts and login efficiently
24:53 Understanding how to update and manage data in the context API with local storage.
26:37 Managing state with local storage and context API.
29:57 Using callback functions with the context API and local storage.
31:41 Using context API and local storage for state management
35:11 Improved delete functionality with enhanced business logic
37:15 Using context API and local storage for efficient data management
41:07 Using local storage and session storage in React application
43:00 Using local storage to store and retrieve values
46:24 Using local storage with Context API for automatic state management
48:02 Creating components with convenience
52:06 Creating a method and handling events with context API
54:12 Understanding the new syntax and field value wiring
57:36 Handling state update and functionality in contact lake
1:00:15 Demonstration of looping through and updating objects in context api
1:04:06 Creating a toggle method for handling local storage and API contact
1:05:49 Updating and managing input fields with the Context API
1:09:13 Testing and debugging for local storage functionality
1:10:52 Analyzing project with local storage and mistakes made
1:14:30 The importance of understanding 80% of the lecture
index.js will be used to export all the context files through this single file as such later we only need to import index.js file to gain access to all these context files.
In short, it makes importing files simpler and easy.
39:47 Complete the basic context function and start the Local Storage Function.
39:50 finished context functionality
39:51 local storage
local storage functionality starts from here 39:50
Best course to learn React in depth..
I have learned js from u and am learning React , but I still can't believe that it's all free. I just can't thank you enough Sir .🔥🔥
i know your subscribers will get reach on 1 million soon...thank you so much sir
Sir waise to samazne me thodi preshani hui hai lekin mera maanna tha ki agar aap first todos data ka kuch kr deta or uske baad uske functionalities ek ke baad ek karke samjhate chalte to sab easily connect kr paate hai yahaan aapne pehle se method ke logic ko define kiya h iska matlab hai beginner ko apne man me Pehle hi todo data ko mankar chalna h ki kya data aaya hai ye ek beginner ke liye soch paana difficult ho jaata hai. Baaki ha jise bhi destructure, spread in sab me dikkat aai to use basic js ko hi sikhna chahiye