React Typescript Tutorial 2021

Wondering how to use TypeScript with your ReactJS project? This is the video for you! In this tutorial we'll walk through how to start a new react typescript project, how to add typescript to an existing React JS project, how to describe Props using interfaces and types, how to set default props, how to provide types for event handlers, how to provide types for various hooks like useState and useReducer. Finally we'll also discuss and show the benefits of doing all of this in actual typical development.

00:00 - Intro
00:21 - Setup for new or existing apps as well as component libraries
02:40 - Components as arrow functions
03:37 - Quick note about named vs default export
05:44 - Switching from PropTypes to TS interfaces / types
05:15 - Function Component return type
10:40 - More examples of typing props
11:45 - Typing function props and event handlers
20:15 - How to provide types for useState hook
23:14 - Providing types for useReducer state and dispatch
29:22 - Check out the React Typescript Cheatsheets for more info
29:49 - Quick example of typing Class Components
30:25 - Conclusion / Outro

[mariusespejo]

00:00 - Intro
00:21 - Setup for new or existing apps as well as component libraries
02:40 - Components as arrow functions
03:37 - Quick note about named vs default export
05:44 - Switching from PropTypes to TS interfaces / types
05:15 - Function Component return type
10:40 - More examples of typing props
11:45 - Typing function props and event handlers
20:15 - How to provide types for useState hook
23:14 - Providing types for useReducer state and dispatch
29:22 - Check out the React Typescript Cheatsheets for more info
29:49 - Quick example of typing Class Components
30:25 - Conclusion / Outro

[warsisarjeelrahman]

Please do a fullstack authentication tutorial with React and nestjs. There aren't a lot of tutorials like that on the internet, and I think it'll help a lot of people. Love your videos.

[vikasmv]

Great informative video! It would be wonderful if you could create a video on using SVGs in Storybook.

[Fatima-iekj]

thank you for this wonderful video you cover everything to get started ...

[kthalyn]

Thanks Marius. Just got a quick glance on your video about Auth in nestjs and noticed that you added this video about react. I used it in the past and now I use Vue with Nuxt where I currently work.Because it was a while ago, I was using classes and lifecycle methods so thanks for sharing your experience with React with Typescript and hooks. <3

[mohamedsabriee]

Thank you, Marius. Your explanations are really awesome

[nishanthakumara]

Awsome explanation. Thanks for sharing.

[aeganaden]

Very helpful, will support your channel all the way!

[FH]

Thanks for the info-packed tutorial. I was wondering if there is any difference between using the callback from the button click event vs calling a function from the click event in react? I mean <button onClick ={(e)=> { console.log(e)} } ... vs <button onClick ={print} .... const print= (e)=> console.log(e); Does <button onClick ={(e)=> { console.log(e)} } trigger a re-render ?

[jritzeku]

Would you say that Typescript is used for Express js and React in jobs? On one hand it seems tedious to add all this Typescript however it offers great benefits.