Uploaded July 2026 | Updated September 2026, 2 weeks ago
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: 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: 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: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
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: 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: 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: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
![Indie Game Dev Jabrils talks AI & Anime [freeCodeCamp Podcast #118]](https://i.ytimg.com/vi/aWWF9kP70Tc/mqdefault.jpg "Indie Game Dev Jabrils talks AI & Anime [freeCodeCamp Podcast #118]
Indie Game Dev Jabrils talks AI & Anime [freeCodeCamp Podcast #118]")
![Lessons from 15,031 hours of coding live on Twitch with Chris Griffing [Podcast #214]](https://i.ytimg.com/vi/ajIss2t5FxM/mqdefault.jpg "Lessons from 15,031 hours of coding live on Twitch with Chris Griffing [Podcast #214]
Today Quincy Larson interviews Chris Griffing is a software engineer and prolific streamer of live coding on Twitch. He spent 10 years as a snowboard bum doing odd jobs at ski resorts to facilitate him spending as much time on the mountain as possible.
At age 28 he taught himself PHP programming and started building websites for friends. In 2018 he started streaming himself programming on Twitch, which blew up during the pandemic and has lead to more opportunities as a dev and developer advocate.
We talk about:
- How he learned programming at age 28 and built projects for friends before going pro
- How learning Go made him a better Rust Developer and why you should be a polyglot programmer
- How Chris uses LLM tools but still builds most codebases manually
- Tips for building projects in public for anyone interested in also stream coding
Support for this podcast comes from the 10,338 kind folks who donate to our charity each month. Join them and support our mission at https://donate.freecodecamp.org
Get a freeCodeCamp tshirt for $20 with free shipping anywhere in the US: https://shop.freecodecamp.org
Links from our discussion:
- Chriss Twitch channel: https://www.twitch.tv/cmgriffing
- Chriss YouTube channel: https://youtube.com/@cmgriffing
Community news section:
1. freeCodeCamp just published a comprehensive course that will walk you through using the popular AI-assisted development tool Claude Code. Youll learn about Code Harnesses, Agentic Loops, Sandboxing, and other key concepts. By the end of the course youll be able to spin up an entire fleet of agents to help you fix bugs and build out new features. (12 hour YouTube course): https://www.freecodecamp.org/news/claude-code-essentials-exampro/
2. We also published a course on the Hugging Face tool ecosystem. Youll learn how to connect your models, datasets, and deployment tools into a single unified build pipeline. (7 hour YouTube course): https://www.freecodecamp.org/news/deploying-ai-models-with-hugging-face/
3. Learn how to secure your Kubernetes Cluster. This in-depth tutorial starts by exploring real-world security breaches at big companies like Tesla, Shopify, and Capital One. Then it walks you through how to prevent each of these types of attacks by hardening your setup. (1 hour read): https://www.freecodecamp.org/news/how-to-secure-a-kubernetes-cluster-handbook/
4. Tell your Spanish-speaking friends: freeCodeCamp just published a new Spanish-language course on SQL and relational databases. It covers tables, foreign keys, queries, data manipulation, and more. (4 hour YouTube course): https://www.freecodecamp.org/news/learn-sql-course-for-beginners-in-spanish/
5. Todays song of the week is the 1988 song by Genesis sideproject Mike + the Mechanics: Nobodys Perfect. If you like synths and guitar solos, youll love this song. Paul Young has an incredible voice. And I love the edifying message behind the song. The video is as 80s as they get: https://www.youtube.com/watch?v=L7mQ26YCsho")
