Understanding JSX & How a React App Starts (Beginner-Friendly Guide)

Jamir Khan — Thu, 22 Jan 2026 06:22:15 +0000

If you’re just starting with React, you might be wondering:
Where does a React app actually start, and what is JSX really doing behind the scenes?

In this article, I’ll break it down step by step, using a simple Vite-based React app—exactly the way I explain it in my latest YouTube video.

👉 Watch the full video here:
https://youtu.be/31W0nJ2yXg8

Prerequisite: Node.js

Before running any React project Node.js must be installed on your system.

You can quickly check by running:

node -v
npm -v

If both commands show version numbers, you’re good to go 👍

If not:

Visit nodejs.org
Download the LTS version
Install it (just keep clicking Next)
npm gets installed automatically with Node

Understanding the Basic Structure of a React App

Let’s start by understanding how a React app actually runs.

1. index.html

Open the index.html file and notice two important things:

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

The main.jsx file linked at the bottom

This root div is where your entire React app gets rendered.

2. main.jsx — The Entry Point

Now open src/main.jsx.
You’ll see React’s createRoot function:

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

What’s happening here?
React creates a root node
It takes the root element from index.html
It renders the App component inside it

This is the starting point of every React app.

JSX

Now let’s talk about the most important concept in React: JSX.

What is JSX?
Normally, when using JavaScript, creating HTML requires:

createElement
appendChild
innerHTML

But React simplifies all of this using JSX.

const element = <h1>I love JSX!!!</h1>;

Important: JSX is NOT HTML

Browsers do not understand JSX.
During the build process a transpiler like Babel converts JSX into plain JavaScript

Behind the scenes, JSX becomes:

React.createElement('h1', {}, 'I love JSX!!!');

React then uses this to create actual DOM elements.

JavaScript Expressions Inside JSX

One of JSX’s most powerful features is the ability to write JavaScript expressions inside {}.

Example:

const age = 25;
<p>Age next year: {age + 1}</p>

Output:

Age next year: 26

You can also render variables dynamically:

const title = "Daily Improvements";
<h1>{title}</h1>

This is what makes React UI dynamic and powerful.

JSX Rule: className Instead of class

In HTML, we write:

class="text-red"

But in JSX, we use:

className="text-red"

Why?
Because class is a reserved keyword in JavaScript.

What Is a React Component?

A React component is simply a JavaScript function.

Two rules:

The function name must start with a capital letter
It must return something renderable (usually JSX)

Example:

function Header() {
  return <h1>Hello React</h1>;
}

Why Components Matter?

Reusability
Clean code
Easy maintenance

You can reuse the same component multiple times across your app.

Watch the Full Explanation

YouTube Video:
https://youtu.be/31W0nJ2yXg8

If this helped you:
👍 Like the video
🔔 Subscribe to Project Station
💬 Leave a comment with your questions

Thanks for reading — happy coding.

DEV Community: Jamir Khan