I watched that through and I am completly lost due to lack of explenation what data will be used further down the line (eg object structures of localStorage, tabs notes etc), this is a common tutorials' problem, but I got a better understanding how the types work. Thanks
He's Goated. There's sooo many tutorials out there where you legit do the same as the video and you get a bunch of errors. Mostly because they become outdated, of course.
This was great for practicing my MERN Stack skills, I add a custom backed to this project using NestJS, Mongo, and Prisma + User accounts. Glad to see more opportunities to practice my Frontend + Backed skills. Thanks!!! Edit: I just replaced Bootstrap with Tailwind in my project cuz I can't stand Bootsrap lol.
Thank you for showing us how to do this typescript project, I really learnt a lot especially about that custom hook which I'm quite sure is actually used a lot in many projects. I also like to highlight that the people behind react router are the same ones developing the Remix fullstack framework and both use the same names for variables and functions eg. Outlet, Link, useLoaderData, useParams, useActionData etc. I was hoping that if you're a keen user of react router you could show us how to implement a fullstack app with Remix too. 😊
just completed - as a novice to TS with a minimal understanding of React, it took me about 4 hours something broke towards the end and I had to spend a fair amount of time digging through the code (it was the use of a colon instead of =, lol) I'm excited to make some tweaks + stylize / modularize as needed! thanks, Kyle, for another super useful and concise tutorial :)
That happens every time I learn something new. It does get to a point though when you know exactly what to look for in clean code and debugging! Keep it up!
If you don't want a certain property of an object, you can use the `Omit` type to omit said property in the resulting type. That may be more practical if there's not much change. ``` type SimplifiedNote = Omit ```
Hi, just finished this project with your help, thanks. Amazing video as aways. One small adjustment I would make is when we delete a note, also delete the tags associated with this note (in the case when they are not associated with a diferent note)
As with all coding tutorials: 10-15 mins in = "Wow, I get all this, I'm actually understanding how to code".... 15+ minutes = "I have no idea what's going on, I'm an imposter, I have zero clue about coding" lol
Thank you for this video. I have been posting web dev content using HTML and CSS, but am interested in learning React. These types of videos will help me a ton!
These Note & RawNote, NoteData & RawNoteData thing... are super confused.. like 28:49, the onCreateNote function, it takes a NoteData as a parameter, and in the function it calls setNotes function, which takes prevNotes as parameter, which supposed to return an array of RawNote. However, it returns an array with prevNotes, and {data, id, tagsIds}.... so confused... 😭🤔
Thank you for this interesting tutorial! I think this is more for middle developers, I didn't understand some parts. The only thing is that when you delete a note, the associated tag remains in the list even if there is no notes with this tag anymore. So it makes sense to inject an algorithm that deletes a tag which has no associated note.
Could you create such or a bigger app using sass/scss please? Because there’s no such content on youtube that explains style side and its folder structure etc. I mean ofc there are but they don’t show how to use in bigger projects. I know basic sass/scss features. But i struggle using it in a bigger project
Should you ever run out of ideas for tutorials, I would be happy ti see you build (and test!) a project with a cron-like funtionality, ie. sending reminders at a specific time.
Others have. Basically you have no chance if you're just applying to jobs. Too few jobs and way too many people looking. It will come down to pure networking, and getting to know people personally and personally helping out on projects, paid or not to get known. That's essentially the only way in now.
Thank you man for the amazing project! After completion, I am trying to implement Unit Testing using React Testing Lib and Jest. Any resources and suggestions for it!?
Kyle! love your content bro. But yo check it's pronounced "Veet" lol. It's a french term meaning "to be quick". I've heard ya pronounce it Veet before, but we gotta keep the french alive! lol cheers
Have a bug when trying to style the NoteCard component at 48:36, vscode is saying styles.card is deprecated. Anyone one else get this issue or know how to fix it? Thanks!
how to implement passing "onSubmit" function 29:00 in NextJs... i`ve created 2 page 1 for "home-page" , and 1 for "new-page" and I was writing code at "home-page" and suddenly I just wondering how to pass "onSubmit" function to another page... and I think its impossible ? but I understand that I was wrong to put code at "home-page" but where should I put the code?
I want to ask a question to someone who has already finished this video. Is it worth watching this video(just to learn some advanced typescript) ? I mean there are lot of typescript with react videos where they just create some basic interfaces and types and whenever they encounter some type error they just use "any" and say "we can ignore it for now". Is this video different than others ?
For me a got this problem: Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element// but I could be fixed when asked google: Your react-router-dom is at version "^5.2.2" while your @types/react-router-dom is set to "^5.1.7". There is also a difference in your react-dom versions. Your react-dom is at version "^16.8.6" while your @types/react-dom is set to "^16.8.12". Try doing: npm i react@16 react-dom@16 react-router-dom@5 @types/react@16 @types/react-dom@16 @types/react-router-dom@5 doing that solved it.. If anyone else got the same problem.
I was wondering the same thing too. Probably habit. BTW you're talking about Function Expressions, not Function Declarations, Function Expressions happen to use the arrow in modern usage. The main benefit to Function Expressions are that you need to define them before using them, which makes the code more readable, but I guess it doesn't matter so much for components.
Please help me out of this problem with my nodejs application " Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)" i am new to nodejs
Everyone has this problem, not just you. Therefore, you need to start with very simple projects, and then gradually make more complex ones. Otherwise, it won't work.
Anybody else running into this issue at 28:52 in the onCreateNote function? Typescript compiler is giving me an error Argument of type '(prevNotes: RawNote[]) => (RawNote | { id: string; tagIds: void[]; title: string; markdown: string; })[]' is not assignable to parameter of type 'SetStateAction'.
17:53 - That explanation on the required fields is not accurate. The non-null assertion operator (!) is applied to the "current" key, which relates to the input DOM element itself, not its value. Other than that, nice tutorial. Thanks!
Seriously amazing stuff. I've been studying by Kyle's content for over 3 years now. Just so grateful he makes content.
24:50 you can use "as const" to indicate that the array is actually a tuple for the compiler
Kyle is back from the dead and this project is slapping .
I will do it , thank you!!!
I watched that through and I am completly lost due to lack of explenation what data will be used further down the line (eg object structures of localStorage, tabs notes etc), this is a common tutorials' problem, but I got a better understanding how the types work. Thanks
excellent video! No errors after doing EXACTLY as you instructed and the result is a SOLID TS project. Thanks !!!!
He's Goated. There's sooo many tutorials out there where you legit do the same as the video and you get a bunch of errors. Mostly because they become outdated, of course.
This was great for practicing my MERN Stack skills, I add a custom backed to this project using NestJS, Mongo, and Prisma + User accounts. Glad to see more opportunities to practice my Frontend + Backed skills. Thanks!!!
Edit: I just replaced Bootstrap with Tailwind in my project cuz I can't stand Bootsrap lol.
Great work buddy! Same lol, I also can't stand Bootstrap. Tailwind for the win
NIce work! would you mind sharing the GitHub link for it? I'd love to go through it and follow to make my own too
Ty man, the exact needed proyect for improving my skills, i was trapped in jsx and with this its a lot of help to get my feet into Typescript, Kudos!
I'm just at the beginning of the course and looking forward to finishing it. Left a like on the video anyway cos i know it will be good!
Thank you for showing us how to do this typescript project, I really learnt a lot especially about that custom hook which I'm quite sure is actually used a lot in many projects.
I also like to highlight that the people behind react router are the same ones developing the Remix fullstack framework and both use the same names for variables and functions eg. Outlet, Link, useLoaderData, useParams, useActionData etc. I was hoping that if you're a keen user of react router you could show us how to implement a fullstack app with Remix too. 😊
Oh man so excited that you made this, many thanks!
just completed - as a novice to TS with a minimal understanding of React, it took me about 4 hours
something broke towards the end and I had to spend a fair amount of time digging through the code (it was the use of a colon instead of =, lol)
I'm excited to make some tweaks + stylize / modularize as needed!
thanks, Kyle, for another super useful and concise tutorial :)
That happens every time I learn something new. It does get to a point though when you know exactly what to look for in clean code and debugging! Keep it up!
Thanks for the great content. I haven't worked much with TypeScript but can see the benefits of using it. This was an amazing tutorial!!!
Nice tutorial, as a beginner (needed to change the speed to 0.75 but) good to follow!
Thank you for all your videos and teaching.
Holy shit I finally followed everything! Good job to myself!!!
Thank you so much for this wonderful tutorial! Many thanks from South Korea :D😀
Really like your video, please make more tutorial about typescript, and may be full stack react-project with docker/docker compose
If you don't want a certain property of an object, you can use the `Omit` type to omit said property in the resulting type. That may be more practical if there's not much change.
```
type SimplifiedNote = Omit
```
Hello, I just create my channel, can you support?😊
You are simply the best. Great work kyle, Keep it coming. Thanks a lot for these videos.
Hi, just finished this project with your help, thanks. Amazing video as aways.
One small adjustment I would make is when we delete a note, also delete the tags associated with this note (in the case when they are not associated with a diferent note)
can we make this just using react?
Really, this is my one of the best programming channesl! Interesting and usefull information. 😇 Nice explanation and cool ideas :)
Thanks Kyle, very interesting! God bless you!
As with all coding tutorials: 10-15 mins in = "Wow, I get all this, I'm actually understanding how to code".... 15+ minutes = "I have no idea what's going on, I'm an imposter, I have zero clue about coding" lol
great project mate, thank you for sharing
Thank you for this video. I have been posting web dev content using HTML and CSS, but am interested in learning React. These types of videos will help me a ton!
Learn Next.js it is used in many commercial projects
@@gubatenkov Yes, Next.js is on my list! Thank you for the tip 😀
@@gubatenkov React isn't using next.js? When you type create react app?
Learn JS first
@@muhammaderza7097 That sounds sensible. Thank you for the tip!
thank you, i was planning on making something like this to replace Standard Notes and bundle it with tauri
Kyle, you're THE GOAT!!!
This is a masterpiece
These Note & RawNote, NoteData & RawNoteData thing... are super confused.. like 28:49, the onCreateNote function, it takes a NoteData as a parameter, and in the function it calls setNotes function, which takes prevNotes as parameter, which supposed to return an array of RawNote. However, it returns an array with prevNotes, and {data, id, tagsIds}.... so confused... 😭🤔
Starting it now thanks man ❤
thanks for your great contents 💯💯💯💯 really appreciate your work 🙏🙏🙏🙏
Merci pour le tuto!
Thank you for this interesting tutorial! I think this is more for middle developers, I didn't understand some parts.
The only thing is that when you delete a note, the associated tag remains in the list even if there is no notes with this tag anymore. So it makes sense to inject an algorithm that deletes a tag which has no associated note.
Could you create such or a bigger app using sass/scss please? Because there’s no such content on youtube that explains style side and its folder structure etc. I mean ofc there are but they don’t show how to use in bigger projects. I know basic sass/scss features. But i struggle using it in a bigger project
Please do a project on in-browser markdown with React(typescript). Thank you
Yo Kyle, what about Angular? I would love to see a series on Angular!
i wish you did videos like this using Angular cuz your explanations are god like..
Should you ever run out of ideas for tutorials, I would be happy ti see you build (and test!) a project with a cron-like funtionality, ie. sending reminders at a specific time.
I was just about to create a similar project, but in svelte. 😂
Kyle, can you do a video about tech layoffs and what it means for self-taught and new grads applying? Thanks 🙏🏻
Others have. Basically you have no chance if you're just applying to jobs. Too few jobs and way too many people looking. It will come down to pure networking, and getting to know people personally and personally helping out on projects, paid or not to get known. That's essentially the only way in now.
Thank you man for the amazing project! After completion, I am trying to implement Unit Testing using React Testing Lib and Jest. Any resources and suggestions for it!?
Kyle! love your content bro. But yo check it's pronounced "Veet" lol. It's a french term meaning "to be quick". I've heard ya pronounce it Veet before, but we gotta keep the french alive! lol cheers
Great stuff. Thanks 👍
please do a tutorial on how to create an in-browser markdown editor tool. please use React and Typescript, styled components. thank you
Kyle I was trying the as prop and it's not working I think you faced the same problem since you always used the as={link} instead of nesting elements
Thanks wds for this project
Maybe the video was recorded more than one month ago, right?
You are using the old routing system😊
thanks for great content
Man,.. seems to be too far beyond my head yet,.but sounds amazing
perfect lesson!
How do you prevent the page from refreshing when trying to edit a tag? I can't see how it is working on his end the way its currently coded.
Have a bug when trying to style the NoteCard component at 48:36, vscode is saying styles.card is deprecated. Anyone one else get this issue or know how to fix it? Thanks!
I see React + TS, I like
Hello, I just create my channel, can you support?😊
THANK YOU FOR THE AMAZING VIDEO MATE. Please consider our request to stop using bootstrap. Please!
thanks a lot ♥️♥️
how to implement passing "onSubmit" function 29:00 in NextJs... i`ve created 2 page 1 for "home-page" , and 1 for "new-page" and I was writing code at "home-page" and suddenly I just wondering how to pass "onSubmit" function to another page... and I think its impossible ? but I understand that I was wrong to put code at "home-page" but where should I put the code?
Thanks Boss!
Markdown is a really outdated 90s era method of formatting that I wish had been forgotten to time.
Thanks bro!!!!
Nice valuable tutorial and coding with TS just makes it a hell of a lot better project. One question can I use MUI instead of react-bootstrap?
How is he running the TypeScript without compiling and getting duplicate JavaScript files? I've been trying to do this.
Saw the video intro and seems like a 3-day task since I never worked wi TS. Will dedicate these 3 days specifically for this.
Bootstrap is good for the prototype
Hello, I just create my channel, can you support?😊
So advanced =))).
Would you be able to put together a crash course on DynamoDB and HTTP Module?
Hello, I just create my channel, can you support?😊
I want to ask a question to someone who has already finished this video. Is it worth watching this video(just to learn some advanced typescript) ? I mean there are lot of typescript with react videos where they just create some basic interfaces and types and whenever they encounter some type error they just use "any" and say "we can ignore it for now". Is this video different than others ?
map function on useMemo in App.tsx is throwink an TypeError and breakes the application
For me a got this problem: Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element// but I could be fixed when asked google:
Your react-router-dom is at version "^5.2.2" while your @types/react-router-dom is set to "^5.1.7".
There is also a difference in your react-dom versions. Your react-dom is at version "^16.8.6" while your @types/react-dom is set to "^16.8.12".
Try doing: npm i react@16 react-dom@16 react-router-dom@5 @types/react@16 @types/react-dom@16 @types/react-router-dom@5
doing that solved it.. If anyone else got the same problem.
I love the useLocalStorage hook
it doesnt actually work
Thanks.
why do you not use ESLINT ? is not necesary for you or what is your opinion for this?
Can anyone pls explain how useNote is working in all components 😢😢
MERN + RTK QUERY + TYPESCRIPT ADVANCE Project please ❤❤❤❤
Why are you not using arrow functions components? any reason for that
I was wondering the same thing too. Probably habit. BTW you're talking about Function Expressions, not Function Declarations, Function Expressions happen to use the arrow in modern usage. The main benefit to Function Expressions are that you need to define them before using them, which makes the code more readable, but I guess it doesn't matter so much for components.
Awesome!
Why did he use types to define the structure of the notes instead of an interface?
Please help me out of this problem with my nodejs application " Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”)" i am new to nodejs
You may prefer daisyui over bootstrap
thanks for the video, but please could you add the link 10:37 thanks a lot
Ok thats not for me I stuck at 17:30 this is going too fast to understand I just give up.
thanks
I can follow the tutorial and understand it but I can't really do it on my own, How can I change that?
Everyone has this problem, not just you. Therefore, you need to start with very simple projects, and then gradually make more complex ones. Otherwise, it won't work.
Can you make a video on microfrontends
Nice!
Anybody else running into this issue at 28:52 in the onCreateNote function? Typescript compiler is giving me an error Argument of type '(prevNotes: RawNote[]) => (RawNote | { id: string; tagIds: void[]; title: string; markdown: string; })[]' is not assignable to parameter of type 'SetStateAction'.
you might have forgot a return statement if you are using curly braces, otherwise you can use paranthesis
17:53 - That explanation on the required fields is not accurate. The non-null assertion operator (!) is applied to the "current" key, which relates to the input DOM element itself, not its value. Other than that, nice tutorial. Thanks!
Amazing video! You could use React.useState, React.useRef etc... instead of importing them.
thank sir
It definitely got sweaty 20 mins in ..
Good!
Dejavu, coz I've done those ;)
will all the notes be persistent through refreshes ?
Dude I put you on .05 playback speed just to keep up
That's par for the course for most tutorials; they're edited to be around an hour, so you need to listen slow and pause a lot to stay with them.
pls make this using NEXT JS
please same project with vanilla js
Tailwind all Dae
thanks🙏🙏🙏🙏🙏
and me who was lying to myself that I knew enough typescript
iling iling
I will be learning that tommorrow, time for Counter Strike.