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

In this react notes app tutorial, we will build a notes app from scratch

🚨 LINKS:

🚨 Chapters:

0:00 What we'll learn
0:36 Project setup
3:09 Notes List component
8:59 Note Component
15:13 Using CSS Grid to make the notes responsive
18:42 Adding an App Container
19:59 Making our NotesList/Note dynamic
25:30 Add new notes component
45:23 Adding note character count
50:43 Delete a note
55:16 Searching for a note
1:07:49 Toggling dark mode
1:17:55 Saving to local storage
1:24:30 Outtro

🚨 Come say Hello!

[Ash-ufsn]

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 =
const [notes, setNotes] = useState(() =>
savedNotes? savedNotes:[]
);

why didnt this happed to you?

[channel-oucl]

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 ❤

[waleedsharif]

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

[deepankarsharma]

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

[marcelaplaplerjarovsky]

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?

[molecularnut]

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.

[revatib]

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 .

[sohailansari]

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.

[ashwinm]

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

[hasansolak]

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.

[danielfaseyi]

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

[gryffindor]

why is it happening..when i am refreshing ..the changes made r gone

[KlipBuzz]

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

[mahmudulaminfahim]

My local storage is not working can anyone help me🥺🥺

[carlosduque]

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?

[saitejagatadi]

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

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

[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 <React.Strict> from index.js

[ticianomorvan]

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

[gamelovershami]

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 .