React Notes App Tutorial from Scratch | A CSS and React Project you can add to your Portfolio!

[@ChrisBlakely]

Hey all, I've created a full stack version of this tutorial using React/Node/Postgres, which you check out here. kzbin.info/www/bejne/aH7ShK2JoaaohM0 Thanks for watching!

[@justacing]

Thanks a lot!

[@arvinthathikesav3531]

please say about the same project in backend connectivity using mern stack it would be more usefull

[@hasansolak23]

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.

[@sidneymorais]

Anyone Know how I transform it in a apk? please!

[@dovinhas]

@@sidneymorais use react native

[@soujanyavt]

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

[@awesome_gamer7111]

THANK YOU! the Local storage issue was bugging me out, I couldn't figure out why it wasn't saving

[@waleedsharif618]

I was looking for a video like this and this came today :) please continue making React(hooks) projects !

[@ChrisBlakely]

Awesome! I hope you find it useful

[@revatib908]

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 .

[@channel-ou9cl]

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 ❤

[@ChrisBlakely]

Thanks so much for the support and kind words , it’s really appreciated!

[@gamelovershami2134]

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 .

[@actually_yali]

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 : )

[@sidneymorais]

Anyone Know how I transform it in a apk? please!

[@saitejagatadi9711]

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 :)

[@sidneymorais]

Anyone Know how I transform it in a apk? please!

[@theganeshpatil]

This tutorial is really nice as he explains the whole code serially without skipping anything! Thanks for the tutorial.

[@KendrickSimphao]

Someone finally explained grid, in a way I can understand. I'm alive

[@ticianomorvan]

You deserve too much more! Keep it going, the tutorial was great.

[@puneeth1551]

I might have watched 20 - 30 react projects videos on KZbin 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 ❤️.

[@ChrisBlakely]

Wow, thank you! I'm glad you liked it!

[@wudao88]

Thank you! I love how you explained the css and why the properties work the way they do.

[@diasvt.r4481]

I truly never seen such a good video before, even in paid courses. Incredible content with complete explanation, thanks!

[@rylidavis5679]

Loved how simple you made this tutorial to follow!! Thank u for helping everyone by sharing this!

[@viorelbobeico3888]

good luck Chris, it was the best tutorial that I passed with react

[@habibamasoud4748]

Literally the most informative and helpful coding video I've ever seen!

[@Karan-gh9ki]

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{...}

[@davidrknowles9792]

Dude I can't get enough of your content, bloody awesome. Keep up the react vids, so good

[@muskanyadav2391]

Heyyy!!! Thanks Chris for posting this. One of the best courses I've seen on react with css.

[@chaitanyashahare2734]

That was literally the best coding tutorial ever!!! thank you!! going to bingwatch your channel

[@romanmontoya5950]

Great tutorial! Concise, easy follow, and well thought out. Thank you! 🙇🏻‍♂️

[@freuschfreu]

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 👏😁

[@sidneymorais]

Anyone Know how I transform it in a apk? please!

[@sugamsingh5213]

Very good tutorial for beginners. the way you explained it is amazing!!! A big thank you!

[@tylermorales9043]

Truly great tutorial! I'm looking forward to making and expanding this!

[@ChrisBlakely]

Awesome , hit me up on Twitter when you finish! looking forward to seeing what you come up with ! 😃

[@SoumeshRanger111]

The best... web-app built ever 🔥🔥🔥🔥

[@emmanuelsofuwa280]

please make more videos you explained everything clearly and I enjoyed following along

[@sewcyde]

you made it look so simple. super informative and very amazingly explained! subbed!

[@motivevotex]

I really love this video 😍Your explanations are top notch 💯💯💯

[@woofcode3383]

DUDE!!!! You are awesome! Thanks so much for taking the time to teach us.

[@hindihits9260]

truly great video! please make more videos like this!

[@shirogatu1863]

TNice tutorials tutorial was worth it, I understood everytNice tutorialng now

[@deepakrajwar4207]

Hey ! Your videos are great for all the beginners to learn react. You are doing a great job. Thank you

[@marcelaplaplerjarovsky9427]

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?

[@mohameddh4112]

it's because your react Component is rendering twice and to solve this issue you have to disable the in your index.js file

[@sidneymorais]

@@mohameddh4112 Anyone Know how I transform it in a apk? please!

[@ruthra5398]

​@@mohameddh4112yes ..it worked.. thanks man

[@abhishekvishwakarma9240]

best tutorial 🔥🔥, thank you sir

[@Ash-uf9sn]

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?

[@HimanshuSharma-uf1mr]

Amazing work, looking forward to see more content from you :))

[@keyboardbasher5769]

i indeed would love more css grid content!

[@patrickagoptimedia9799]

Chris, you are awesome. Many thanks for this amazing project.

[@ahmednoureldin6659]

awesome. full react tutorials please

[@Pareshbpatel]

A beautifully presented React Note App. So informative, fluent and clear. Thanks, Chris {2022-10-18}

[@varghesegeorge]

This is exactly what I was looking for! Thanks a bunch :)

[@dangerzone-136]

Really awesome video. We are looking more projects like this from you. Thanks Man!

[@rupalsharma9948]

finally i created my first react project. thanks a lot bro!

[@sidneymorais]

Anyone Know how I transform it in a apk? please!

[@rupalsharma9948]

@@sidneymorais don't know that bro

[@mishu13]

love your videos, thanks for clearing all the basic concepts of hooks along. :)

[@MightyKingKala]

I love your content, this tutorials are amazing, good luck.

[@ombhosale8090]

great tutorial. easy to understand and very useful.

[@yash22arora]

Amazing tuttorial! very beginner-friendly! you gained a subscriber ;)

[@anupamaherath4983]

WELL DONE GOOD PROJECT THANKS FOR SHARING YUR KNOWLEDGE WITH US

[@maximmakhney]

Thanks for your hard work! A lot of things fell into place in my brain!

[@jovanibrasil5521]

Perfect tutorial Chris, thank you so much!

[@yagniktalaviya2146]

Thanks for the tutorial!! Could you make a video on how css grid works??

[@saurabhmina8671]

one of the greatest explanation and code thank you sir

[@tumon001]

Great Tutorial... Lots of things to know from here as a newbie

[@gsahrens]

Great content, was looking for something like this!

[@sohailansari6870]

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.

[@ikbentheodoor]

Same here. Did you find any solution?

[@ikbentheodoor]

Found the answer in the comments below. You have to delete strictmode in the index.js file

[@ishratkaur1605]

At 45:52, my setNoteText(' ') does not work. It does not reset the value in the note to empty.

[@sidneymorais]

You are awesome! thanks for that. I'm from Brazil, just new student.

[@replayzor]

You should make more videos like this one ;). They are really good explained Thank you

[@chaitanyakarthik3536]

Very Nice videoo with cool explanation along the wayy... Really Appreciate it

[@molecularnut6122]

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.

[@quantontheway]

follow lots of videos. you are the best. Appreciate for your tutorial~

[@LogicalWrld]

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!

[@hjpark8496]

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!

[@markopetrovic7487]

Thanks for this tutorial, it helped me a lot 🙏

[@raghavendraprasadful]

please make video on css grids and need to add word-break: break-all; in note class to break line

[@ChrisBlakely]

good catch! Thanks for letting us know 👍

[@mehran.panahi7]

Nice Project and Nice Tutorial, Thanks

[@ChrisBlakely]

You are welcome

[@carlosduque5174]

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?

[@bogulztv8554]

great tutorial!! very clear explanation

[@ChrisBlakely]

Thanks !

[@wirawardhana8573]

i like the way you explain. I think the duration of 1 hour + is better divided into 2 parts or more.

[@riddhibuddhi6520]

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

[@shubhamsahay4485]

This is really a cool project🔥🔥

[@andyshort8087]

Great lesson mate

[@johnkim7783]

1:05:24 where is this component page from ? is it an extension I need to seperately download ?

[@aaryakhandare9950]

before starting the tutorial, may i ask have you added the feature of editing a already existing note?

[@Mahmoud_176]

Could we use "maxLength" attribute in textArea for the character count?

[@chesswithsarang]

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

[@nilayshukla9236]

24:22 why destructing props? Can't we use props. Id and etc..

[@deepankarsharma7037]

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 ??

[@plbtn]

i got the same issue

[@ashwinm5230]

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 ??

[@purvakale7116]

same

[@abhimanyuarora9262]

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.

[@narayanpanta1668]

Thank you so much I learn CSS better with this video

[@ChrisBlakely]

Thanks a lot for watching ! I’m glad you found it helpful 😃

[@the_rivel3041]

It worked! Tank you sir.

[@leonardohurovich3381]

What would be a good method to add also a title for my notes?

[@fgdkfg.0.0.]

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!

[@fgdkfg.0.0.]

nvm i found the solution. thank you!

[@shivampande8916]

@@fgdkfg.0.0. how please help

[@mistysam6645]

@@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)

[@abrarahsan8760]

I cannot seem to save the notes when I refresh the page. It is not saving my local storage. The useEffect is working but not saving it when refreshing the page.

[@Joseph-do9ue]

Well done man amazing😍

[@ChrisBlakely]

Thank you so much 😀

[@danielfaseyi9733]

i tried the useEffect() but when i refresh my page it does not save

[@Mahmoud_176]

Did u find any solution for this problem?

[@tyronrusty8070]

How do you fix the vulnerabilities mines is showing 6 highs tried audit --fix but did not work any help please thx

[@KlipBuzz]

when i refresh nothing is saved, i even tried your code from git in vs it didnt work ;(

[@Morrisseyy]

need the other half of the video!

[@XRWASIFLive]

is there a setting Called Program*, its default is set to *Agressive TEwNice tutorialch is making that sNice tutorialtty static soft, change that one, once to

[@Almost1935]

Great Video Do you have any idea how to add title for each note?

[@Nimisha844]

Hello sir i have encounterd an error related to localstorage .Whenever i save the note and refresh the page the added note gets deleted .Please clarify my error sir.

[@NikhilKumar-oc4ui]

How did you add reload image in the AddNote.js component ?

[@deepankarsharma7037]

Notes are not getting saved, any suggestions. I followed the same code

[@AnushaLanka-j6k]

I have written the code using class based component....after writing a text and save the note it is inserting in the DOM...but after restarting the application the newnote is not existing...can anyone respond....Thanks in advance

[@BrianVeitch]

What extension are you using that reformats everything when you save?

[@hyoolvr]

When I first started I could import samples but now everti I do so it just gives the soft 1. I want to cut, stretch and edit the