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
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.
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 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
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.
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.
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.
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
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.
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
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 : ))
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.
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!
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).
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
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!
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: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} ))
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
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
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 😎👍
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.
1- Why didn't you use ? 2-Passing "setPeople" to child component my cause problem with bigger state implementation , think of creating function that change the state rather than updated directly from a child component using setState/setPeople
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 => (
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.
Many thanks for the tutorial! I didn't know that I could have props by using generic with React.FC. 😯 Could I only use empty string ("") like the video shows, or is there some way to have input.age initialize with 0? I just had a problem with the input state. Due to the fact that I expect age should have a default to 0 (as a number type), TypeScript doesn't know that I will update the value from user inputs which is a string type.
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 ]);
This is by far the best lesson on react with typescript out there. It's straight to the point with real world use cases and great explanation.
Thanks Giannis! When it comes to the Heat, you're straight to the point as well
@@laithacademy NBA Finals, here we come. 🦌 FearTheDeer
Exactly!!!!!!!
see codevolution once
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
One of the best React Typescript tutorials! Very clear, detailed and well articulated explanations. Thank you!
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.
I'm currently in a bootcamp for frontend JS. We just completed React but I was really lost. This was the most concise react video I have ever seen
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
Agreed, bring on the 2022 React.TS part two
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.
Probably the best TS tutorial I've come across
stumbled upon this video and then check other videos and realize that this is like gold mine for newbie programmer like me!
15 minute in and I can tell this is the only React TS crash course you need.
Amazing tutorial! Concise and good refresher if you know bit of react and typescript!
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
Laith you are the best really, the way you explaining is incredible
I did not program since 2012 and got here the lesson that i needed to start, thank you very much
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.
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.
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.
This is the best lesson I found on youtube about react with typescript. Thank you.
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
i work as a software developer , i would say its the best course to learn real use cases and the explanation is exact also better than other courses
This video explains the concept and the code. Great tutorial. Thanks Laith for teaching us.
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.
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
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;
}
Thank You, this was just what I needed to understand TS with React
Allergic to staying on the same team HAAA! Amazing
Master! One of the best tutorials I have ever watched. Thank you Laith
This is insanely great tutorial on typescript. Thanks. Keep it up!
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 : ))
Wow! Best tutorial ever! I got all missing pieces together with this one video. Keep educating !
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.
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!
I have found a new react god, love your tutorials man thanks for this clean lecture.
Very crisp and to the point video!! Great content Laith!
Thanks the tutorial! About the parseInt: without the radix argument is dangerous.
Thank you. Recently i was learning TS and planing to use with React. Your video is help me to understand many things.
Thanks for sharing your knowledge. A very good lesson, and highly recommended. Great work.
What a great crash class!!!! finally someone who can deliver!!!! well done mate
Hey, i ve just discovered your channel and you have a lot of potential, I am a new subscriber and I will recommend this channel with my friends
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).
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
Thanks Laith, i just started learning Typescript and I am loving it since I come from an OOP language like Java initially. JS + Types is amazing!
I would be gladly recommend this tutorial and says don't forget to subscribe for respect. Awesome TS tutorial :)
Your Typescript Tutorial has inspired to take the leap and learn Typescript. Thanks.
{2022-09-02}
Very good tutorial, it's one the best I've ever seen. it's comprehensive and right to the point
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!
your explanation is so clean man!
A great and to the point pragmatic introduction. Nice one. Thanks.
Great can we expect more videos on React-Typescript applications
One of the best course for basics ..thanks a lot
A lot of important and useful concepts are covered in a short tutorial, thank you so much!
Easy to understand bc of the simple example and clear explanation!
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
Lovely. Typescript is really great. Thank you for the tutorial.
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}
))
Terrific starter course and a terrific tutor with full of awesomeness
I love it , This is by far the amazing lesson on react with typescript out there.
Exactly what I was looking for, thank you.
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
@@onthecodeagain Thank you so much sir, I understand it now
An amazing overview of typescript for beginners like me... Thank you so much
Thank you so much for an easy to follow video!
Nice man, really struggling with React and Typescript. This makes it clearer, next step to try and apply these concepts myself. Cheers!
Incredible tutorial, very good and concise!
this is essentially a very good actually intro to typescript with react (essentially)
Amazing work man!! Really enjoyed this and it was super helpful!! Thank you!!
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
Thank you for this tutorial! Very practical and everything is explained in detail.
This is the best video for react with typescript!! Thanks for this.
Can We get some project which explains useCallback and useLayoutEffect, and use cases of both
Thank You, this practical implementation tutorial is the best to understand TypeScript and React. Subscribed 👍
You are superb man! very clear and concise beginner friendly typescript introduction with react implemention.learn a lot thanks man
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 😎👍
Thank you! I understood all steps, it`s very useful.
Typescript is next level 🔥
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.
Do you mean you create it once, for instance in the App and then export it on the files needed? or you make a separate file with all the interfaces?
@@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 so much. This tutorial is so straight to the point. Exactly what I needed to start building react apps in typescript
at 18:04. when you hover over the state, how do you get the small box that displays the types required?
thank you, i'm learning so many things from you
1- Why didn't you use ?
2-Passing "setPeople" to child component my cause problem with bigger state implementation , think of creating function that change the state rather than updated directly from a child component using setState/setPeople
Love this tutorial
Great video!! But one thing. Instead of passing people state in props you could just write setPeople(prev => ([...prev, input]) xD
Your explanation is awesome .. I really like it, I would to see more like this videos for the other react features. thanks.
Holey moley! That was incredibly insightful, good work man thank you so much, your a genius!! How have you learned this much?
Love this thank you. Just what I needed.
So amazingly well explained
This was great. Thanks, brother.
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}
))
}
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.
great !! please add save data storage, load data from a json file, and delete function
Many thanks for the tutorial! I didn't know that I could have props by using generic with React.FC. 😯
Could I only use empty string ("") like the video shows, or is there some way to have input.age initialize with 0?
I just had a problem with the input state. Due to the fact that I expect age should have a default to 0 (as a number type), TypeScript doesn't know that I will update the value from user inputs which is a string type.
Thank you, such a clean and easy tutorial !
Laith, Thanks. Just one suggestion, Please maximize the font of VS Code.
Wow, such a good video. Very well explained.
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 ]);
Excellent course. Could you create another course where you can explain using TypeScript in React-Redux Slices?. That'll be amazing! ;)
Its simpler to put a basic Person interface then make it an array of Person as People.
Was looking for this comment. Very much agree
React Native with RTK and React Navigation please! Your videos are great
Helped me a lot. Thanks you very much!