Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this React Typescript Tutorial for beginners you will learn about function components, passing props, default values, passing setState, and all of the associated TS types and return types. React + Typescript!

Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: https://bit.ly/WebDevMaster
- Master the Coding Interview: https://bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

Subscribe https://bit.ly/3nGHmNn

Course Updates https://courses.davegray.codes/

Questions - Please post them to my Discord https://discord.gg/neKghyefqh

Buy Me A Coffee https://www.buymeacoffee.com/davegray

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course

Playlist for this Typescript Course: http://bit.ly/3GcNJ78

React Typescript Tutorial for Beginners

(00:00) Intro
(00:11) Welcome
(00:32) Setup & Starter Code
(03:39) Function Components
(05:16) Component Return Types
(06:24) Heading Component Example
(07:34) Old Code You May See
(10:09) Recommended Code & Default Values
(14:45) useState hook
(16:11) Simple Counter Example
(17:45) Passing Down setState & children
(21:19) Generic List Example

Suggested Pre-requisites for this Typescript course:
JavaScript for Beginners full course: https://youtu.be/EfAl9bwzVZk

Tutorial References:
TypeScript + React Cheatsheet: https://github.com/typescript-cheatsheets/react
Typescript Official Website: https://www.typescriptlang.org/
Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
MDN - Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
MDN - Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
MDN - Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

Web Dev Tools:
Vite: https://vitejs.dev/
Chrome Browser: https://www.google.com/chrome/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Node.js & npm: https://nodejs.org/
Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Was this React Typescript tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #typescript #tutorial