Typescript for React Components From Beginners to Masters

Typescript is quickly becoming the industry standard for React development. Take your Typescript skills from beginner to masters level by learning everything you need to know about how to write components in React the right way.
Cheatsheet: github.com/typescript-cheatsh...
Code: github.com/jherr/ts-hooks
Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Weekly free newsletter: www.jackherrington.com/subscr...
👉 Discord server signup: / discord
If you liked this video, buy me a coffee! www.buymeacoffee.com/bluecoll...
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 Build a KK Slider Slider: • Build A K K Slider Sli...
Thank you for watching this video, click the "SUBSCRIBE" button for stay connected with this channel.
Subscription Link: bit.ly/2E7drfJ
#reactjs #typescript

[@JTRNSmedia]

Quick tip for anyone watching this video in 2022 or later: The implicit children property was removed from the FunctionComponent & FC types in React 18. Using these types remains completely optional, but there is no reason to feel discouraged if you do.

[@billpliske]

From a designer perspective ... very smart to start things out with that outdoors intro. Not only is the video/audio clear, but you've set yourself apart from the competition with some originality. Well done.

[@vinceypincey]

Personally I agree wholeheartedly! Cheers

[@doumkatekz]

Yes, and no "WHAT"S UP GUYS!" ugh

[@shlemekian]

Agreed. Nice to not be looking at an IDE right off the bat. Very engaging

[@mervin9220]

This is fantastic! Thanks! I've been using FC on all my components didn't know this was the old way of doing it.

[@todaysrapsux123]

Thank you, Jack! I've been struggling with TS + React at my new job but this helped me so much!

[@thanhnguyenhoai2727]

coming from Mr.Brad's channel, I think you are a very great teacher. Thank you for spending a lot of effort on your videos.

[@firebird77]

Thanks, Jack! Your TS React content has gotten me up to speed very quickly.

[@richardwang3541]

Just wanna say I am a huge huge fan of your React/TypeScript content. Subbed and can't wait for more :)

[@DennisHorn1981]

Thanks a lot! Your tuts are great and I really appreciate your well structured and calm way of explainig! 😀👍

[@YolkWorshiper]

Thank you so much for this Jack, I greatly appreciate this and really enjoy your content!

[@martinemanuel8239]

One of the best explanations here, I watched many videos in youtube, but Jack it's the best!

[@Iyiola]

I'm back again to repeat myself and say I loved it!!!

[@slikk66]

new sub - great content. Just making another trip around to try out React, but wanted to learn it with Typescript. It's surprisingly hard content to find (done correctly)! Thanks!

[@thehaptiK]

perfect timing. thanks Jack

[@jsricochet]

Clear and to the point .Thanks :) Loved the function passed as children.

[@jeremydeveloper32]

This video is great! Learned so much and I'll be putting this on my work right away!

[@1235niki]

Thanks for the video Jack, very clear and easy to follow.

[@geekySRM]

Starting a new job with React & TS! This will help a lot :)

[@tendies]

Each video I watch my react game lvls up, thank you!

[@learningit2572]

Number One in KZbin! For me its so usefull

[@arihantjain8347]

I binge watch all these video, very less people are lucky enough to have such a vast library of premium information.

[@stephancasas]

Outstanding! Really clear presentation.

[@mauriciolucero7296]

Awesome video Jack, very useful. Subbed :D

[@matthewzecchini9951]

I've been waiting for this one thanks

[@reinaogo7161]

Thank you for sharing this amazing content for free^^ LOVE IT

[@dev-suresh]

Changed my thoughts on creating robust components. Thanks.

[@chenvarsano200]

You are awesome! Loved that video! The generic one just set my mind on fire

[@arianh]

I learned a lot out of this video! Thanks a lot, Jack...

[@anders8638]

Thank you for making this, helped my understanding a lot! ;)

[@ankitmehrotra8519]

Thank you ..Learned so much about typescript in this video. Great explanation.. Will be checking out your other videos too.

[@staefoded]

love your teaching man...Well done

[@usamasaleem5624]

I see many awesome developers in youtube but You'r explanation and way of teaching is very awesome. Your content is so unique I can't find this content on whole you tube. I just have a just one request if you have a time so please make a one dedicated video on React, Redux toolkit, React Query with Typescript

[@omar99ize]

I was just looking up videos on this yesterday and so I smiled when I saw this today!

[@jermainebrayne437]

Jack is like the David Attenborough of coding with a dash of Ron Weasley's magic

[@alancosta6438]

This was a sweet lesson. Thank you, just subscribed.

[@hideinbush0]

Very nice intro to the render props pattern!

[@user-gh6tc1bf9h]

Thx for your work , Jack!

[@yusuphh.kajabukama4029]

Thanks for the content, I liked your vscode theme!

[@DedicatedManagers]

Loving all the typescript!

[@ryank9719]

Great content as always. Keep it up

[@r0x304]

My favorite typescript coder.

[@adventurer2395]

Thanks for inviting 90s Brad Pitt to give the video intro (those mannerisms 😂). Really appreciate your clarity and pace.

[@kadekwijaya5332]

Thanks for your clear explanation, its really helpfull for me learn ts using react😃

[@michaelangelosilva1337]

I’m new to your channel! This was awesome! Well Done! Btw i really like your micro frontend videos 👍

[@nirvanacore5543]

it was amazing to learn, i was looking for it thanks for sharing

[@jackcb]

thanks for the video Jack!

[@ragnarlothbrook8117]

Excellent video. I like your style and pace. Sub.

[@OSCAR-CH]

Just incredible. I love your videos.

[@alinazar7998]

Sir this is really great content! Keep it up!

[@dmcshehan]

Thanks a lot for the video, pretty much understood all the concepts you explained.

[@stefanbrunner1591]

Honestly the best and easiest entry for me to start React with Typescript! Good Explanation, keep it up

[@zdargahi]

thanks a lot Jack, please make more videos 😍

[@SwiftySanders]

Good video! Thanks for sharing it.

[@Viralvlogvideos]

your voice is so clear damn, your channel is under rated.

[@MaksymMinenko]

Longer videos should help.

[@zathkal4004]

Hats off Jack... thank you sir (:

[@HashtagObi]

learnt so much thank you!

[@tolulopemalomo8922]

Really valuable. Thank you.

[@ft12341]

Subbed! Love this video so much, looking forward to more ts/react videos from you. May I ask if there is a repo for this video?

[@AxelRTas97]

You, sir, are my savior.

[@Filipmalek1]

Thanks for the great video!

[@asgharibraheem8938]

Explained very well

[@rafael86ny]

Thank you, Sir, I have now seen a few of your videos, they are very informative.

[@trustarMello]

I like Google Translator because your pronunciation is comfortable. So it gives me good information. One suggestion is, why don't we use a subtitle system for clear translation? 😀 Thank you for creating a good channel.

[@Chrosam]

This is great, thanks!

[@william3588]

Great! Keep em coming

[@Luxcium]

This video is definitely not _smartphone friendly_ ... but it is really interesting so I had to come to my computer and wow this is definitely made for my 1080p the colors are amazing but the best is our beloved presenter... This Tutorialist is impressive (but you all know that already)... Just hope he can do videos no more than *15 lines of code* (with the terminal in a separate window)... So that I can watch while doing the dishes in my kitchen (I only have an iPhone)...

[@johnddonnet5151]

This channel is too good

[@subhashmalireddy8211]

22 minutes into the video, I subscribed

[@shivms8728]

Really Great!!!!

[@viveksharmapoudel1657]

yours videos are seriously underrated...

[@jacksparr0w300]

Interesting, what are the benefits of moving to split the item and list render like that? I'll read more on this online but curious if someone could point me in a direction.. After finishing the video, seems it benefits when placed in a component library or shared. Very cool.

[@joelwembo]

Very Nice tutorial

[@Fatima-ie5kj]

We are so fortunate to have an innovator like you: btw can someone tell how many times he says cool in this video? 😍

[@jherr]

Now you're making me self-conscious about my 'So's, 'Alright's, and 'Cool's. ;)

[@ToddDunning]

Jack you are my favorite dev youtuber, between traversy, fireship and the rest. However, it would help me if you added more context in the usage examples. Here you do a good job showing the code examples but I would love to hear more opiniated....opinions about WHEN to do these and why I need to keep them in the back of my head. Thanks so very much!

[@jherr]

Fair enough. Point well made and taken.

[@ToddDunning]

@@jherr OK now to continue my all-week marathon of your vids until my head hurts.

[@jherr]

@@ToddDunning Enjoy! Not sure if that beats The Green Knight that I just saw. Sheesh, that was an overrated snooze fest.

[@nekoresOfficial]

Khooool. Thank you

[@amershboul9107]

Excellent content and attractive introduction, keep going man ❤

[@thomasstambaugh5181]

Thanks!

[@varshasharma7397]

Hi Jack! Great Content!!!! Please make video for Google map react along with typescript. Thanks

[@youtekdev8131]

Better than a text book.

[@sumitwadhwa8823]

Hi Jack, can you please cover HOC in React and Typescript. Great videos. Thanks.

[@rileydavidjesus]

Looks cold.

[@rachel2518]

thank you for this video! What VS code extensions did you use in this video?

[@jherr]

Just the TypeScript Extension Pack - marketplace.visualstudio.com/items?itemName=loiane.ts-extension-pack

[@anvarsaidov8964]

Thank you Jack, by the way, you'll make a great candidate for US presidency. You remind me one of them. You have a great personality and necessary problem solving skills as a programmer.

[@martingalli3553]

Hi Jack, can you share your VS Code configuration?

[@aldrindelica8989]

Hi, what font style and vscode theme are you using in this video? the colors are appealing to the eyes and the fonts are easier to read than the default ones.

[@josephwong2832]

undefiiiined !! :)

[@noramensah6638]

Thanks for the tutorial. It was enlightening and I love your vscode theme too!! Care to share?

[@bythealphabet]

Thank you, Jack, I appreciate your Videos. very nice, I'm making the transition to TS, b💩😎

[@PSAGrader]

Jack -- I noticed that your code editor is automatically linting in the terminal pane as you type. Is that a default of your editor or something you setup? Great video btw!

[@jherr]

I use Fig in the Terminal, and thanks for the compliment!

[@v.florio]

Excellent teaching skills. Now I feel like I can upgrade my obsolete Class Based JSX react code

[@calebcadainoo]

Functional component is the ish 😉

[@bobvantpadje1490]

In recently ran into a usecase where I wanted to do something similar to your example with the generics. But I wanted the ensure that instead of any ListItem type, the ListItem type should be either MyCustomType1 or MyCustomType2. How would you implement that in your example?

[@jherr]

You should be able to say `T extends MyCustomType1 | MyCustomType2`, maybe? Certainly you can do it with one. If that doesn't work then `T extends { /* the fields I require */ }` which might be the better way to go anyway since it identifies the fields you actually care about as opposed to the specific types you care about.

[@iqwebserve3973]

Great video... was not cold outside for short sleeves? LOL Thanks

[@Sammorris207]

Hi thanks for the video, it was really helpful! at 21:31 I'm getting this error Type '{ children: never[]; items: string[]; render: (item: string) => Element; }' is not assignable to type 'IntrinsicAttributes & { items: string[]; render: (item: string) => ReactNode; }'. Property 'children' does not exist on type 'IntrinsicAttributes & { items: string[]; render: (item: string) => ReactNode; }'.ts(2322) when I'm reloading the page I'm able to view the page without an error for a second and then I'm getting this error. Can anyone please help?

[@haseebiqbal4140]

hi at 19:30 how can I use this using arrow function? (syntax), Thanks

[@adventurer2395]

Would you recommend using interfaces or types to define props? The cheatsheet recommendation is to use interface til you need types, so wouldn't just using types making everything more consistent for the long run?

[@AmodeusR]

There are who says you should use interfaces when coding class oriented programming and types when doing functional programming, but it doesn't really matter since currently their difference are minimal. I used to like using interfaces, but type being more flexible I'm starting to change.

[@danielkeefer1901]

Hey Jack, I know you can define a useState like useState() and that will infer what are the differences between null and undefined?

[@jherr]

That's a great question. Undefined in this case means "I didn't give you a value of any kind". Where null would mean; "I gave you a value, a value that was the no-value value." So in this useState case it's a choice between the number, and there not yet being any value at all.

[@daviddrahllensa4165]

thanks

[@pranjalwalia3810]

Great content 👍👍...using context with reducers in typescript...maybe a topic for the future ?

[@jherr]

I'll do that next since I think Typescript around React was a big missing piece of content for me.

[@thehaptiK]

@@jherr i'd personally love to see a series of typescript/react subtopics like this. context/redux/graphql etc... all whilst using typescript. might really help people like myself transitioning from javascript to typescript in their create-react-app/lications . cheers.

[@DedicatedManagers]

I believe that usually when you consume a function of generic type (not sure if I’m saying that right) you need to specify the type. At 20:57 when you consume The component that is of generic type you discuss how list item is of type string. Is the type on the List component inferred?

[@jherr]

It's inferred from the type on the array you are passing in. So it's totally transparent to the end user of your component. You give it a list of strings, and your render function then takes a string. etc. etc.

[@satyamktr]

Hello sir, I think the GitHub repo link is wrong....I can't find the code you have shown here. Can you please verify and update the link?

[@michaelroberts9592]

What is the link for the jmusic project? I can't seem to reference it?

[@jherr]

github.com/jherr/jmusic