React with TypeScript - Complete Guide 2026

Introduction

React + TypeScript is a match made in heaven! Let's learn how to use them together!

What You Will Learn

• Setting up React + TypeScript
• Typing components & props
• Typing state & hooks
• Forms with TypeScript

Prerequisites

• React Basics
• TypeScript Basics

Setting Up React + TypeScript!

Vite!

npm create vite@latest my-react-ts-app -- --template react-ts

Typing Function Components!

import React from "react";

interface GreetingProps {
  name: string;
  isAdmin?: boolean;
}

const Greeting: React.FC<GreetingProps> = ({ name, isAdmin = false }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {isAdmin && <p>Admin user!</p>}
    </div>
  );
};

export default Greeting;

Typing useState!

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState<number>(0);
  const [user, setUser] = useState<{ name: string } | null>(null);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Typing Forms!

import { useState, FormEvent } from "react";

interface FormData {
  email: string;
  password: string;
}

const LoginForm = () => {
  const [formData, setFormData] = useState<FormData>({
    email: "",
    password: "",
  });

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(formData);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" value={formData.email} onChange={handleChange} />
      <input type="password" name="password" value={formData.password} onChange={handleChange} />
      <button type="submit">Login</button>
    </form>
  );
};

Best Practices

1. Always type props: Interfaces!
2. Type state: Especially objects/arrays!
3. Use React.FC or just functions: Both are fine!

Summary

React and TypeScript work perfectly together!

Related Articles

• Node.js with TypeScript

Previous Tutorial

← Utility Types

Next Tutorial

Let's learn Node.js with TypeScript! → Node.js with TypeScript