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.
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
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.
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... 😭🤔
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 ```
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!
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
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!
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)
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!
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?
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
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'.
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!?
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.
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.
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
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
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.
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 ?
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.
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!
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.
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.
![How to Become Chatbot Developer? - [Hindi] - Quick Support](http://i.ytimg.com/vi/8AlnT1_qywg/mqdefault.jpg)
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
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.
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
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!
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
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!
Oh man so excited that you made this, many thanks!
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... 😭🤔
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?😊
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 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!
You are simply the best. Great work kyle, Keep it coming. Thanks a lot for these videos.
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 so much for this wonderful tutorial! Many thanks from South Korea :D😀
Thank you for all your videos and teaching.
Holy shit I finally followed everything! Good job to myself!!!
Thanks Kyle, very interesting! God bless you!
Really, this is my one of the best programming channesl! Interesting and usefull information. 😇 Nice explanation and cool ideas :)
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!
Really like your video, please make more tutorial about typescript, and may be full stack react-project with docker/docker compose
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?
great project mate, thank you for sharing
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.
Starting it now thanks man ❤
Yo Kyle, what about Angular? I would love to see a series on Angular!
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
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 for your great contents 💯💯💯💯 really appreciate your work 🙏🙏🙏🙏
This is a masterpiece
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
Kyle, you're THE GOAT!!!
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
i wish you did videos like this using Angular cuz your explanations are god like..
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.
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
Ok thats not for me I stuck at 17:30 this is going too fast to understand I just give up.
Great stuff. Thanks 👍
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!?
Merci pour le tuto!
I was just about to create a similar project, but in svelte. 😂
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.
Please do a project on in-browser markdown with React(typescript). Thank you
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.
Markdown is a really outdated 90s era method of formatting that I wish had been forgotten to time.
thanks a lot ♥️♥️
Can anyone pls explain how useNote is working in all components 😢😢
Man,.. seems to be too far beyond my head yet,.but sounds amazing
I love the useLocalStorage hook
it doesnt actually work
Thanks wds for this project
thanks for great content
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
why are you not using the id directly on rawData instead of creating a sepaarte type raw with just id?
please do a tutorial on how to create an in-browser markdown editor tool. please use React and Typescript, styled components. thank you
I see React + TS, I like
Hello, I just create my channel, can you support?😊
perfect lesson!
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
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.
thanks for the video, but please could you add the link 10:37 thanks a lot
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 ?
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.
whats better? highlight or posthog?
MERN + RTK QUERY + TYPESCRIPT ADVANCE Project please ❤❤❤❤
Thanks bro!!!!
why do you not use ESLINT ? is not necesary for you or what is your opinion for this?
THANK YOU FOR THE AMAZING VIDEO MATE. Please consider our request to stop using bootstrap. Please!
Maybe the video was recorded more than one month ago, right?
You are using the old routing system😊
Thanks Boss!
Would you be able to put together a crash course on DynamoDB and HTTP Module?
Hello, I just create my channel, can you support?😊
How is he running the TypeScript without compiling and getting duplicate JavaScript files? I've been trying to do this.
will all the notes be persistent through refreshes ?
Can you make a video on microfrontends
map function on useMemo in App.tsx is throwink an TypeError and breakes the application
why are you filtering based on title and not the id?
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!
Why did he use types to define the structure of the notes instead of an interface?
why are you using useref instead of usestate
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?
Bootstrap is good for the prototype
Hello, I just create my channel, can you support?😊
It definitely got sweaty 20 mins in ..
So advanced =))).
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.
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.
and me who was lying to myself that I knew enough typescript
Thanks.
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 will be learning that tommorrow, time for Counter Strike.
thanks
You may prefer daisyui over bootstrap
Nice!
please same project with vanilla js
pls make this using NEXT JS
Amazing video! You could use React.useState, React.useRef etc... instead of importing them.
thanks🙏🙏🙏🙏🙏
25:39
40:08