React Typescript Tutorial
HTML-код
- Опубликовано: 24 июл 2024
- Learn how to start using Typescript in your React code. I go over props, hooks, and render props.
#react #typescript
Snippets: gist.github.com/benawad/1e9dd...
Code: github.com/benawad/react-type...
For more information on this checkout: github.com/typescript-cheatsh...
----
Follow me online: voidpet.com/benawad
#benawad 
Наука
Subbed. Finally, a dev tutorial that actually shows TS in context RATHER than foo bar baz and mythical one off instruction scenarios.
welcome :)
This dude actually seems knowledgeable. Not just trying to get views using buzzwords, talking about top lists. As an applications developer, I approve!
Don't forget: "Today, we're going to learn TypeScript with React. Okay, let's import Bootstrap and waste 15 minutes copying and pasting boostrap code for a toy project"
@@pearlsswine When I was trying to learn Node.js I always hated that most tutorials were like "Learn how to make a Node server.....which includes these 20 obscure packages that will confuse you"
Loled
Super! Exactly the issues I ran in to after a day of trying to use React TS... Thanks a lot.
I really like how he touches all the important things which are really the foundations to being a better developer. Looking into the definitions, understanding the function signatures and also using hooks for the example. Amazing! I'm happy I got this as a recommendation.
Typescript seemed so intimidating and you just made it relevant and simple within the context of my current knowledge. thank you so much
ikr!
You are the man dude, people made video to explain what you doing in 3 hours, respect !
_Timestamps:_
00:00 *Introduction*
-- 00:36 Setting up a Project
-- 01:15 Project Overview
01:39 *Props* (Declaring Components and Passing in Props)
-- 02:29 Using Interfaces
-- 03:40 Data Types
-- 04:35 Passing in Interfaces
-- 05:20 Optional Props
06:31 *Hooks*
-- 06:34 useState
---- 07:04 Unions (Multiple Types)
-- 08:47 useRef
---- 09:27 HTML Input Element
---- 09:50 Pro Tip (Hover Technique)
---- 12:14 HTML Div Element
---- 12:41 onChange
-- 14:36 useReducer
---- 15:03 Passing in Types
---- 16:14 Arrays
17:41 *Render Props*
-- 17:54 File Names
-- 18:20 User Snippets
-- 22:20 Pro Tip (Examining Types)
Thank you so much for the timestamps!!
@@tekk7989 You're welcome!
Before that video I was lost for the documents and I was looked at the code which was given me. Now I'm able to understand.Thanks a lot.
Ben, you're awesome, mate! Hats off to you for amazing and useful tutorials, I really enjoy them and take a lot of useful stuff for my work. Again, thank you!
Please keep doing what you are doing now, you're really amazing!!
You are a fantastic teacher, I appreciate most that you explain every detail, even when you mess up and why and even why it was important at all. Thank you
I'm currently migrating a project over to Typescript. Less than 3 minutes into the video you've already helped me fix my issue. Thank you!
Omg, 6mins in and I'm sold. I just started my first web dev job and they're using React with Typescript. Never used Typescript before and this just cleared up so much of what i wasnt understanding in their code. Thank you!
this was the most refined react typescript tutorial I got. helped a lot for learning typescript in react, thanks for sharing
I am actually surprised. This video is 4 years old and still you can use it. I definitely recommend this video if you want to have a little glance at how TS work in React world. I truly enjoyed it.
I can't believe so much can be covered in less than 25 minutes. Love the straightforward explanation of important concepts + tips&tricks in TS.
Thanks for this!
You have extremely natural teaching talent. I can just tell. Thanks for the great video.
Geezzz days of tutorial converted in 30mins on this video... Thanks Ben!
Appreciate the just about enough tutorial that one would need as an experienced React dev wanting to get into Typescript!!
Great video !
Hey Ben,
I am loving all your videos and going them one by one. The best thing about is the speed and also the way of explaining everything so wonderfully well.. Great going and yes I would also like you to make a unit testing videos covering JEST enzyme with snapshot testing..
This video came at the perfect time. Very clearly explained!
It’s just hard to believe how much knowledge this man can deliver in how little words. What a concise way of teaching. Such is the caliber of Ben awad, actually I’m quite surprised he haven’t developed a unicorn company yet as he often discuss in his videos. Anyhow thanks for the video, and please start making these knowledge sharing videos again.
Thanks Ben. Your course is amazing. Both motivational and inspirational. I learnt a lot of things in less than 2 hours. Now I begin to update my React project in JavaScript to NextJS + TypeScript. Thanks again.
Brilliant! This is just what I've been looking for👍🏾
I just finished learning TypeScript and wanted to implement it to my react app, its very neat and easy to understand Thank you.
Bruh your videos are the only ones where I don't have to watch at x1.5 speed. More than enough content coming my way. Thank you.
Finally, a perfecttutorial for me! I already know typescript and react but needed someone to show me how to combine the two!
You are very good at explaining the syntax! Thank you!
Amazing Tutorial. I really enjoyed the way you explain and also the glimpses into shortcuts
Thanks! I've just started with Typescript and this tutorial answered a lot of questions
Fantastic. I’m a Senior dev getting into TS shockingly late lol and this helped answer some questions for me. Especially the hover tip, always wondered where some of the types came from other than Google lol
Some of the best web dev content is found on this channel! Thanks a lot for your awesome explanations
An actually decent explanation of the benefits of using TypeScript with React. Thank you!
Great video!
Could you make a tutorial about unit testing react
Great tutorial, loved how condensed and informative it was. Also pro tips are great
Thanks Ben! Straight to the point and very practical tutorial. Appreciate it!
Great, simple tutorial! Thanks for using a range of examples.
So much information under 30 minutes. Love it...
this youtube channel is pure a gold-mine. Thank you so much
Great video. This is exactly what I was looking for when I started learning ( maybe many more people as well ) Typescript with React.
Excellent explanation of React-TypeScript. Thanks Ben Awad, you are a cool teacher.
Glad I watched this only just after I *recently* started a new project, easier to convert from js to ts!
Awesomely helpful video. Thank you for creating this and sharing your knowledge, borther!
Thank you for this! Wish I could like this video more than once:)
Don't be fooled by the young face of the speaker. This tutorial has very high quality! Many thanks for sharing.
This guy is legit, the way he explains stuff is amazing.
less words, but all knowledge has been covered,thx very much bro
This is such a helpful, high density video, ty
Concise and to the point, excellent tutorial.
gotta love being at the skill level with typescript that you work with it professionally but still learn stuff from a starter tutorial like this
Gotta love seeing a *supposedly* professional programmer *trying* to beat the system by writing the *same comment multiple times* and RUclips *display them together* , adjacent.
Thanks! I appreciate your efforts! Really a great video if you wanna migrate to typescript-react from plain react
That's awesome. explained with simplicity. *Signed in* just to like the video.
the accent and the sound quality of ben awad makes it soothing to hear
really good tutorial, clear and straightforward.
I like this tutorial, you have a nice style of explaining
love u ben. this should be the first thing on typescript website.
Wow 😮 I really enjoy your videos keep up the good work bro !!!
After watching this video, it took me 2minutes to fix the error that I had been facing since January 🎉🎉
Great Video! I am new to React, TS and this is what I was looking for :)
Thank you. I was looking something for my buddies...
Thank you
Awesome tutorial for starters like myself. Thanks!
Ben, you should become an instructor, You are one of the best I have seen.
You can just use the tsrafc snippet instead of creating a custom one for the TypeScript React Arrow Function Component. It's basically identical and comes with the ES7 React snippet extension from dsznajder, which most use already anyway.
Great consise video that gets straight to the point, thank you!
thank you for telling Ctr + Space, i was looking for that
Ben Awad, you're my new favorite youtube coder
That was quite helpful Ben 🙌
This man here deserves millions of subscribers
Nice Video, keep up the good work. Was just starting out with TS :)
one of the few fellows you need to follow to get a good job or keep your current one :D
I love you man! appreciate what you're doing.
the CTRL + Space is amazing
thanks ben this is a really helpful tutorial for me
Great video Ben, very helpful.
Thanks, ben for making my life easy 😊
For someone used to c# this just seems like a straight up improvement of js
Thanks a lot for this productive tutorial
Cool explanation, definitely will use hovering.
Thank you! Could you please do a video on using typescript with redux as well?
Just what I was looking for thank you.
This is an awesome tutorial. Thanks!
Very handy here, Thanks Ben
Very Nice explain the use of TypeScript with react.js
thank you, your videos are very educational
Very helpful, thanks for sharing!
Amazing Bro ! Thanks for the tutorial !
Love this tutorial!
awesome video! Would love it if you can make another describing the differences between types and interfaces in typescript!
I actually don't know all the differences, what I do is use interface for objects and type for everything else
Maximum level helpfulness here.
This is exactly what I've been looking for. It's amazing that it's so hard to find a basic introduction to using Typescript with React. I thought there would be a ton of resources on this.
I do have a doubt: when you're showing the useReducer hook I noticed that you use type and interface to define types. I've read they are similar (and that interface is preferred). Is there a reason behind the choice of type/interface for this?
Thank you for sharing this!
Thanks! Really helps me a lot!
Great video! Thanks a lot for easiest tutorial.
Its just amazing video! ❤
Thanks alot
Great job! Helped me out alot. :)
I hope this man doesn't hate Typescript and back again in JavaScript in future
Thank you! I love your video!
This tutorial is on point!
Thanks a lot, really helped me to understand. :)
Great tutorial! My last company used TypeScript and while I understand that it's meant to catch bugs before they happen, I always felt like debugging the TypeScript errors took longer than the bugs they were supposed to prevent. Anyone else feel the same way?
Thanks man. this was really helpful
Thanks BEN Great tutorial