React Notes App Tutorial for Beginners 2023 | React JS Beginner Project Tutorials

In this tutorial, I'm going to teach you step-by-step, how to build a modern responsive react notes app from scratch! This might be the best notes app tutorial available on the internet, and this tutorial can give you a good foundation to how react works. Code along with me and by the end of this tutorial, you will have a fully functioning notes app created!

Timestamps
00:00 Intro (Demo)
04:52 Udemy React Portfolio Ad
05:54 Hosting & Free Domain
09:41 Create React App
12:00 Project Folder Structure
18:25 Creating Routes with react router dom
21:48 Notes page design
35:32 Create Note page design
38:35 Edit Note page design
40:00 Create Note functionality
51:23 useCreateDate Custom Hook
01:02:30 Saving Notes to Local Storage
01:06:00 Edit Note functionality
01:18:43 Delete Note functionality
01:20:53 Search Note functionality
01:35:30 Project Deployment

[israelbosun]

😁😁🥰😊, anytime I see your react tutorials, my heart leaps for Joy. Thanks for all the good works man.

[jivara]

in the search functionlaty you can just filter the data in the jsx by saying (data.filter((note) => => // here return the jsx )

[swastikpatel]

really awesome project, helped me alot, can't thank you enough, keep up your good work...👍👍

[oghenefejiroprinceimene]

thank you so much, your projects are always wonderful and your explanation is simple straight forward and easy to understand. you literally turn react into abcd. thank you once again.

[hycenthjr]

Good day Egator. I'm a big fan of your work, I have learned so much from you and I am grateful for coming across your amazing work. I will appreciate it if you can be my mentor.

[akintobiafeez]

Well done bro, you are doing a nice job. Thanks so much

[aniokechukwudi]

You are so good man, thanks for this.

[youtubeuser]

Just got the notification, I am going to build this tonight

[МаксВайнер-уч]

Thank you. A lot of useful information

[faisalsheikh]

Please make more video help me alot thanks

[mickymec]

can you make more project like this... like todo app, note app with more features such as a image, text formatting

[ghury]

which vs code theme are you using here?

[techtunnel]

I created the handleForm function in EditNote component as below, is there any issue with it? It seems to work fine for me.

const handleForm = (e) => {
e.preventDefault();

if (title && details) {
note.title = title;
note.details = details;
note.date = date;

navigate('/');
}
}

[diggerdog]

Egator, thanks for the lesson!
Can you answer the question, in order to do this project, do I have to learn the whole react? Sorry for the stupid question.

Please keep doing projects for newcomers, they are very important!

[yusuffikrimustanir]

Hi bos, can you make some of course at udemy again? Im very excited😁

[shoaibkhan-gccq]

I m getting error : -- cannot read properties of undefined (reading 'find') in editNote.jsx file in lone no 9. how to solve can u help?

[markokafor]

Nice one! For the Edit note functionality at 1:09:54, i think there is a better way to get the note. In NoteItem.jsx component, Link has a state prop so you can pass the note like this:
<Link state={{ note }} />

then in the EditNote.jsx, react-router-dom has a useLocation hook like so:
const location = useLocation();
const { note } = location.state;
console.log({ note })

[techtunnel]

How do we get the random background color for the notes as you've shown in the thumbnail?

[parvgugnani]

you can use alt +tab rather than using mouse
also please work on your mice or way of communication i am not saying its bad
it is good just need to improve the quality

[naveenchikkamath]

I want to improve my css specially responsive of application in which I struggle a lot. but this project, css code is readymade, sad.