Typescript for React Components From Beginners to Masters

[@not_cool_dev]

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.

[@arihantjain8347]

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

[@firebird77]

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

[@geekySRM]

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

[@martinemanuel8239]

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

[@adventurer2395]

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

[@dev-suresh]

Changed my thoughts on creating robust components. Thanks.

[@learningit2572]

Number One in KZbin! For me its so usefull

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

[@todaysrapsux123]

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

[@hideinbush0]

Very nice intro to the render props pattern!

[@tendies]

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

[@Viralvlogvideos]

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

[@MaksymMinenko]

Longer videos should help.

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

[@stefanbrunner1591]

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

[@YolkWorshiper]

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

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

[@jsricochet]

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

[@arianh]

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

[@r0x304]

My favorite typescript coder.

[@richayy]

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

[@программистомв40]

Thx for your work , Jack!

[@thomasstambaugh5181]

Thanks!

[@DennisHorn1981]

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

[@jeremydeveloper32]

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

[@chenvarsano200]

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

[@JimmyBrayne]

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

[@thehaptiK]

perfect timing. thanks Jack

[@kadekwijaya5332]

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

[@staefoded]

love your teaching man...Well done

[@Iyiola]

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

[@omar99ize]

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

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

[@teflonhav]

set your camera's white balance to auto when filming exterior and interior scenes. Thanks for the vid!

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

[@alancosta6438]

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

[@ankitmehrotra8519]

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

[@1235niki]

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

[@mauriciolucero7296]

Awesome video Jack, very useful. Subbed :D

[@mikmikmikdota]

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

[@zdargahi]

thanks a lot Jack, please make more videos 😍

[@stephancasas]

Outstanding! Really clear presentation.

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

[@subhashmalireddy]

22 minutes into the video, I subscribed

[@ryank9719]

Great content as always. Keep it up

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

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

[@yusuphh.kajabukama4029]

Thanks for the content, I liked your vscode theme!

[@alinazar7998]

Sir this is really great content! Keep it up!

[@ragnarlothbrook8117]

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

[@rafael86ny]

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

[@shivms8728]

Really Great!!!!

[@nirvanacore5543]

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

[@dmcshehan]

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

[@reinaogo7161]

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

[@anders8638]

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

[@haseebiqbal4140]

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

[@johnddonnet5151]

This channel is too good

[@matthewzecchini9951]

I've been waiting for this one thanks

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

[@DedicatedManagers]

Loving all the typescript!

[@OSCAR-CH]

Just incredible. I love your videos.

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

[@jackcb]

thanks for the video Jack!

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

[@AxelRTas97]

You, sir, are my savior.

[@amershboul9107]

Excellent content and attractive introduction, keep going man ❤

[@viveksharmapoudel1657]

yours videos are seriously underrated...

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

[@zathkal4004]

Hats off Jack... thank you sir (:

[@tolulopemalomo8922]

Really valuable. Thank you.

[@martingalli3553]

Hi Jack, can you share your VS Code configuration?

[@varshasharma7397]

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

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

[@asgharibraheem8938]

Explained very well

[@Filipmalek1]

Thanks for the great video!

[@SwiftySanders]

Good video! Thanks for sharing it.

[@nekoresOfficial]

Khooool. Thank you

[@william3588]

Great! Keep em coming

[@youtekdev8131]

Better than a text book.

[@josephwong2832]

undefiiiined !! :)

[@sundeeppeethala312]

Hi Do you Have any Course on React with Typescript??? As Typescript is growing more and more day by day, Each and every Company Asking REACT with Typescript Combination.. Can you please Release and End to end Course on React, Redux with Typescript please..

[@sumitwadhwa8823]

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

[@xcdcd214]

Very Nice tutorial

[@noramensah6638]

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

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

[@HashtagObi]

learnt so much thank you!

[@Chrosam]

This is great, thanks!

[@michaelroberts9592]

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

[@jherr]

github.com/jherr/jmusic

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

[@bythealphabet]

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

[@iqwebserve3973]

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

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

[@rileydavidjesus]

Looks cold.

[@nurhusni]

Why did you use regular function, and not arrow function? I was confused how to implement generics in the arrow function because I tried this and it didn't work. const List = ({items, render}: {items: ListItem[]; render: (item: ListItem) => ReactNode;}) => {...}

[@jherr]

Generics using “function” are easier. I think you can accomplish what you want by defining a “type” and then having the const function implement that type.

[@RedmondGamer]

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!

[@parubok]

Thanks!

[@XenoDDR]

Hey! I like the color theme on your editor. Mind if I get the name? :)

[@jherr]

It's Apollo Midnight with Cascadia Code.