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

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

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

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

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

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

[@erdemoz2187]

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

[@henriquekutner6724]

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

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

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

[@bpglockmaster793]

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

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

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

[@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!

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

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

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

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

[@matthewvaccaro8877]

Allergic to staying on the same team HAAA! Amazing

[@kcapt96]

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

[@anangyoga1381]

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

[@muhammadfaizan5969]

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

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

[@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!

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

[@0xDevelopers]

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

[@spazzoidrat]

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

[@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!

[@aidarousjibril6323]

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

[@hsbrathen1]

Probably the best TS tutorial I've come across

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

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

[@johnherrera5913]

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

[@mohammedsaber6782]

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

[@ibnulferdous2349]

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

[@soumyajitdey5720]

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

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

[@danielgaliziani2401]

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

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

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

[@henrycodingstack6952]

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

[@arnoczkyzoltan6158]

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

[@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!

[@Pareshbpatel]

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

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

[@mikezcooler]

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

[@marufahmed7314]

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

[@nbo304]

Love this thank you. Just what I needed.

[@bibhushankarki9194]

your explanation is so clean man!

[@dernyt-tpe]

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

[@albinoiiicordova4811]

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

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

[@AnilThakur-wc1rd]

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

[@ManojKarmocha]

Terrific starter course and a terrific tutor with full of awesomeness

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

[@Bekstou]

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

[@tunde6159]

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

[@fyriss_]

Exactly what I was looking for, thank you.

[@jadedar6894]

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

[@tekk7989]

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

[@mmacuts7527]

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

[@emelielindborg]

Thank you so much for an easy to follow video!

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

[@bikramjeetsingh4943]

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

[@Dharmachinta1986]

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

[@eliascotrim51]

Incredible tutorial, very good and concise!

[@susithra28]

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

[@hasibulhasansiju]

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

[@EmilYOo0]

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

[@frontend.made.eazzzy]

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

[@WildHowlYT]

Typescript is next level 🔥

[@thru_and_thru]

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

[@milanpavlovic8141]

So amazingly well explained

[@tomasburian6550]

This was great. Thanks, brother.

[@codeWithMeEasy]

Great can we expect more videos on React-Typescript applications

[@asimsami3116]

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

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

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

[@langchen1300]

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

[@myst.youtube]

Love this tutorial

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

[@user-paint-alexandra]

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

[@jamoliddinz]

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

[@dainsleif3122]

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.

[@connorflewitt8377]

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

[@leabaty7133]

Thank you, such a clean and easy tutorial !

[@tonypeirson6282]

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

[@dunyan1586]

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

[@bakedbrotatoes]

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

[@prudhvirajmudunuri510]

Thank You so much!! Really useful

[@myko_chxn]

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

[@321123580]

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

[@juguetestoys1137]

great !! please add save data storage, load data from a json file, and delete function

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

[@gandalfgrey91]

Great tutorial; I would cut back on the phrase "we can go ahead and..." though.

[@rjc4200]

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 !

[@pankarton5950]

Great video!! But one thing. Instead of passing people state in props you could just write setPeople(prev => ([...prev, input]) xD

[@daviesray6242]

Great content man!

[@umairarif6825]

You can define the setPeople Interface as setPeople: (people: Props["people"]) => void