DEV Community

Cover image for Understanding JSX & How a React App Starts (Beginner-Friendly Guide)
Jamir Khan
Jamir Khan

Posted on

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

#react #frontend #javascript #jsx

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
Enter fullscreen mode Exit fullscreen mode

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

If not:

  1. Visit nodejs.org
  2. Download the LTS version
  3. Install it (just keep clicking Next)
  4. 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>
);
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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!!!');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Output:

Age next year: 26
Enter fullscreen mode Exit fullscreen mode

You can also render variables dynamically:

const title = "Daily Improvements";
<h1>{title}</h1>
Enter fullscreen mode Exit fullscreen mode

This is what makes React UI dynamic and powerful.

JSX Rule: className Instead of class

In HTML, we write:

class="text-red"
Enter fullscreen mode Exit fullscreen mode

But in JSX, we use:

className="text-red"
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)