Introduction to JSX

In the last lesson you learned about Running a React Application, where you may have spotted HTML-looking code sitting inside a JavaScript file. That is JSX, and this lesson is all about understanding it.

🤔 Why JSX Exists

Here is the pain. A user interface is really two things mixed together:

• There is the markup, so that is what the screen looks like.
• There is the logic, so that decides what shows up and when.
• For a long time we kept those in separate files, right? The HTML lived in one place. The JavaScript that controlled it lived somewhere else.
• So to understand one button you had to jump back and forth between files. You had to keep both in your head at once.

JSX fixes that. It lets you write the markup right next to the logic that drives it. Same file. Same function.

So instead of describing your screen in one language and controlling it in another, you describe what the UI should look like in one spot. It sits right next to the code that decides it.

🧩 What JSX Actually Is

JSX stands for JavaScript XML. Here is what that means in plain words:

• It is a syntax extension for JavaScript. A syntax extension just means extra grammar added on top of normal JavaScript.
• So it lets you write something the plain language does not allow on its own.
• What it lets you write is HTML-like markup directly inside your JavaScript.

Here is the smallest possible piece of JSX.

const element = <h1>Hello</h1>;

Read that line slowly. Here is what each part is doing:

• On the left we have a normal JavaScript const, so nothing new there.
• On the right, where you would normally expect a string or a number, we have <h1>Hello</h1>. That tag is the JSX part.
• It looks like HTML. But it is living inside a .js or .jsx file as part of an assignment.

Now here is the most important idea in this whole lesson. Let me say it clearly.

• JSX is not HTML. It only looks like HTML.
• JSX is not a string. Notice there are no quotes around <h1>Hello</h1>.
• The browser does not understand JSX at all. If you sent that line to a browser as it is, it would throw an error.

⚙️ How JSX Becomes Real JavaScript

So if the browser cannot read JSX, how does your app work? The answer is a step called compiling. Compiling means taking code written in one form and turning it into another form that the machine can actually run.

When you run a React project, here is what happens with your JSX:

• A build tool reads all your JSX and rewrites it into plain JavaScript before it ever reaches the browser.
• In a Babel setup, Babel does this. In a Vite project the same job is handled for you behind the scenes.
• You do not do it by hand. It happens automatically every time you save and run.

Take our tiny example again.

const element = <h1>Hello</h1>;

The build tool turns that into something close to this.

const element = React.createElement("h1", null, "Hello");

Let us walk through that compiled line piece by piece.

• React.createElement is a plain JavaScript function. This is the real thing your app runs.
• The first argument, "h1", is the type of element you want.
• The second argument, null, is for props. Props are extra settings like className. There are none here, so it is null.
• The third argument, "Hello", is the content that goes inside the tag.

So the friendly <h1>Hello</h1> you wrote is really just a nicer way to write that function call. The JSX is the version you read and write. The React.createElement version is what actually runs.

🆚 JSX Is Not HTML

JSX looks so much like HTML that it is easy to forget it is really JavaScript. That difference shows up in small ways, and they trip people up early. Here are a few you will meet soon.

Do not worry about memorizing these now. Just keep this in mind:

• The point for today is to feel that JSX has its own rules.
• It has them because it is really JavaScript, even though it looks like HTML.
• We will cover each rule properly in later lessons.

🧪 A Slightly More Real Example

In a real app you almost never assign JSX to a lone variable like that. Instead:

• You return it from a component. A component is just a function that returns JSX.
• That returned JSX is what React shows on the screen.

function Welcome() {
  return <h1>Hello, Riya!</h1>;
}

Here is what is going on in that snippet:

• Welcome is a function, and it returns one line of JSX.
• When React uses this component, it reads that <h1>Hello, Riya!</h1>.
• It compiles that down to a React.createElement call just like before, then paints it onto the page.

Hello, Riya!

Same idea as the variable example. It is just placed where it actually belongs. The JSX still is not HTML and still gets compiled. It is now living inside a component. That is exactly how you will write React from here on.

⚠️ Common Mistakes

A few easy mix-ups people have when JSX is new to them.

• Thinking JSX is HTML. It looks like it. But it is JavaScript syntax that compiles to function calls.

// ❌ Avoid: treating JSX like an HTML string
const element = "<h1>Hello</h1>"; // this is just text, React will not render it as a heading

// ✅ Good: real JSX, no quotes
const element = <h1>Hello</h1>;

• Expecting the browser to read JSX directly. It cannot. The build tool has to compile it first.
• Using class instead of className. JSX is JavaScript, and class already means something there.

✅ Best Practices

Small habits that will keep you comfortable with JSX.

• Remember the mental model. You write JSX. A tool compiles it. The browser runs plain JavaScript.
• Keep your JSX readable. It exists so humans can understand the markup easily, so do not fight that.
• Trust your build tool. You do not need to write React.createElement by hand. Let Vite or Babel do it.
• Treat JSX as JavaScript first. When something behaves oddly, remember it is code, not HTML.

🧩 What You’ve Learned

A quick recap of what you now know.

• ✅ JSX stands for JavaScript XML and is a syntax extension for JavaScript.
• ✅ It lets you write HTML-like markup right inside your JavaScript files.
• ✅ JSX is not HTML and not a string, and the browser cannot read it directly.
• ✅ A build tool like Babel or Vite compiles JSX into React.createElement calls.
• ✅ React chose JSX so you can describe the UI right next to the logic that drives it.

🚀 What’s Next?

Now that you know what JSX is and why it exists, the next step is to learn the actual rules for writing it correctly.

JSX Syntax