Author: freeCodeCamp.org - Bewertung: 53x - Views:328
Struggling to type React components correctly? This TypeScript React tutorial walks you through using TypeScript in real React projects, from typing useState to building reusable typed components, with hands-on challenges throughout.
✏️ Study this course interactively on Scrimba: https://scrimba.com/learn-typescript-c03c?via=scrimbafcc
Code is available on the Scrimba course page for each lesson.
TypeScript makes React code safer and more predictable. In this module, you'll learn how to type useState, component props, JSX elements, and function props through practical lessons. Perfect for developers who know React basics and want to add TypeScript to their workflow.
This isn't just a watch-and-learn tutorial. You'll complete real coding challenges, including building the AriaLiveStatus and WordLetters components from scratch.
Timestamps
- 00:00 Welcome to TypeScript and React!
- 01:51 Setting up the React Project
- 05:02 TS Refresher - Basic & Custom Types
- 08:31 TS Refresher - Functions
- 11:50 TS Refresher - A new getRandomIndex() function
- 14:07 Typing useState()
- 17:36 Typing Derived Values and Arrow Functions
- 19:48 Typing App.tsx functions
- 23:10 The New Setup
- 25:12 Typing React Components
- 27:48 JSX Element or null
- 29:24 Typing Component Props
- 32:46 Custom Component Prop Types
- 34:34 The AriaLiveStatus Component Challenge
- 36:53 Component Props and Imported Types
- 39:15 Element within an Element
- 42:14 The WordLetters Component Challenge
- 44:49 Typing Function Props
- 47:33 The Final Challenge
- 50:23 Congrats!
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp
🎉 Thanks to our Champion and Sponsor supporters:
👾 @omerhattapoglu1158
👾 @goddardtan
👾 @akihayashi6629
👾 @kikilogsin
👾 @anthonycampbell2148
👾 @tobymiller7790
👾 @rajibdassharma497
👾 @CloudVirtualizationEnthusiast
👾 @adilsoncarlosvianacarlos
👾 @martinmacchia1564
👾 @ulisesmoralez4160
👾 @_Oscar_
👾 @jedi-or-sith2728
👾 @justinhual1290
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
SOCIAL SHARE CARD GENERATOR