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.
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 ```
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 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!
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
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.
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.
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!?
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)
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.
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
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 ?
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?
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.
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
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!
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.
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'.
I was wondering if it would in fact be required to consider the function type in initialValue, because the hook is only called with the ("NOTES/TAGS", []) arguments, not the function format. Thanks for sharing
