How to Create a React App with TypeScript: Step-by-Step Tutorial for Beginners

TypeScript simplifies React development by catching errors while you write code. You get helpful warnings and fix issues before your app goes live.

In this tutorial, we’ll walk you through setting up a React project with TypeScript, even if you’ve never done it before. We’ll explore each step and build a simple greeting card to see how it works.

Note: The setup takes about 10 minutes and uses Vite, a modern tool that creates your entire project structure automatically. We’re using Vite because Create React App is deprecated—the React team no longer recommends it for new projects.

Quick setup summary

Setting up a React + TypeScript project involves three connected steps that build on each other: get Node.js, create your project, and build a component.

• First, you’ll install Node.js, which provides the foundation for modern web development tools. This one-time setup enables you to use React, TypeScript, and other current JavaScript frameworks on your computer (via the terminal).

• Next, you’ll use Vite to generate your project. This creates a folder with all your React and TypeScript files already configured and ready to use. You’ll install the required packages and start a development server that displays your app in the browser.

• Finally, you’ll write your first TypeScript component to see how the type system works in practice. You’ll create a component that accepts specific data types, and TypeScript will guide you as you build.

What you need before you start: React, TypeScript, and Vite

To build a React app with TypeScript, you need basic JavaScript knowledge and a computer with internet access. That’s enough to start testing the waters.

Here are the main concepts to be aware of:

• React is a JavaScript library for building user interfaces. You write components that display content and respond to user actions like clicks or form submissions. 

• TypeScript adds type checking to JavaScript. For example, if you write code that expects a number but accidentally give it text instead, TypeScript will show you a warning. 

• Vite is a building tool for modern web projects. It creates your project structure, configures TypeScript, sets up a development server, and prepares your code for production. Before Vite, developers had to configure all these pieces manually, which was more complex and time-consuming.

These three tools work together to give you a complete development environment. React handles the user interface, TypeScript prevents common coding errors, and Vite manages everything behind the scenes.

Tip: If you haven’t used React before, sign up for Mimo’s Front-End Career Path. It lets you learn by building and helps you create a portfolio of projects that will get you hired. You can also explore faster tracks like the TypeScript, JavaScript, and React courses.

How to create a React app with TypeScript

Now, let’s roll up our sleeves and develop a simple greeting card app that displays personalized messages. 

A greeting card app world great for learning TypeScript because it uses common React patterns: components that accept data (props) and display different content based on that data. 

You’ll see how TypeScript prevents mistakes when passing the wrong type of information to components.

Step 1: Install Node.js

Go to nodejs.org and download the LTS version. LTS stands for “Long Term Support,” and it’s the most stable version for beginners.

Run the installer and follow the setup wizard. It installs Node.js and npm (Node Package Manager) automatically.

To check if it worked, open your terminal or command prompt and type:

node --version

You should see something like v24.14.1, depending on which version you downloaded.

Step 2: Create your project

Next, use one command that creates a complete React + TypeScript project with all files and configuration ready to use.

Go back to your terminal and run this command for our greetings app:

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

Here’s what each part does:

• npm create vite@latest – Downloads and runs the newest version of Vite
• my-greeting-app – The name of your project folder (you can change this)
• — –template react-ts – Uses the React + TypeScript template

The command will download Vite and create your project. Once it’s done, you’ll have a new folder called my-greeting-app with all your project files inside. 

The development server will start automatically and show you a local URL

Open that URL in your browser to see the default Vite app with a counter button. Keep that terminal window open while you work.

Step 3: Open your code in an editor

Right now, you have a webpage with a counter (a default template), but the actual code that creates that counter lives in a file on your computer. To change what appears on the webpage, you need to edit that file.

The file is located at my-greeting-app/src/App.tsx on your computer.

To edit it:

1. Download a code editor like VS Code from code.visualstudio.com if you don’t have it
2. Open VS Code
3. Go to File → Open Folder
4. Find and select your my-greeting-app folder → click Open
5. Click on src/App.tsx in the sidebar that appears

When you open the file, you’ll see the React component code that generates the webpage you viewed. 

It includes functions that create the Vite and React logos, the counter button, and the styling you see in your browser.

Step 4: Replace the counter with greeting cards

Now we’ll replace all the counter code with greeting card components that demonstrate TypeScript’s type checking.

Looking at the code in VS Code, you can see this creates the counter button and logos from your webpage. We’ll replace all of this with greeting cards that show how TypeScript prevents coding mistakes.

Select all the code in the file (Ctrl+A on Windows or Cmd+A on Mac) and delete it. Then paste in this new code:

// This interface defines what data each greeting card needs
interface GreetingCardProps {
  name: string        // Must be text
  age: number         // Must be a number  
  favoriteColor?: string // Optional (the ? makes it optional)
}
// Our greeting card component
function GreetingCard({ name, age, favoriteColor }: GreetingCardProps) {
  return (
    <div style={{ 
      padding: '20px', 
      border: '2px solid #ccc', 
      borderRadius: '8px',
      margin: '10px 0'
    }}>
      <h2>Hello, {name}!</h2>
      <p>You are {age} years old.</p>
      {favoriteColor && <p>Your favorite color is {favoriteColor}.</p>}
    </div>
  )
}
function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>My Greeting Cards</h1>
      <GreetingCard 
        name="Sarah" 
        age={25} 
        favoriteColor="blue" 
      />
      <GreetingCard 
        name="Mike" 
        age={30} 
      />
    </div>
  )
}
export default App

Save the file (Ctrl+S or Cmd+S). Your browser will automatically refresh and show two personalized greeting cards instead of the Vite logos and counter button.

Step 5: Explore how TypeScript catches errors

Now let’s see TypeScript’s main benefit: preventing coding mistakes before they break your app.

The interface GreetingCardProps at the top of your code defines what data each greeting card expects: a text name, a number age, and an optional text color.

Let’s see what happens when you break this rule. 

In VS Code, find Sarah’s greeting card and change age={25} to age=”twenty-five” (with quotes around the number).

Save the file. 

VS Code immediately shows you a red squiggly line under that text. Hover over it to see the error: “Type ‘string’ is not assignable to type ‘number’.”

TypeScript caught your mistake instantly. Without TypeScript, this error might not surface until someone tries to do math with “twenty-five” and crashes your app. Change it back to age={25} and the error disappears. 

Next steps: from setup to real apps

Congrats! You successfully created a React app with TypeScript that demonstrates type safety in action. 

Your greeting card components show how TypeScript prevents common coding errors before they reach users.

This tutorial covered the setup and basic TypeScript concepts. That said, building real React applications requires understanding concepts like state management, event handling, and component lifecycle. 
Ready to dive deeper? Check out Mimo’s React course to learn these core concepts and start building interactive apps with AI assistance.