Creating Our First React App with TypeScript

React is one of the most popular JavaScript libraries for building modern web applications. It helps developers create fast, interactive, and reusable user interfaces. In this post, we’ll learn how to create our first React app from scratch. We’ll set up our development environment, create a new project, and run it in our browser.

---

🧩 Prerequisites

Before you begin, you may want to go through the following posts to get the most out of this tutorial:

• 👉 Getting Started with Node.js: Setup and Hello World — to install and understand Node.js, which React depends on.
• 👉 What Is React and How It Works — to understand React’s core concepts before building your first app.

---

💡 What We’ll Learn

By the end of this tutorial, we’ll know how to:

• Set up our computer for React development
• Create a new React app using a modern tool
• Run our app locally in the browser
• Understand the basic structure of a React project

---

🧰 Step 1: Check Our Tools

Before creating a React app, make sure we have:

• Node.js (version 18 or later)
• npm (comes with Node) or yarn as a package manager

To confirm, open the terminal (Command Prompt, PowerShell, or VS Code Terminal) and run:

node -v
npm -v

If we see version numbers, we’re ready!
If not, download and install Node.js as mentioned in the prerequisites.

---

⚙️ Step 2: Create a New React App

The modern and recommended way to create a React app today is to use Vite, because it is extremely fast, lightweight, and actively maintained. We’ll begin with Vite, and then also take a quick look at Create React App (CRA) — a once-popular beginner-friendly tool that is now officially deprecated.

To use Vite to create the react app run:

npm create vite@latest react-starter-01-vite-typescript

Then follow the prompts:

• Choose React as framework

• Choose TypeScript as the vairant. If you want to understand about all variants, read Choosing the Right React Variant with Vite.

• Select No for Use rolldown-vite (Experimental)?:

A bundler helps ensure your project builds smoothly and efficiently by packaging, optimizing, and preparing your code for the browser. Rolldown is a new Rust-based bundler that will eventually improve performance, but it is still experimental. For now, it’s better to use the stable bundler called Rollup so everything behaves consistently.

• When Vite asks “Install with npm and start now?”, you can select No if you want to run the installation commands manually (as shown in this tutorial), or choose Yes to let Vite install everything and start the app automatically.
• Enter your project name (for example, my-vite-app)

Note: We can see a message like “Scaffolding project in C:\Dev\ReactProjects\react-starter-01-vite-typescript…”. Scaffolding simply means Vite is creating the starter project structure for us — generating the necessary folders, files, and initial code so we can begin coding right away.

Next, move into the folder and install dependencies:

cd react-starter-02-vite-ts-reactcomp
npm install
npm run dev

Your app will run locally at a URL like
👉 http://localhost:5173

Vite launches almost instantly, and changes in your code reflect immediately in the browser.

---

🧱 Step 3: Explore the Folder Structure

Once our app is created, we’ll see a few folders and files that make up our React project.

react-ts-app/
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
├── node_modules/
├── public/
│   └── vite.svg
└── src/
    ├── App.css
    ├── App.tsx
    ├── index.css
    ├── main.tsx
    └── assets/
        └── react.svg

Key Folders and Files:

• src/ – Contains your React components, TypeScript files, CSS styles, and assets.
• App.tsx – The main React component for your application.
• App.css – Styling for the App component.
• index.css – Global styles applied across the project.
• main.tsx – The entry file that renders your React app into the DOM.
• assets/ – Folder for static files like SVG icons (e.g., react.svg).
• index.html – The main HTML file that loads your React app.
• vite.config.ts – Vite’s configuration file for development and build settings.
• tsconfig.json – TypeScript configuration file for your application source code.
• tsconfig.node.json – TypeScript config for Node-specific files such as vite.config.ts.
• package.json – Contains project scripts and dependencies.
• node_modules/ – Automatically generated folder storing installed packages.

---

✏️ Step 4: Edit Our First Component

We’ll find our main app file inside the src folder. This is the component that defines what appears on the screen when your app runs.

In a Vite project, the structure and behavior are almost identical.

Open src/App.tsx and replace its contents with:

function App() {
  return (
    <div>
      <h1>My First React App 🚀</h1>
      <p>Hello, world! I just created a React app using Vite.</p>
    </div>
  );
}

export default App;

Then check src/main.tsx.
This file renders your app to the web page:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Now save the file and look at our browser window. If our dev server (npm run dev) is running, Vite will instantly reload the app and show your new content — no refresh required. Vite uses Hot Module Replacement (HMR), which updates our app in milliseconds while keeping it running smoothly.

---

💡 What’s Happening Behind the Scenes

Vite run a local development server that watches our files for changes. Whenever we save a file:

• React detects what changed
• It re-renders only the updated parts
• The browser updates automatically without losing our app’s state

This is what makes React development feel so fast and interactive — we can see results immediately after saving.

✅ Now our app updates in real time — every time you hit Save, you’ll see your changes appear instantly in the browser!

---

🧠 Step 5: What’s Next?

You’ve just built and launched our first React app — great job! 🎉
From here, we can start exploring:

• Components – The building blocks of React apps
• Props and State – How data is passed and managed
• Events and Hooks – How React handles interactivity and side effects

---

✅ In a Nutshell

• Install Node.js and npm
• Create our app using Vite
• Run our app locally
• Edit and view our first component in the src/ folder

That’s it — we’ve created our first React app from scratch! 🚀

---

🟢 Bonus: Create React App (CRA) (Deprecated)

In this post we saw how to use Vite for creating a react app. Create React App (CRA) is a command-line tool that used to be the default way to quickly set up a React project without configuring Webpack or Babel manually. For years, it was the recommended starter tool for students and beginners.However, Create React App is now officially deprecated. In February 2025, the React team announced the sunsetting of CRA because:

• It uses outdated tooling (Webpack 4)
• Many of its dependencies are deprecated
• It installs slowly
• It lacks modern optimization features
• It has no active maintainers

You will see warnings during installation if you install. CRA still works for learning React basics. But it should NOT be used for real-world or production apps.

If you still want to try CRA (for learning purposes):

npx create-react-app react-starter-cra-app

This creates a new folder called react-starter-cra-app with all the files you need.

Next, navigate into your project and start the app:

cd react-starter-cra-app
npm start

Your app will open automatically in your browser at
👉 http://localhost:3000

We’ll see React’s default welcome page.