Hey all, I've created a full stack version of this tutorial using React/Node/Postgres, which you check out here. ua-cam.com/video/2MoSzSlAuNk/v-deo.html Thanks for watching!
That was the best tutorial about coding I have ever seen on youtube. I am not exaggerating! Everything was so clear. You explained everything **everything** without being boring, I don't know how did you just do that :) Thank you so much, hope you will get the viewers you deserve.
This was an awesome tutorial on React. Thank you so much Chris.👍 In order to display the long contents inside the div we can add word-wrap along with white-space property in .note{ white-space: pre-wrap; /* Preserve whitespace and wrap text */ word-wrap: break-word;/* Break long words to prevent overflow */ } and for localStorage issue we can remove from index.js
learnt a lot of new things and finished my noteApp and added a new feature where hover around the delete icon give a circle white animation , Thank you for the tutorial .
Great tutorial! This is one of the few projects that had me hooked on until completion. Love how everything is explained so nicely and with the clean coding practices. Thank you for making this video! Looking forward to many more .
First of all, I really appreciate your tutorial. You explain everything clearly and I actually learned a bunch of stuff that has nothing to do with React, like auto-fit and minmax on a grid, or trim() in js. I did run into a small problem at 49:29 though. When you actually reach the character limit and have 0 characters left, you're no longer able to delete anything because setNoteText never gets called anymore due to the condition in the surrounding if statement. My fix for this was to set a maxLength attribute on the textarea element itself. That way it works perfectly as intended. Maybe this can help someone who ran into the same issue : )
I might have watched 20 - 30 react projects videos on UA-cam and I can say this is the best one I'm so happy. Thank you so much for uploading this tutorial and please continue making the videos ❤️.
I already recommended your beautiful channel to my react colleagues.. This playlist would help in day to day react work + Interview preparation We would love to see more projects coming up Chris !! 18:36 Yes we need on CSS Grid also :)
Great video! Coded it along the way! Btw at 1:06:50, on line 53, it should be note.text.toLowerCase().includes(searchText.toLowerCase()) now if the user types in capital letters, it would still get filtered Also, search box input does not occupy the entire search grey container. It looks like it does. Added flex:1 in css in .search input{...}
Very clear tutorial. thank you! But I am not able to save to my local storage. Tried a couple of different syntaxes and still. Did someone go through the same thing and can maybe help me?
Hi Chris, First of all, thanks for the great tutorial, it really helped me understand the process of creating an app. I do have one question about the code: When I ran the final app, the "save" feature did not work properly (didn't save new notes nor keep the deleted ones deleted - it kept going back to the original list"), and upon some research, I realized it is because when reloading the page, the state of "notes" is updated, therefore saved, before getting loaded, so I have to 1) make the initial state of the "notes" an empty array, then 2) modify the useEffect to save the notes only when the length is greater than 0. But in your tutorial, your code seems to work for you, and I was wondering how? Because when I ran the same code you have on your git repo, I kept encountering the same issue of not being able to save/load properly from the local storage. Did you by any chance have any modification in your code? If you could help me out, I would really appreciate it! Thanks again!
um...actually...while implementing the part with localstorage, the useEffect renders components twice. So it is clearing the loalstorage on second render. So instead of removing the strictmore i did this: is there any bad practice in this: const savedNotes = JSON.parse(localStorage.getItem('jotte-data')); const [notes, setNotes] = useState(() => savedNotes? savedNotes:[] ); why didnt this happed to you?
thanks for making this video. It really helped me. Can you make a separate video on grid display? Or can you share a good resource to learn that in depth. Thanks
beautifully explained. appreciate your efforts! cheers! P.S can you please make an advanced react video covering all the do's and don'ts for a highly scalable, responsive UI project? While there are hundred's of videos covering basics, advance concepts are really hard to find.
I is a great tutorial, it really helped me a lot. Just one question, I applied the exact same steps as you did for local storage, but my notes do not persist after I refresh the browser. How can I handle this issue?
Thank you ! Sure I’ll probably do a similar video on future where I show edit functionality. In the mean time, if you check on of the other comments I replied with how to go about editing notes Hope it helps !
Hello sir, what command do you use to format a long line of multiple statements into multiple indented rows like 1:04:50? Thank you so much for the freat tutorial!
My local storage part is not working. Storage data is visible in local storage on inspecting but the notes are not retained after refreshing the site. When "notes" is fetched it returns initial hard coded values not the updates ones.
I have the issue where i can't save my state and when i load the page its wont change please help. i do exactly your code and last 5 minutes my app wont save.
hey hi just a small doubt as u have used useEfftect to save in local storage and i have put the exact code and it is not saving for me .if i reload it show the initial array items , any solutions ??
hey, the local storage is not working for me. I even tried copying your hooks from the source code you provided to avoid any typo, and still it doesn't work. But I forked the source you provided and tit works. I don't know what is happening, maybe you can help me. BTW your video is amazing, I really like the way you teach makes it easy to follow you, thank you!
@@shivampande8916 it's because your react Component is rendering twice and to solve this issue you have to disable the in your index.js file (I actually copied this from someone in the comments)
Hey all, I've created a full stack version of this tutorial using React/Node/Postgres, which you check out here. ua-cam.com/video/2MoSzSlAuNk/v-deo.html Thanks for watching!
Thanks a lot!
please say about the same project in backend connectivity using mern stack it would be more usefull
That was the best tutorial about coding I have ever seen on youtube. I am not exaggerating! Everything was so clear. You explained everything **everything** without being boring, I don't know how did you just do that :) Thank you so much, hope you will get the viewers you deserve.
Anyone Know how I transform it in a apk? please!
@@sidneymorais use react native
If you continued to do more projects with this excellent way of explaining you will grow in short time
Thanks for your efforts to help us ❤
Thanks so much for the support and kind words , it’s really appreciated!
I was looking for a video like this and this came today :) please continue making React(hooks) projects !
Awesome! I hope you find it useful
This was an awesome tutorial on React. Thank you so much Chris.👍
In order to display the long contents inside the div we can add word-wrap along with white-space property in .note{
white-space: pre-wrap; /* Preserve whitespace and wrap text */
word-wrap: break-word;/* Break long words to prevent overflow */
}
and for localStorage issue we can remove from index.js
learnt a lot of new things and finished my noteApp and added a new feature where hover around the delete icon give a circle white animation , Thank you for the tutorial .
Great tutorial! This is one of the few projects that had me hooked on until completion. Love how everything is explained so nicely and with the clean coding practices. Thank you for making this video! Looking forward to many more .
First of all, I really appreciate your tutorial. You explain everything clearly and I actually learned a bunch of stuff that has nothing to do with React, like auto-fit and minmax on a grid, or trim() in js. I did run into a small problem at 49:29 though. When you actually reach the character limit and have 0 characters left, you're no longer able to delete anything because setNoteText never gets called anymore due to the condition in the surrounding if statement. My fix for this was to set a maxLength attribute on the textarea element itself. That way it works perfectly as intended. Maybe this can help someone who ran into the same issue : )
Anyone Know how I transform it in a apk? please!
I might have watched 20 - 30 react projects videos on UA-cam and I can say this is the best one I'm so happy. Thank you so much for uploading this tutorial and please continue making the videos ❤️.
Wow, thank you! I'm glad you liked it!
This tutorial is really nice as he explains the whole code serially without skipping anything! Thanks for the tutorial.
Someone finally explained grid, in a way I can understand. I'm alive
I already recommended your beautiful channel to my react colleagues.. This playlist would help in day to day react work + Interview preparation
We would love to see more projects coming up Chris !!
18:36 Yes we need on CSS Grid also :)
Anyone Know how I transform it in a apk? please!
Thank you! I love how you explained the css and why the properties work the way they do.
I truly never seen such a good video before, even in paid courses. Incredible content with complete explanation, thanks!
You deserve too much more! Keep it going, the tutorial was great.
Loved how simple you made this tutorial to follow!! Thank u for helping everyone by sharing this!
Great video! Coded it along the way! Btw at 1:06:50, on line 53, it should be note.text.toLowerCase().includes(searchText.toLowerCase())
now if the user types in capital letters, it would still get filtered
Also, search box input does not occupy the entire search grey container. It looks like it does. Added flex:1 in css in .search input{...}
Great tutorial! Concise, easy follow, and well thought out. Thank you! 🙇🏻♂️
good luck Chris, it was the best tutorial that I passed with react
Simply wonderful, I've always get confused on the concept of hooks and props drilling, but this tutorial can easily give me that 'eureka' feeling 👏😁
Anyone Know how I transform it in a apk? please!
Heyyy!!! Thanks Chris for posting this. One of the best courses I've seen on react with css.
Literally the most informative and helpful coding video I've ever seen!
please make more videos you explained everything clearly and I enjoyed following along
Dude I can't get enough of your content, bloody awesome. Keep up the react vids, so good
Very good tutorial for beginners. the way you explained it is amazing!!! A big thank you!
you made it look so simple.
super informative and very amazingly explained!
subbed!
That was literally the best coding tutorial ever!!! thank you!! going to bingwatch your channel
The best... web-app built ever 🔥🔥🔥🔥
Truly great tutorial! I'm looking forward to making and expanding this!
Awesome , hit me up on Twitter when you finish! looking forward to seeing what you come up with ! 😃
Very clear tutorial. thank you! But I am not able to save to my local storage. Tried a couple of different syntaxes and still. Did someone go through the same thing and can maybe help me?
it's because your react Component is rendering twice and to solve this issue you have to disable the in your index.js file
@@mohameddh4112 Anyone Know how I transform it in a apk? please!
@@mohameddh4112yes ..it worked.. thanks man
Hey ! Your videos are great for all the beginners to learn react. You are doing a great job. Thank you
awesome. full react tutorials please
Hi Chris, First of all, thanks for the great tutorial, it really helped me understand the process of creating an app.
I do have one question about the code:
When I ran the final app, the "save" feature did not work properly (didn't save new notes nor keep the deleted ones deleted - it kept going back to the original list"), and upon some research, I realized it is because when reloading the page, the state of "notes" is updated, therefore saved, before getting loaded, so I have to 1) make the initial state of the "notes" an empty array, then 2) modify the useEffect to save the notes only when the length is greater than 0.
But in your tutorial, your code seems to work for you, and I was wondering how? Because when I ran the same code you have on your git repo, I kept encountering the same issue of not being able to save/load properly from the local storage. Did you by any chance have any modification in your code?
If you could help me out, I would really appreciate it! Thanks again!
i indeed would love more css grid content!
DUDE!!!! You are awesome! Thanks so much for taking the time to teach us.
A beautifully presented React Note App. So informative, fluent and clear. Thanks, Chris
{2022-10-18}
um...actually...while implementing the part with localstorage, the useEffect renders components twice. So it is clearing the loalstorage on second render. So instead of removing the strictmore i did this: is there any bad practice in this:
const savedNotes = JSON.parse(localStorage.getItem('jotte-data'));
const [notes, setNotes] = useState(() =>
savedNotes? savedNotes:[]
);
why didnt this happed to you?
Thanks for the tutorial!! Could you make a video on how css grid works??
truly great video! please make more videos like this!
TNice tutorials tutorial was worth it, I understood everytNice tutorialng now
please make video on css grids and need to add word-break: break-all; in note class to break line
good catch! Thanks for letting us know 👍
Chris, you are awesome. Many thanks for this amazing project.
Really awesome video. We are looking more projects like this from you. Thanks Man!
best tutorial 🔥🔥, thank you sir
You should make more videos like this one ;). They are really good explained Thank you
i like the way you explain. I think the duration of 1 hour + is better divided into 2 parts or more.
love your videos, thanks for clearing all the basic concepts of hooks along. :)
Thanks for your hard work! A lot of things fell into place in my brain!
finally i created my first react project. thanks a lot bro!
Anyone Know how I transform it in a apk? please!
@@sidneymorais don't know that bro
thanks for making this video. It really helped me. Can you make a separate video on grid display? Or can you share a good resource to learn that in depth. Thanks
great tutorial. easy to understand and very useful.
Great Tutorial...
Lots of things to know from here as a newbie
Amazing tuttorial! very beginner-friendly! you gained a subscriber ;)
WELL DONE GOOD PROJECT THANKS FOR SHARING YUR KNOWLEDGE WITH US
This is exactly what I was looking for! Thanks a bunch :)
Perfect tutorial Chris, thank you so much!
one of the greatest explanation and code thank you sir
Amazing work, looking forward to see more content from you :))
I love your content, this tutorials are amazing, good luck.
beautifully explained. appreciate your efforts! cheers!
P.S can you please make an advanced react video covering all the do's and don'ts for a highly scalable, responsive UI project?
While there are hundred's of videos covering basics, advance concepts are really hard to find.
Great content, was looking for something like this!
You are awesome! thanks for that. I'm from Brazil, just new student.
Thanks for this tutorial, it helped me a lot 🙏
great tutorial!! very clear explanation
Thanks !
Nice Project and Nice Tutorial, Thanks
You are welcome
follow lots of videos. you are the best. Appreciate for your tutorial~
Very Nice videoo with cool explanation along the wayy... Really Appreciate it
Great Video Do you have any idea how to add title for each note?
Thank you so much I learn CSS better with this video
Thanks a lot for watching ! I’m glad you found it helpful 😃
This is really a cool project🔥🔥
Great lesson mate
need the other half of the video!
I is a great tutorial, it really helped me a lot. Just one question, I applied the exact same steps as you did for local storage, but my notes do not persist after I refresh the browser. How can I handle this issue?
Remove strict mode in index.js file
@@Vishnu_Reddy_3011 this works
Awesome video! can you also show us how to edit the notes? I have some trouble designing this. Thanks for the content!
Thank you ! Sure I’ll probably do a similar video on future where I show edit functionality.
In the mean time, if you check on of the other comments I replied with how to go about editing notes
Hope it helps !
@@ChrisBlakely Thanks for the reply, I suscribe to your channel. Regards from Uruguay!
Awesome tutorial will you provide how to add categories in them for different topics?
Thanks ! Yeah my next tutorial looks at doing exactly that ! It should be released in a few weeks 😄
@@ChrisBlakely Ok thanks 😄
Hello sir, what command do you use to format a long line of multiple statements into multiple indented rows like 1:04:50? Thank you so much for the freat tutorial!
before starting the tutorial, may i ask have you added the feature of editing a already existing note?
I don't understand why the search filter works when you don't have a term. Since you don't have a search term then how do the notes get displayed?
My local storage part is not working. Storage data is visible in local storage on inspecting but the notes are not retained after refreshing the site. When "notes" is fetched it returns initial hard coded values not the updates ones.
Same here. Did you find any solution?
Found the answer in the comments below. You have to delete strictmode in the index.js file
I have the issue where i can't save my state and when i load the page its wont change please help. i do exactly your code and last 5 minutes my app wont save.
You can add the edit note and edit functionality.
hey hi just a small doubt as u have used useEfftect to save in local storage and i have put the exact code and it is not saving for me .if i reload it show the initial array items , any solutions ??
same
Thanks its verry helpful to me
Most welcome 😊
It worked! Tank you sir.
hey, the local storage is not working for me. I even tried copying your hooks from the source code you provided to avoid any typo, and still it doesn't work. But I forked the source you provided and tit works. I don't know what is happening, maybe you can help me. BTW your video is amazing, I really like the way you teach makes it easy to follow you, thank you!
nvm i found the solution. thank you!
@@fgdkfg.0.0. how please help
@@shivampande8916 it's because your react Component is rendering twice and to solve this issue you have to disable the in your index.js file (I actually copied this from someone in the comments)
onto the software. I'd like to make soft from my ukulele, keyboard, etc., but don't know how to transfer. Do I need a microphone or
Well done man amazing😍
Thank you so much 😀
Could we use "maxLength" attribute in textArea for the character count?
What would be a good method to add also a title for my notes?
Thanks for the tutorial
Good tutorial my friend
you should added a Edit button, which make it more realistic and fun. i tried but i couldn't do it
Everything is working fine but when I reload my page, my notes are set to default and saved notes are not there. Can anyone help me fix it ??
i got the same issue
This is so cool, thank you !!!
You're so welcome!
Great tutorial. I have no idea why but the app works great. Is your english variety Australian?
haha if you have any Q's feel free to give me a shout! Nope I'm from Ireland!
nice
it would be good if you could upload more frequently
and awesome explanation !
Thank! Yeah I would love to but these videos take ages and I don’t have much free time.
Any suggestions for shorter videos you’d like to see ?
@@ChrisBlakely i would like a simple calculator app and intro to expo and stuff
So awesome content, thx!
can you add login functionality and do a video on that?
i tried the useEffect() but when i refresh my page it does not save
Did u find any solution for this problem?
What extension are you using that reformats everything when you save?