TypeScript in React - Full Tutorial // TRAIN BRAIN

TypeScript in React - Full Tutorial

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

freeCodeCamp.org

Learn to code for free....

TypeScript in React - Full Tutorial

AI Agents For Beginners – OpenClaw Case Study

Why problem-solving is key for developers

Every Major AWS Outage (And Why They Keep Happening)

Command Line Basics for Beginners - Full Course

How Hackers Think

Notion Workers – Full Tutorial 2026

Build Your Own OpenClaw Using Vercel, Composio, Supermemory

Why apps designed by AI look like apps designed by AI - and why skilled designers still matter

Why Computers Can’t Count Money

Learning a new skill is tough. But as Jessica says, the only way to fail is to stop & not come back.

Build a Self-Healing CI/CD Pipeline with AI

"I just like computers" - sounds like reason enough to work in tech, doesn't it?

If you're working on a college or job application, think about this: what makes you uniquely you?

CSS logical properties change how you code - and Chris breaks it down here.

Web Scraping for Beginners – Extract Data with an API

Back in 2004, email seemed like a solved problem. But an engineer at Google had different ideas...

Organizing a huge hackathon like TreeHacks is no small feat...but for Rachel, it was so worth it.

The first webcam was invented to watch...coffee?

Docker Full Course 2026

Can you help a company solve a problem - and will they let you in and learn from you?

Sometimes, the more you learn about something, the more curious you become. Follow that curiosity.

Build Your Own AI Agent – Full Course with OpenAI, Langchain, Render Deployment

Did you know...Instagram didn't start off as a photo-sharing app?

How Jessica "accidentally" became a developer while living and working in Japan

Have you used the has selector in CSS? According to Chris Coyier, it's a game-changer.

Here's a little programming challenge for you: can you figure out the output of this code?

Web Scraping with Python & JavaScript – MERN Stack Full Course

Why in-person conferences still matter these days

Figma – Full Course 2026

Here's a fun exercize for ChatGPT

Get started using Three.js without having to use npm

Production RAG with LangChain & Vector Databases – Full Course

Is your job costing you your health?

In the beginning, Amazon sold...1 book. In its first week. What a start.

In life, things should be important or enjoyable - or ideally both

Why understanding key ML concepts really helps you use LLMs more effectively

How many devs actually use that whole million-token context window...?

Manus AI – Complete Course for Developers

Don't try to go it alone - build up a community of supporters. Life will be much easier.

Don't try to learn a new skill in a vacuum - build with a goal in mind

Netflix was created because of a late fee - thanks, Blockbuster!

Building trust at a new job is key - and so is being someone people actually want to work with

Why companies still need real people responsible for critical work

Think in JavaScript – The Hard & Conceptual Parts (Full Course)

AWS Certified Cloud Practitioner Certification Course 2026 (CLF-C02) - Pass the Exam!

Google almost had a very different name (and functionality)...

Stop choosing between learning coding fundamentals and learning to use AI. Do both.

Are you familiar with the Zen of Python? Estefania breaks down the principles here.

Build something real first, then sell it

Why big apps choose web over native

Apple's first logo was...complicated

Learning "just in time" is a lot easier than it used to be. Swyx talks about why.

Spatial computing might seem like something from the future, but it's not really...

Open Models Coding Essentials – Running LLMs Locally and in the Cloud Course

So what's CodePen 2.0? Why is it better? Chris Coyier tells you all about it.

Become the best at what you love doing. That'll get employers to notice you.

JavaScript Event Loop & Asynchronous Programming

YouTube was almost a very different site...

Quick tip from Homebrew project leader Mike McQuaid: downtime is important. Simple, right?

Avoid shortcuts, be honest about where you are, and learn for yourself.

Getting code to do what you want it to do is only a small fraction of the job

Stanford's youngest instructor on InfoSec, AI, catching cheaters - Rachel Fernandez [Podcast #217]

What is Agentic AI and how does it work? Ania explains here.

If you suddenly lost all your programming knowledge, what should you focus on learning today?

Inside the world's most elite student hackathon – Full Documentary on Stanford Tree Hacks 2026

Hot take from the fCC podcast: Use LLMs but don't treat them as a silver bullet.

We all know AI can be...divisive. Justin lays out a key reason why in his chat with Quincy.

Test-driven development is helpful, but it misses the mark in certain key areas

Gemini CLI Essentials – Full Course

How does an API work? Ania explains it simply here.

Sliding Window Algorithm for Tech Interviews - Full Course

If you're a junior developer, Swyx explains how you need to step up

Tired of switching between C# for the back end and JS for the front end?

3D Web Development with Blender and Three.js – Create a Cozy Café Portfolio

In learning, information often isn't the issue. It's knowing what's useful, and what feels wrong.

Automate Your Life in 4 hours – Agent and Automation Zapier Course

What motivates people to keep contributing to open source projects?

Software itself has no value. It's the solutions that are valuable, and that will sell.

If you're job hunting, build software that removes friction from your own work