React with TypeScript Crash Course

[@devjay2288]

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.

[@laithacademy]

Thanks Giannis! When it comes to the Heat, you're straight to the point as well

[@devjay2288]

@@laithacademy NBA Finals, here we come. 🦌 FearTheDeer

[@danielgaliziani2401]

Exactly!!!!!!!

[@rabindrapatra7151]

see codevolution once

[@drozdekPty]

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

[@erdemoz2187]

One of the best React Typescript tutorials! Very clear, detailed and well articulated explanations. Thank you!

[@PovilasCiplis]

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.

[@KeKuHauPiOx]

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

[@jeremyh9841]

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.

[@akj3344]

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} )) }

[@LyonLoi]

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.

[@henriquekutner6724]

This is the best lesson I found on youtube about react with typescript. Thank you.

[@randomcell708]

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

[@guilhermefonseca3067]

Agreed, bring on the 2022 React.TS part two

[@kcapt96]

15 minute in and I can tell this is the only React TS crash course you need.

[@hsbrathen1]

Probably the best TS tutorial I've come across

[@hndk2721]

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!

[@anangyoga1381]

stumbled upon this video and then check other videos and realize that this is like gold mine for newbie programmer like me!

[@programmed509]

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

[@warisulimam3440]

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

[@brunoandradebr]

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} ))

[@matthewvaccaro8877]

Allergic to staying on the same team HAAA! Amazing

[@onkar9155]

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

[@bpglockmaster793]

I did not program since 2012 and got here the lesson that i needed to start, thank you very much

[@wmarple]

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.

[@huynhtriet444]

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.

[@ldpuri]

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.

[@adnanjpg]

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

[@aidarousjibril6323]

Laith you are the best really, the way you explaining is incredible

[@a2m2tkyo]

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.

[@gurjitsingh-ff3ll]

Amazing tutorial! Concise and good refresher if you know bit of react and typescript!

[@muhammadfaizan5969]

Thank You, this was just what I needed to understand TS with React

[@maxagliunin566]

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; }

[@AndrewMycol]

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!

[@johnherrera5913]

Master! One of the best tutorials I have ever watched. Thank you Laith

[@0xDevelopers]

Wow! Best tutorial ever! I got all missing pieces together with this one video. Keep educating !

[@Spectre4300s]

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.

[@spazzoidrat]

This is insanely great tutorial on typescript. Thanks. Keep it up!

[@danielgaliziani2401]

What a great crash class!!!! finally someone who can deliver!!!! well done mate

[@soumyajitdey5720]

Very crisp and to the point video!! Great content Laith!

[@myko_chxn]

at 18:04. when you hover over the state, how do you get the small box that displays the types required?

[@ibnulferdous]

This video explains the concept and the code. Great tutorial. Thanks Laith for teaching us.

[@henrycodingstack6952]

I have found a new react god, love your tutorials man thanks for this clean lecture.

[@bibhushankarki9194]

your explanation is so clean man!

[@judyl6325]

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!

[@jennifermagpantay7933]

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 : ))

[@erickbravo5800]

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

[@jahelsantiago]

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

[@mikezcooler]

A great and to the point pragmatic introduction. Nice one. Thanks.

[@mohammedsaber6782]

Very good tutorial, it's one the best I've ever seen. it's comprehensive and right to the point

[@arnoczkyzoltan6158]

Thanks the tutorial! About the parseInt: without the radix argument is dangerous.

[@carlosmacias8075]

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

[@ManojKarmocha]

Terrific starter course and a terrific tutor with full of awesomeness

[@tunde6159]

Lovely. Typescript is really great. Thank you for the tutorial.

[@fyriss_]

Exactly what I was looking for, thank you.

[@marufahmed7314]

Thank you. Recently i was learning TS and planing to use with React. Your video is help me to understand many things.

[@AnilThakur-wc1rd]

Thanks for sharing your knowledge. A very good lesson, and highly recommended. Great work.

[@tekk7989]

Easy to understand bc of the simple example and clear explanation!

[@Dharmachinta1986]

I love it , This is by far the amazing lesson on react with typescript out there.

[@langchen1300]

A lot of important and useful concepts are covered in a short tutorial, thank you so much!

[@jadedar6894]

I would be gladly recommend this tutorial and says don't forget to subscribe for respect. Awesome TS tutorial :)

[@Pareshbpatel]

Your Typescript Tutorial has inspired to take the leap and learn Typescript. Thanks. {2022-09-02}

[@susithra28]

One of the best course for basics ..thanks a lot

[@Arabian_Abomination]

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!

[@arjobansingh1940]

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

[@eliascotrim51]

Incredible tutorial, very good and concise!

[@zerdnelemo]

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]

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?

[@zerdnelemo]

@@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.

[@bikramjeetsingh4943]

This is the best video for react with typescript!! Thanks for this.

[@romimaximus]

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 😎👍

[@Bekstou]

Nice man, really struggling with React and Typescript. This makes it clearer, next step to try and apply these concepts myself. Cheers!

[@emelielindborg]

Thank you so much for an easy to follow video!

[@codeWithMeEasy]

Great can we expect more videos on React-Typescript applications

[@hasibulhasansiju]

An amazing overview of typescript for beginners like me... Thank you so much

[@nbo304]

Love this thank you. Just what I needed.

[@thru_and_thru]

Amazing work man!! Really enjoyed this and it was super helpful!! Thank you!!

[@WildHowlYT]

Typescript is next level 🔥

[@myst.youtube]

Love this tutorial

[@jamoliddinz]

thank you, i'm learning so many things from you

[@albinoiiicordova4811]

Thank you for this tutorial! Very practical and everything is explained in detail.

[@frontend.made.eazzzy]

You are superb man! very clear and concise beginner friendly typescript introduction with react implemention.learn a lot thanks man

[@milanpavlovic8141]

So amazingly well explained

[@dernyt-tpe]

Thank You, this practical implementation tutorial is the best to understand TypeScript and React. Subscribed 👍

[@mmacuts7527]

Thank you so much. This tutorial is so straight to the point. Exactly what I needed to start building react apps in typescript

[@user-paint-alexandra]

Thank you! I understood all steps, it`s very useful.

[@asimsami3116]

Your explanation is awesome .. I really like it, I would to see more like this videos for the other react features. thanks.

[@Nocturnal321]

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.

[@papa_ethan]

Its simpler to put a basic Person interface then make it an array of Person as People.

[@samueldebeer2306]

Was looking for this comment. Very much agree

[@connorflewitt8377]

Holey moley! That was incredibly insightful, good work man thank you so much, your a genius!! How have you learned this much?

[@fabrizvi8386]

Keep up the greattttttt workkkk I love ur crash coursesssss XD

[@tieswestendorp9830]

21:00 Type 'never' doesn't mean it has no idea what the state is - it knows exactly what the state is, an empty list, hence people can not occur and is of type 'never'. Not knowing what the type of people is would correspond to the 'any' type.

[@leabaty7133]

Thank you, such a clean and easy tutorial !

[@RaghuprasaadIyer]

thanks great tut

[@tonypeirson6282]

Don’t be offended when Kobe Bryant doesn’t turn up for your party....

[@BeatBustersDance]

Can We get some project which explains useCallback and useLayoutEffect, and use cases of both

[@guilhermefonseca3067]

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).

[@321123580]

I have found what I needed in your lesson, thank you

[@stanislavdubuk9336]

Thank you for a great crash course :)

[@ddikodroid]

React Native with RTK and React Navigation please! Your videos are great

[@EmilYOo0]

this is essentially a very good actually intro to typescript with react (essentially)

[@bakedbrotatoes]

“You see, we can basically actually essentially do this, essentially actually basically”

[@acivoj86]

Wow, such a good video. Very well explained.

[@dunyan1586]

A tip right here hehe: break the course only into short sections like @netninja, and have separate branches for each video

[@dragonborn1996]

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 ?

[@onthecodeagain]

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

[@dragonborn1996]

@@onthecodeagain Thank you so much sir, I understand it now

[@daviesray6242]

Great content man!