Have been working as Developer since 15years and have seen thousands of various videos. This is definitely one of the best ones have seen so far. Explained thoroughly with ease. Thank you
When you setPeople and want to add an element to the array, you can change the previous state with setPeople(prevState => [...prevState, newPeople]) instead of taking the variable ...people. I think its more safe.
Best introduction tutorial for using TS with React I've found. Would be great to have a part 2 that develops this app and teaches slightly more advanced TS with React features
This guy is 0.01% of the users/creators on youtube who actually deserve to be subscribed on. Normally I never subscribe even when being asked to. You sir are so much better than other 99% in this category.
This tutorial is actually amazing. My suggestion is going through this tutorial 2 times. For the first time, just follow exactly to make the same app. The second time, make your own app.
You deserve much more recognition because I have seen very rare youtubers who explain the concepts like the way you do... I've made my colleagues subscribe to your channel because I think it's really worth it!! Keep up the good work
Good crash course! One suggestion, when updating the people state in the AddToList component you should use the updater function version of setPeople, so that you do not need to pass people down to AddToList and this will also ensure your state updates as expected since you are updating state based on previous state value and setUpdate calls are async.
I'm struggled to use TypeScript in Vanilla JavaScript and now I have to use it in my React app, but I've found this video and bruh you explained this very well. Now, I can use TypeScript in my project without confusing the type! Thank you!
This video is geared towards more for people who are already familiar with React and TypeScript already so keep in mind before watching. Otherwise, great video! After watching, I know how to implement TypeScript in React right away.
This is actually a great crash course for people coming from other frontend frameworks. Personally I am a flutter developer and I know a thing or two about react, this course gave me a push to be able to understand starter projects and learn from them. thank you for the great efforts
This is such a great crash course on React and TS. Laith nailed the objective. I gleaned in an hour enough knowledge to dig into an inherited project using React and TS and get moving.
Before watching this tutorial, i never really understood why someone would want to use it over Javascript since it involves using types and Javascript is more forgiving. After watching this tutorial, not only did I get to see more React being used, which I am still just now 3-days into my React learning journey, this tutorial was very clear about why Typescript can be useful, and why TypeScript probably is the route to go, since it can catch mistakes that Javascript can't. Very well done!
I added a delete functionality with this too by adding a delete button in the List component and creating an onClick that would pass in the person.name into a function that would search for the indexOf the object that has that person.name. Then array splice based on that position and thus that list item is deleted. You would have to add the same interface with people and setPeople as you added in AddToList to accomplish this.
One of the best crash courses I've ever watched. The quality of the content is way higher than just one like can appreciate for. I would say each of the sections deserves a like, but alas, youtube. Earned a new subscriber! : D
One thing I use to do is to define the interface inside each component file, then export it, so I can import it from the parent component and use to prepare the data that I will pass back to the child component. That way I don't need to repeat myself with that already defined interface.
@@marcocorapi5333 No, actually each component will have their own interface defined in the same file. Then I just export the interface and when I need to use that component somewhere in the code i do `import MyComponent, { MyComponentProps } from 'components/MyComponent.jsx'` Here MyComponentProps is the interface for this component. If you have a big app it can become messy to have all the interfaces in just one file. Interfaces inside of each componente make more sense to me.
Thank you for putting this together! Watched dozens of videos on Typescript and this one that finally clicked for me. The use cases that apply to React were exactly what I needed.
Extremely useful! I found an issue in CSS. Css flex-box should be in a .List-header not in a .List. Example below: .List { list-style: none; align-items: center; width: 50rem; margin: 0rem auto; border: 0.1rem solid rgba(0, 0, 0, 0.233); padding: 1rem; } .List-header { display: flex; align-items: center; width: 100%; justify-content: space-between; }
One of the best crash courses I have seen so far! Great explanation and valuable tips to figure out the correct types to add to elements! I have suffered to add the correct types to events, but now I know what to do hahah Thanks for sharing : ))
Great tutorial for React with Typescript! I was really struggling with learning React and Typescript separately so it was super useful to see them implemented together like this, thank you so much!
Holy shit. thank you. Better typescript React tutorial than all the other prominent youtube programmers out there. I can name all the others but I wont do it lol
39:49 Instead of 2 returns, we can convert curly bracket into round bracket, which implies return without having to write the word 'return'. const renderList = ():JSX.Element[] => { return people.map(person => ( {person.name} {person.age} years old {person.note} )) }
This Typescript is pain !! it takes forever to build a simple app, and imagine buiding a Big e-comerce, and try remember all this, while building a complex "redux state", functions, actions, cart, locastorage, log in and log out, api requests calls and..etc...but your tutorial is very well clear and awesome explained thank you very much 😎👍
This was great. I already had some very basic knowledge on how typescript works with React with interfaces, defining types and all that, but I was always having a hard time guessing the types to declare each thing for what it was and your process helped a lot. Thank you
39:00 You could do like this for a cleaner sintax : // ( instead of { means you want to return anything after ( without the need of reserved "return" word. people.map((person) => ( {person} ))
The typescript related stuff was really good. But as you have made this video for people who already knew react. So why not try to use best practices of react where ever possible. 1) example when we want to set new state and also need previous state, you could have used functional approach in setting state(Recommended by React itself) Basically passing callback to setState function whose return value would be new state, and that callback will get previous state as first paramter. So in AddTodoList component, we do not even need people as prop, just setPeople will do the work. We could just do the following: setPeople((prevPeopleState) => […prevPeopleState, newPersonObj]; Here newPersonObj would be the new object of name, age, img and note values. And here I am passing a callback to setPeople whose return value of newArray would be new state of people. And as shown in code this callback eill get previous people state as first parameter. And React recommends this way, this prevent race conditions and helpful in many more cases. Refer React docs for more info. 2) we should always pass key to elements/components when ever we want to render list of elements/components
The reason why you got the error in the age, is because you stated in the state that age should be a string , ... useState({... age: "" } when spesified as a type in the input field as a number, it is a number, not a string.
Thanks for the tutorial. It helped a lot. However, in my opinion it would be better, if the AddToList component doesn’t know anything about the application. This will result in a very inflexible and hard to understand architecture. AddToList could instead simply provide a callback, which is invoked with the new person information whenever a new person is supposed to be added. Some higher-level component, which knows more about the application, can then implement this callback. Of course I understand, that this was just an example, but I’m afraid that my junior developers will copy this code and I will have to pull this mess apart.
Good one Laith. Good , to the point explanation, crisp and no beating around the bush. Oh and why don't you use ES6 feature plugin for VSCode? Rather creating a RFC skeleton by manually typing, you can use 'rfc' or etc. :) Btw, keep it up, will be waiting for more videos like this !
Weird question but which keyboard were you using whilst making this video? My wrists have killing me and think it might be due to the incline or something of my keychron k2, been thinking about the logitech ergo stuff(i do flip between windows and mac os).
Thank you for sharing this useful tutorial. I just wonder why you didn't easily use "input" object instead of putting the object again! setPeople([ ...people, input ]);
Hi, great tutorial! I have several questions regarding the AddToList component. 1. Why don't you need to pass event in the event handler function? For example, in the input- you put "onChange={handleChange}" but why isn't it "onChange={(e)=>handleChange)" ? 2. My other question is why do you need brackets around [e.target.name] when you set [e.target.name]: e.target.value ?
I can help with your questions :) 1 ) onChange triggers a function when the event is fired using {(e)=>handleChange())} will fire an anonymous function that runs the handleChange function. using onChange={handleChange} it will still fire the handleChange function but without being wrapped by an anonymous function. 2) When setting the name of a key in an object you have to surround the variable with square braces. For example idf you had a variable defined as const dog = "fido" then when you create an object const obj = {dog: "value of dog", [dog]: "value of fido" } now obj.dog will have a value and so will obj.fido
