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
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.
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.
Personally I agree wholeheartedly! Cheers
Yes, and no "WHAT"S UP GUYS!" ugh
Agreed. Nice to not be looking at an IDE right off the bat. Very engaging
This is fantastic! Thanks! I've been using FC on all my components didn't know this was the old way of doing it.
Changed my thoughts on creating robust components. Thanks.
Thank you, Jack! I've been struggling with TS + React at my new job but this helped me so much!
Just wanna say I am a huge huge fan of your React/TypeScript content. Subbed and can't wait for more :)
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.
Thanks, Jack! Your TS React content has gotten me up to speed very quickly.
I binge watch all these video, very less people are lucky enough to have such a vast library of premium information.
Thanks a lot! Your tuts are great and I really appreciate your well structured and calm way of explainig! 😀👍
Thank you so much for this Jack, I greatly appreciate this and really enjoy your content!
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!
Jack is like the David Attenborough of coding with a dash of Ron Weasley's magic
One of the best explanations here, I watched many videos in youtube, but Jack it's the best!
perfect timing. thanks Jack
I'm back again to repeat myself and say I loved it!!!
Thanks for the video Jack, very clear and easy to follow.
This video is great! Learned so much and I'll be putting this on my work right away!
I learned a lot out of this video! Thanks a lot, Jack...
Clear and to the point .Thanks :) Loved the function passed as children.
Starting a new job with React & TS! This will help a lot :)
Each video I watch my react game lvls up, thank you!
Number One in KZhead! For me its so usefull
Outstanding! Really clear presentation.
Awesome video Jack, very useful. Subbed :D
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?
This was a sweet lesson. Thank you, just subscribed.
I've been waiting for this one thanks
Very nice intro to the render props pattern!
Thank you for sharing this amazing content for free^^ LOVE IT
Thx for your work , Jack!
Loving all the typescript!
You are awesome! Loved that video! The generic one just set my mind on fire
it was amazing to learn, i was looking for it thanks for sharing
Thank you for making this, helped my understanding a lot! ;)
Thank you ..Learned so much about typescript in this video. Great explanation.. Will be checking out your other videos too.
love your teaching man...Well done
Thanks for the content, I liked your vscode theme!
Great content as always. Keep it up
I’m new to your channel! This was awesome! Well Done! Btw i really like your micro frontend videos 👍
Thanks for inviting 90s Brad Pitt to give the video intro (those mannerisms 😂). Really appreciate your clarity and pace.
I was just looking up videos on this yesterday and so I smiled when I saw this today!
Sir this is really great content! Keep it up!
22 minutes into the video, I subscribed
Just incredible. I love your videos.
thanks for the video Jack!
Honestly the best and easiest entry for me to start React with Typescript! Good Explanation, keep it up
Excellent video. I like your style and pace. Sub.
Thanks for your clear explanation, its really helpfull for me learn ts using react😃
Thanks a lot for the video, pretty much understood all the concepts you explained.
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
thanks a lot Jack, please make more videos 😍
My favorite typescript coder.
Great! Keep em coming
You, sir, are my savior.
Really valuable. Thank you.
Hats off Jack... thank you sir (:
Explained very well
Good video! Thanks for sharing it.
Thank you, Sir, I have now seen a few of your videos, they are very informative.
learnt so much thank you!
This is great, thanks!
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.
yours videos are seriously underrated...
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.
Thanks for the great video!
Really Great!!!!
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.
your voice is so clear damn, your channel is under rated.
Longer videos should help.
This channel is too good
Khooool. Thank you
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)...
Better than a text book.
undefiiiined !! :)
Excellent content and attractive introduction, keep going man ❤
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!
I use Fig in the Terminal, and thanks for the compliment!
Hi Jack, can you please cover HOC in React and Typescript. Great videos. Thanks.
Hi Jack! Great Content!!!! Please make video for Google map react along with typescript. Thanks
Very Nice tutorial
Thanks for the tutorial. It was enlightening and I love your vscode theme too!! Care to share?
Thanks!
thank you for this video! What VS code extensions did you use in this video?
Just the TypeScript Extension Pack - marketplace.visualstudio.com/items?itemName=loiane.ts-extension-pack
hi at 19:30 how can I use this using arrow function? (syntax), Thanks
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!
Fair enough. Point well made and taken.
@@jherr OK now to continue my all-week marathon of your vids until my head hurts.
@@ToddDunning Enjoy! Not sure if that beats The Green Knight that I just saw. Sheesh, that was an overrated snooze fest.
We are so fortunate to have an innovator like you: btw can someone tell how many times he says cool in this video? 😍
Now you're making me self-conscious about my 'So's, 'Alright's, and 'Cool's. ;)
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?
Looks cold.
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?
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.
Hi Jack, can you share your VS Code configuration?
Great content 👍👍...using context with reducers in typescript...maybe a topic for the future ?
I'll do that next since I think Typescript around React was a big missing piece of content for me.
@@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.
Thank you, Jack, I appreciate your Videos. very nice, I'm making the transition to TS, b💩😎
@00:43 wo wooo whats happening with my browser!!
Great video... was not cold outside for short sleeves? LOL Thanks
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.
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?
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.
Hey Jack, I know you can define a useState like useState() and that will infer what are the differences between null and undefined?
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.
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?
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.
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?
thanks
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..