React, Explained From Zero — Part 3: Understanding Components, JSX, and TSX

In Part 2, we saw how a React application starts and which files actually matter.

At this point, most beginners can run the app successfully — but something still feels weird.

You open App.jsx and think:

“Why does this look like HTML inside JavaScript?”

That confusion is completely normal.

To understand React properly, you must understand components and JSX. Once this clicks, React stops feeling magical and starts feeling logical.

That’s exactly what we’ll focus on in this part.

Goal of This Part

By the end of this article, you will:

• Understand what a React component really is
• Know what JSX is and why React uses it
• Be comfortable writing basic JSX
• Understand what .jsx and .tsx files mean
• Know when you need to care about TSX (and when you don’t)

Why React Code Looks Like HTML Inside JavaScript

Let’s start with the confusion itself.

When you look at this:

<h1>Hello React</h1>

It looks like HTML.

But this code lives inside a JavaScript file.

So what’s going on?

React uses a special syntax called JSX that allows you to write UI code in a way that resembles HTML, while still being JavaScript.

A simple mental model:

JSX lets you describe what the UI should look like, using a syntax that is easy for humans to read.

It’s designed this way on purpose — because UI is easier to understand visually than through plain JavaScript function calls.

What Is a React Component?

Before understanding JSX, we need to clearly understand components.

At its core, a React component is just a JavaScript function.

Here’s a simple example:

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

That’s it.

• App is a function
• It returns something that looks like HTML
• React uses that return value to build the UI

A useful way to think about it:

A React component is a function that returns UI.

React takes that returned UI and displays it in the browser.

What Is JSX?

Now let’s name the thing we’ve been using.

JSX stands for JavaScript XML.

It’s a syntax extension that allows you to write code like this:

const element = <p>This is JSX</p>;

Even though it looks like HTML, this is not HTML.

• Browsers do not understand JSX
• JSX runs inside JavaScript files
• Tools like Vite convert JSX into normal JavaScript behind the scenes

You don’t need to worry about how that works yet — just know that JSX is JavaScript syntax designed for writing UI.

JSX vs HTML (Important Differences)

JSX looks similar to HTML, but there are some important differences you should know early.

1. JSX Must Return One Parent Element

This is not allowed:

<h1>Hello</h1>
<p>Welcome</p>

This is allowed:

<div>
  <h1>Hello</h1>
  <p>Welcome</p>
</div>

Everything must be wrapped in a single parent element.

2. className Instead of class

In JSX, you write:

<div className="container">

Not:

<div class="container">

Why?

Because class is a reserved keyword in JavaScript.

This is one of the most common beginner mistakes — and completely normal.

3. JavaScript Goes Inside { }

JSX allows you to insert JavaScript expressions using curly braces.

Example:

function App() {
  const name = "React";
  return <h1>Hello {name}</h1>;
}

This will display:

Hello React

You’ll use this pattern a lot later.

What Is TSX?

At some point, you may see files named:

• App.jsx
• App.tsx

The difference is simple:

• JSX → JavaScript + JSX
• TSX → TypeScript + JSX

TSX is used when a React project is written in TypeScript instead of JavaScript.

Important Reassurance for Beginners

If you’re learning React with JavaScript:

You do NOT need to worry about TSX right now.

The concepts are the same. The syntax is almost identical. TypeScript just adds extra type checking.

You can safely ignore TSX until you’re comfortable with React itself.