Understanding the Code Behind Our First React with TypeScript App

In our blog post Creating Your First React App with TypeScript, we created a brand-new React project using Vite and then opened the file src/App.tsx to replace its contents with this code:

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;

Let’s break it down step by step and understand what exactly is happening here—and how it connects with the main.tsx file that renders our app to the browser.

---

What’s Happening Inside App.tsx?

App.tsx is the heart of your React application. It defines your main component—the one that gets displayed when the app loads.

✅ 1. Creating a Component

function App() { ... }

This defines a React functional component called App.

• React components are simply JavaScript/TypeScript functions that return JSX.
• Component names must start with capital letters (App, Header, HomePage, etc.), because this is how React distinguishes components from normal HTML elements.

✅ 2. Returning JSX (Your UI)

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

Here we are returning JSX, a syntax extension that lets you write HTML-like code inside TypeScript.

• <h1> displays the main heading.
• <p> displays the paragraph.
• Everything is wrapped in a single parent <div> because React components must return exactly one parent element.

JSX is not HTML — it gets converted into JavaScript behind the scenes — but it feels like writing HTML, which makes building UI much easier.

This is the actual UI your users will see.

✅ 3. Exporting the Component

export default App;

This makes the App component available for other files—especially main.tsx, which will import it and show it on the screen.

---

🌐 Understanding main.tsx

Along with App.tsx, our project contains another important file: src/main.tsx.
Here is the code we saw inside:

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>,
)

If App.tsx defines what our UI looks like, main.tsx defines where and how to display it.

Let’s understand its flow.

---

Breaking Down main.tsx

📦 Understanding the Imports

Before our app can render anything, we need to bring in a few important tools.

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

Here’s what each of these imports actually does.

---

🟦 What is react?

react is the core library used for building user interfaces.

It handles:

• Creating components
• Managing component state
• Handling events
• Working with JSX
• Determining how the UI should look based on data

When we import:

import { StrictMode } from 'react'

we are pulling a special tool from the React library — StrictMode — which helps catch potential issues during development.

---

🟩 What is react-dom/client?

React itself doesn’t know how to draw anything on the screen.

That’s the job of React DOM.

react-dom/client is the part of React that interacts with the browser’s DOM (Document Object Model).

It handles:

• Inserting your React components into the browser
• Updating the UI efficiently when data changes
• Cleaning up when components are removed

So when you import:

import { createRoot } from 'react-dom/client'

you’re importing the function that tells React:

“Attach your UI to this specific element in the HTML.”

---

🟧 What is StrictMode?

import { StrictMode } from 'react'

StrictMode is a wrapper that React provides to highlight issues in our application.

It:

• Warns about unsafe lifecycle methods
• Highlights legacy APIs
• Detects unexpected side effects
• Helps enforce best practices

It does not alter our UI or affect production builds — it’s purely a development helper.

---

🟥 What is createRoot?

import { createRoot } from 'react-dom/client'

createRoot initializes the React rendering engine.

React cannot modify HTML directly — it must “connect” to an existing HTML element.

By default, this is:

<div id="root"></div>

in our index.html.

createRoot establishes that connection point.

---

🟨 Why Import index.css?

import './index.css'

This imports your global stylesheet.

• Vite includes it automatically in our bundle.
• Any styles added here apply across our entire application.
• Even if the file is empty initially, it’s ready for future styling.

---

🟪 What is App?

import App from './App.tsx'

This imports our main component — the one we just created in App.tsx.

Everything that React renders begins with this App component.

---

🧭 How main.tsx Renders Our Application

Now that we understand the imports, let’s break down the rendering code.

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

✔ Step 1 — Find the HTML Element

document.getElementById('root')!

This searches the HTML for the element with the ID "root". In the index.html we can find this as:

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>

The ! is the TypeScript non-null assertion operator, which means:

“I’m certain this element exists — skip null-check warnings.”

---

✔ Step 2 — Create the React Root

createRoot(...)

This tells React:

“Start managing the UI inside this HTML element.”

---

✔ Step 3 — Render the App

.render(
  <StrictMode>
    <App />
  </StrictMode>,
)

This is where the magic happens:

• The entire app is wrapped in StrictMode
• The App component is rendered
• React takes the JSX you wrote and converts it into real HTML
• That HTML is inserted into <div id="root"></div>

Your app is now displayed on the screen.

---

🔄 Complete Flow of Our React App

To summarize, here’s how everything connects:

1️⃣ Browser loads index.html

Contains:

<div id="root"></div>

2️⃣ Vite loads main.tsx

The entry point of your React project.

3️⃣ React attaches to the DOM using createRoot

The DOM (Document Object Model) is the browser’s internal representation of your webpage, where every HTML element (like <div>, <p>, or <h1>) becomes a node that JavaScript and React can access and update, and React attaches to this DOM using createRoot, which tells React exactly which HTML element (usually <div id="root">) it should take control of and render your entire app inside.

4️⃣ App.tsx returns JSX (our UI)

5️⃣ React converts JSX into real HTML

6️⃣ The UI appears in the browser 🎉