Understanding JSX in React: Why Does HTML Work Inside JavaScript?

Introduction

In my previous article, I explored the React project structure and understood the purpose of the files that Vite created.

The next question I had was:

How does React actually display HTML inside JavaScript?

When I opened App.jsx, I noticed something unusual. HTML tags were written directly inside a JavaScript file.

That looked strange at first because JavaScript doesn't normally allow HTML.

So I started digging deeper and discovered JSX.

In this article, I'll explain what JSX is, why React uses it, and how it makes building user interfaces easier.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like code inside JavaScript.

Instead of writing:

React.createElement("h1", null, "Hello")

Thankfully, we don't usually write React.createElement() ourselves. JSX lets us write much cleaner code.

You can write:

<h1>Hello</h1>

JSX isn't HTML. It only looks like HTML. Behind the scenes, React converts it into JavaScript.

React doesn't understand JSX directly.

When the application is built, Vite transforms JSX into regular JavaScript that browsers can understand.

Why do we use JSX?

Without JSX, creating user interfaces becomes more difficult to read and write.

Benefits of JSX:

• Easier to read and write
• Looks similar to HTML
• Makes UI code easier to maintain
• Allows JavaScript expressions inside the UI
• Helps build reusable React components

JSX vs HTML

JSX looks like HTML, but there are some differences.

HTML	JSX
class	className
for	htmlFor
Uses lowercase attribute names	Most attributes use camelCase (for example, onClick, tabIndex)
JavaScript cannot be written directly inside HTML	JavaScript expressions can be written inside {}
Some tags don't need to be closed	Every tag must be closed (for example, <img />, <input />)

These differences exist because JSX is JavaScript, not HTML.

HTML

<label for="name">Name</label>
<input class="textbox">

JSX

<label htmlFor="name">Name</label>
<input className="textbox" />

Why?

Because class and for are reserved keywords in JavaScript.

JavaScript Expressions inside JSX

Inside JSX you can execute JavaScript using curly braces {}.

Curly Braces {}

Curly braces tell React:

Everything inside the curly braces is treated as a JavaScript expression.

Example:

const age = 25;

return <h2>Age: {age}</h2>;

Inside {}, you can use:

Variables

{name}

Math

{5 + 8}

Functions

{sayHello()}

Objects

{user.name}

Ternary operators

{isLoggedIn ? "Welcome" : "Login"}

Rules of JSX

Although JSX looks similar to HTML, it follows a few rules that are different from standard HTML.

Rule 1: Return one parent element

Wrong

return (
  <h1>Hello</h1>
  <p>React</p>
);

Correct

return (
  <div>
    <h1>Hello</h1>
    <p>React</p>
  </div>
);

Or use a Fragment.

return (
  <>
    <h1>Hello</h1>
    <p>React</p>
  </>
);

Rule 2: Close every tag

Wrong

<img src="logo.png">

Correct

<img src="logo.png" />

Rule 3: Use camelCase

Wrong

<button onclick="save()">Save</button>

Correct

<button onClick={save}>Save</button>

Rule 4: Use className instead of class because class is a reserved JavaScript keyword.

Wrong

<div class="box">

Correct

<div className="box">

Rule 5: Use curly braces {} to write JavaScript expressions.

Wrong

<h1>name</h1>

Correct

<h1>{name}</h1>

Conclusion

After learning more about JSX, I realized that JSX is simply a cleaner and more readable way to build user interfaces in React.

Although it looks like HTML, it is actually converted into JavaScript before the browser runs it.

Understanding JSX has given me a much better idea of how React components are built.

Key Takeaways

• JSX lets us write HTML-like code inside JavaScript.
• React converts JSX into JavaScript during the build process.
• JSX makes React components easier to read and maintain.
• JavaScript expressions can be written inside {}.
• JSX has a few rules, such as using className, htmlFor, and closing every tag.

What's Next?

Now that I understand what JSX is and how it works, the next step is learning how to display different content based on conditions.

In the next article, I'll explore the four ways of conditional rendering in React and learn when to use each approach.

Thanks for reading, and happy coding!