React Typescript Tutorial for Beginners

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this React Typescript Tutorial for beginners you will learn about function components, passing props, default values, passing setState, and all of the associated TS types and return types. React + Typescript!
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- Master the Coding Interview: bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Typescript Course: github.com/gitdagray/typescri...
🔗 Playlist for this Typescript Course: bit.ly/3GcNJ78
React Typescript Tutorial for Beginners
(00:00) Intro
(00:11) Welcome
(00:32) Setup & Starter Code
(03:39) Function Components
(05:16) Component Return Types
(06:24) Heading Component Example
(07:34) Old Code You May See
(10:09) Recommended Code & Default Values
(14:45) useState hook
(16:11) Simple Counter Example
(17:45) Passing Down setState & children
(21:19) Generic List Example
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: • JavaScript Full Course...
📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: github.com/typescript-cheatsh...
🔗 Typescript Official Website: www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: dev.to/destrodevshow/typescri...
🔗 Stackoverflow Survey Results: survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: www.typescriptlang.org/docs/h...
⚙ Web Dev Tools:
🔗 Vite: vitejs.dev/
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Node.js & npm: nodejs.org/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
Was this React Typescript tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#react #typescript #tutorial

[@SimPwear84]

I have something to tell you. You're a legend and you have helped me become a better Developer. Your tutorials have helped me a lot. Thank you for this series. Stay blessed. Love from Africa

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@VanPetersonKpoti]

You're a blessing for the developer community. I'm running out of words to thank you.

[@johnconnor9787]

So great!!! Very, very important topics discussed. No one talks about this. So cool. Thank you!!!

[@synt-x6458]

Would be great to see you hit 100k subs by the end of this year! Awesome job as always! Thanks 👍

[@DaveGrayTeachesCode]

Thank you!

[@vyahruthnetcherla4952]

Your efforts are amazing. It makes every one of us who wants to learn even more motivational. Thank you so much Dave❤️

[@DaveGrayTeachesCode]

You're very welcome!

[@johnychinese]

Wow Dave, I didn't think you would even add the react ts tutorial. Thank you sooo mucchhhh. You're literally saving lives with your videos 😊

[@DaveGrayTeachesCode]

You're welcome! Yes, React + TS was always in the plans. The TS series has methodically built up a good foundation of TS fundamentals before merging with React.

[@okonkwo.ify18]

Thanks Grey. I have watched tutorials on React Typescript but have been secretly waiting for you to put out one.

[@DaveGrayTeachesCode]

You're welcome! And your secret is safe with me. 😆

[@okonkwo.ify18]

@@DaveGrayTeachesCode lol

[@k303k]

Very clear explanation Thank u Dave!

[@HusamNasrullah]

Dave , love you man , you made life easy! ❤

[@alirabiei2344]

holy cow! you did it man, that's amazing I'm super excied for such amazing content. I'm sure it'll be THE BEST react typescript series on the internet

[@DaveGrayTeachesCode]

Thank you for your vote of confidence! 💯

[@Trecia_KS]

Sir, I just discovered your KZbin channel and I've been learning a lot more things effectively! I appreciate the time you put into your tutorials! Thank you, Dave :D

[@DaveGrayTeachesCode]

Welcome aboard! 🚀

[@robert_k_sam]

Thank you Dave. I really appreciate your efforts.

[@DaveGrayTeachesCode]

You are very welcome!

[@kishoreandra]

Wow ... I'm excited 🤩 ... Was awaiting Thanks Dave 🙏

[@DaveGrayTeachesCode]

You're welcome!

[@lopo889]

Thank you, when i needed ts tutorial, you post it just in time

[@DaveGrayTeachesCode]

Glad I could help!

[@philippearras8154]

Dude, you have no Idea how many lives you are changing. Huge thanks !!!

[@DaveGrayTeachesCode]

You're welcome and I'm glad I could help!

[@annusingh4694]

Very Informative! Thanks Dave.

[@DaveGrayTeachesCode]

You're welcome - glad it helped!

[@adnantariq3346]

This tutorial might seem a "basic introduction" to the subject of React with using typescript, but it is NOT. It is much more, and thanks to Dave Gray's clear n simple approach, he has made what would be a difficult subject matter to follow, he has made it easy to follow. A BIG thank you! I will certainly look forward to more of your examples to follow.

[@regilearn2138]

I Really Appreciate you for this Dave, LOVE YOU DAVE ❤.Please continue this series, with a real world app

[@DaveGrayTeachesCode]

Thank you and thank you for the request!

[@Nanashi-rq7lk]

Nice Tutorial. Your content is very good

[@katieholliday6190]

I never comment on youtube videos but I just had to say THANK YOU!! I'm learning typescript for a React project and it's been so difficult to find tutorials that use the new syntax without React.FC. You explain everything in such an easy to understand way yet still manage to teach more in 30 mins than a lot of tutorials do in 2 hours. Bravo 👏👍

[@DaveGrayTeachesCode]

Happy to help and thank you for the kind words! 🙏💯

[@fixitman5453]

Right on time. I was just struggling with this today!

[@DaveGrayTeachesCode]

Glad to hear it helped!

[@abdulazeez.98]

Awesome video as always. Anything typescript is greatly welcomed! P.S. it’s a really good idea to have the hooks in one separate video. Will be helpful for reference.

[@DaveGrayTeachesCode]

Absolutely! 💯

[@dai180293]

The quality of these videos rival paid courses, thank you for all the hard work you put into making these for us, it really helps the community 👍

[@DaveGrayTeachesCode]

You're very welcome!

[@GlenGraham]

Hey Dave I know there's a super slim chance you'll see this but if you do, could you please, please do a Next.js for beginners -> intermediate video series? I'm literally surviving at my job on your videos alone (specifically the protected routes video). Thank you so much, haven't found another instructor as thorough and concise as you!

[@DaveGrayTeachesCode]

Glad I could help! Next.js is requested frequently! I plan on doing something with it early in '23!

[@lukramingo1496]

Waiting for nextjs 👍

[@hadiqadimi9540]

you are wonderfull man. thank you

[@rezakomanhs767]

Great tutorial, Thank you!

[@DaveGrayTeachesCode]

You're welcome!

[@abov1793]

your videos are always high quality!

[@DaveGrayTeachesCode]

Thank you!

[@hasbiassidiki4589]

Great video!🌟 I hope you'll do redux with typescript refactoring previous MERN Stack 👍👍

[@DaveGrayTeachesCode]

Thank you!

[@GabrielMartinez-ez9ue]

Dude, you have an incredible talent as a teacher.

[@DaveGrayTeachesCode]

Thank you!

[@inteliconn995]

Thanks again!

[@DaveGrayTeachesCode]

Welcome!

[@TravinskiyVladislav]

Thank you Dave, its on time

[@DaveGrayTeachesCode]

You're welcome Double H!

[@willyhorizont8672]

Im ready for this 🚀🚀🚀

[@DaveGrayTeachesCode]

Let's go! 💯

[@7doors847]

Super Dave!!! 🙌

[@DaveGrayTeachesCode]

Right on! 🚀

[@Reebak018]

You are amazing dave!!

[@DaveGrayTeachesCode]

Thank you!

[@kenhan168]

very informational, thanks for such a great video!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@amanverma7977]

Thanks Dave

[@DaveGrayTeachesCode]

Welcome!

[@noir4356]

I can't remember if I was one of the people who requested TS/React, but this series chimes in at the right timing 🔥

[@DaveGrayTeachesCode]

Glad to hear that!

[@sonamohialdin3376]

Awesome tutorial thank you very much

[@DaveGrayTeachesCode]

You're very welcome!

[@softwareEngineerKunwar]

great guide

[@snp4636]

Awesome waiting for this video thanks

[@DaveGrayTeachesCode]

Yes, we built a good foundation in TS leading up to this. 💯

[@imranisrar1042]

I never comment on youtube videos but I just had to say THANK YOU soo much

[@dharmeshgohil9375]

WOW ,thanks again waiting from long

[@DaveGrayTeachesCode]

You're welcome!

[@webdevuaa]

I'm leaving a comment here under this new video instead of the video I'm watching now (MERN stack app tutorial) because I want you to notice this comment. I want to say thank you for what you are doing, now for me you are the best teacher on KZbin. I really wanted to write this, because I understand how hard it is for you to give us such knowledge. Hello from Ukraine!

[@DaveGrayTeachesCode]

Thank you for the kind words and hello to Ukraine! 👋

[@karansinghnegi9384]

The best tutor on *KZbin*

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@Grishopping]

Mil Gracias, Saludo desde Venezuela tu amigo Jose Grillo

[@DaveGrayTeachesCode]

De nada Jose! And hello to Venezuela! 👋

[@Jose_911]

Excelente. Muchas Gracias .

[@DaveGrayTeachesCode]

De nada mi amigo!

[@doobofbattle9472]

At 17:30, how is prev being used to hold the value? How does prev have any idea of what counts value is? is it like a two way binding? the syntax is so confusing for me coming from C# MVC.

[@robiesalken5529]

Awesome video, as always :)

[@DaveGrayTeachesCode]

🙏🙏

[@Salah-YT]

thank u so much

[@DaveGrayTeachesCode]

You're welcome!

[@weberneting]

Thanks!

[@DaveGrayTeachesCode]

Thank you for the support! 🙏💯

[@mohammadmahdialvansaz8001]

Thank you.

[@DaveGrayTeachesCode]

Welcome!

[@IramKahkashan]

Hello Dave, Its amazing series to switch from js to ts, Please tell me one thing how can I compile my tsx code in jsx code in react just like in typescript using -w to view ts code is js in build folder? Regards.

[@MOJICA7257]

Thanks for your efforts the community appreciated it.

[@DaveGrayTeachesCode]

Thank you for the support! 💯

[@danielotienoke]

Hey Dave, Thank you very much for your great work. I'm learning a lot from the videos. Please can you do Vue + Typescript lessons 🙏

[@DaveGrayTeachesCode]

You're welcome! I have not published anything about Vue, but I may someday. www.youtube.com/@ProgramWithErik makes Vue his primary focus.

[@danielotienoke]

@@DaveGrayTeachesCode Awesome! Thank you v much.

[@michalnowak2181]

thx

[@es7729]

Thanks for valuable lessons! How long is the playlist going to be? Good luck everyone!

[@DaveGrayTeachesCode]

This is part of my Typescript series. I just follow the content with no predetermined series length.

[@es7729]

@@DaveGrayTeachesCode OK! We're ready to implement this knowledge!😁

[@michaelscofield2469]

please do more video for react typescript

[@marceugeni]

A Ma Zing. Thankyou!

[@DaveGrayTeachesCode]

Welcome!

[@elelan]

Thank you

[@DaveGrayTeachesCode]

Welcome!

[@markopolo2224]

please do more i been struggling to even make a form and get data from it in react

[@DaveGrayTeachesCode]

Might be a good start here: kzbin.info/www/bejne/mKPGeX5phZt2nrM

[@pikachu5223]

We need an advanced React TS tutorial

[@sohamnesarikar5516]

Hi dave sir, really thank you for creating such valuable courses 😊. But I want small help, can you create a tutorial for using websockets in react.

[@DaveGrayTeachesCode]

Thank you for the request!

[@milkdrom3da]

At around 23:23 why does the function need the first generic? `const List = (//blah) ={}`

[@jamshid5995]

Very Awesome 👍👍

[@DaveGrayTeachesCode]

Thank you!

[@54peace]

Love it !

[@DaveGrayTeachesCode]

Right on! 💯

[@danialalfayyadh2524]

Can you explain to me about intall the snippet ?

[@imam_robani]

that's cool !!! I hope you can also talk about react native

[@DaveGrayTeachesCode]

Thank you! I may get a chance to cover React Native in the coming year 😀

[@imam_robani]

@@DaveGrayTeachesCode I can't wait for it

[@kim92se64]

Yep its a great and very very informative video !!! Regard from Pakistan

[@DaveGrayTeachesCode]

Thank you and hello to Pakistan! 👋

[@ilan117]

Dave ❤ thank you such 🙏 As a React Developer I was searching for that only … react and typescript. Would you give us more tutorial on this in specific ? Maybe even challenges of re-creating simple react app into typescript ? I would be so thankful … btw … do you a paid full courses anywhere ?

[@DaveGrayTeachesCode]

You're welcome! It is my goal to create a paid full course in 2023. More React + TS content is coming and will be added to this Typescript playlist (link in description)

[@ilan117]

@@DaveGrayTeachesCode 🙏 don’t forget react please ❤️

[@ilan117]

@@DaveGrayTeachesCode will you be announcing the paid course here on KZbin or their is an email list we can subscribe ? I love the way you teach! I have an idea … how about short projects in react and typescript ? That would just awesome 🙏

[@DaveGrayTeachesCode]

@@ilan117 sign up for newsletter/announcements: www.getrevue.co/profile/davegrayteachescode and yes, there will be some React + TS projects 💯

[@DiegoBM]

Now I'll need to learn how to manage the anxiety until the next episode releases hehehe, another great video! Are you considering teaching Rust at some point in the future? Out of curiosity. It seems to be getting tons of traction and support from all the big actors in the tech scene.

[@DaveGrayTeachesCode]

Thank you! I've heard good things about Rust. Not on my immediate list, but there is a good chance I'll eventually get to it.

[@vincent3542]

niceee, really nice

[@DaveGrayTeachesCode]

Thanks!

[@nouchance]

DAVE 🔥

[@DaveGrayTeachesCode]

🤘🤘🤘🚀

[@eliasvasques80]

Good as always. A question, what extension do you use for the icons in the folders ?

[@DaveGrayTeachesCode]

Here you go: kzbin.info-uhzj-kjfV4

[@eliasvasques80]

@@DaveGrayTeachesCode Thanks

[@alahmad430]

Hi Dave, I wanna ask you something. Is soft delete a thing? I mean compared to hard delete what you recommend to use in small-medium business app? or it depends on what business that we run?

[@DaveGrayTeachesCode]

Does not seem like a question related to this video? However, info on the topic you are asking about: www.becomebetterprogrammer.com/soft-delete-vs-hard-delete/

[@alahmad430]

@@DaveGrayTeachesCode Hi Dave I've finally found the answer, it is the 3 of them (I said 3 because the last one is Audit) can be work together or combining or support each others, like the soft delete make data temporarily "unaccessed" to common users and the data is still remain in the db for specified time then use the audit from the db to make the analysis, audit etc and once the data is no longer needed we can use the hard or permanent delete data. Have you ever make the app with that requirements? I currently challenge myself to making those app (by learning and apply with your tutorials of course), can you give me suggestion what app that I can make that meet the requirements, Dave?

[@haibova_irisha]

Thank you very much!!! You can do Application using Ts, Redux toolkit, react ? Thank you,😊😊

[@DaveGrayTeachesCode]

Welcome!

[@alishmadhukar2177]

That children part was absolute magic ..✨✨✨✨✨✨

[@DaveGrayTeachesCode]

Thank you!

[@snazzybytes602]

So is VITE basically a better way to create react app skeleton without the extras? (Backend dev inquiring 😄). What is not generated vs createReactApp?

[@DaveGrayTeachesCode]

I think once you start using Vite instead of CRA, you won't go back. It's not just that it doesn't create quite as much boilerplate to delete - the main benefit is that it is so much faster. It does things a little differently. Link: vitejs.dev/

[@MyALPHAguy]

Finally!!!!!!!!!!!

[@DaveGrayTeachesCode]

For sure! We built a good foundation of TS leading up to this point. 💯

[@haroonseena9893]

I wish you had a next tutorial without typescript in it I don't know much about typescript and why most of the KZbinrs have used typescript in their next projects

[@jaisuperawesome]

Can’t I just create span element inside the list? Why do we need a render function?

[@rayyanalam4815]

What is the color theme you are using in vs code?

[@DaveGrayTeachesCode]

My theme choices: kzbin.infodp4u1NNFhtE

[@henokmesfin21]

we really need it specially MERN with typescript and redux-saga

[@s1dev]

Awesome dude!!!! so muchhhh!!! are you god?

[@s1dev]

1M is not a dream, I can see it coming...

[@DaveGrayTeachesCode]

Just a dev dude in Kansas. Thank you for the kind words! 🙏

[@saurabhdubey2588]

When should we use interface vs type ?

[@DaveGrayTeachesCode]

This is a good question! I provided a link to the React Typescript Cheatsheet repo in the description, but here is a link to the specific part of the repo that answers that: github.com/typescript-cheatsheets/react#types-or-interfaces

[@saurabhdubey2588]

@@DaveGrayTeachesCode That repo is pretty good. Thanks for that

[@johnconnor9787]

24:50 Generic component (important moment)

[@user-me4pr8qq2m]

const List = (props: ListProps) => { const { items, render } = props; return ( {items.map((item, i) => ( {render(item)} ))} ); }; is to prevent compiler thinking it is a jsx tag. I ask chatgpt ...

[@andTutin]

i desperately need for lesson 10

[@DaveGrayTeachesCode]

Lesson 10 was the introduction to Vite. Playlist here: kzbin.info/aero/PL0Zuz27SZ-6NS8GXt5nPrcYpust89zq_b

[@justin9494]

you lost me at the generic part. I don't know anything about interfaces and generics. Though the first parts were really easy to follow. Thanks!

[@DaveGrayTeachesCode]

I do cover generics earlier in the TypeScript series: kzbin.info/aero/PL0Zuz27SZ-6NS8GXt5nPrcYpust89zq_b

[@davithchhung7577]

I think the reason it keeps autocompleting to different things because the snippet extension you have installed. It was bothering me so much in the past, so i decided to stop using it.

[@DaveGrayTeachesCode]

Yes, I'm going to look into this. I enjoy some of the snippets so maybe I can modify it.

[@davithchhung7577]

@@DaveGrayTeachesCode It's also a great idea. I am waiting for the solution to next video :)

[@MusicMan121]

I hate Typescript SO much. I wish JavaScript introduced native types so I could completely forget about the nightmare this is.

[@twothreeoneoneseventwoonefour5]

Can you explain better about what is wrong with React.FC? It seems to me that it was "bad in the past" and had implicit children, but however, now it doesn't. So what is wrong then now? Everywhere I look it links to 2019-2020 thread in github which is not the case in React 18 in 2022(close to 2023) where implicit children are now REMOVED. So what is the problem again?

[@DaveGrayTeachesCode]

Look at the link in the description for the tutorial references pointing to the React Typescript cheatsheet. It is discussed in more detail there.

[@twothreeoneoneseventwoonefour5]

@@DaveGrayTeachesCode I took a look at it and it pointed to the same thread from 2019 which is irrelevant today. In 2022 with React 18 type updates those issues were fixed and it still seems to me that React.FC is fine to use nowadays, just as I said in my initial comment. "In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of React.FunctionComponent" - quote from that cheatsheet. For me I think I better prefer to type elements like const App:FC ({some, parameter}) => {} ↑Which does NOT have implicit children in React 18 hence I don't see any problem here. Or const App:FC ({children, some, parameter}) => {} ↑When you specifically need children. This seems more inline with typescript ideology of explicitly defining types than just implicitly returning JSX.Element.

[@jkovert]

I never listen to Tech Twitter. Tech Twitter is nothing but stupid tech in-jokes, none of them even a little funny. A complete waste of time.

[@cyeg12c]

Thankyou

[@DaveGrayTeachesCode]

Welcome!

[@Pareshbpatel]

{2023-01-29}

[@TheDoguBati]

I don't know what to say, Dave. I hope you will get everything you want from life, as you are helping people get what they want

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@codefinity]

Thanks!

[@DaveGrayTeachesCode]

Thank you for the support!