What is JSX in React?

When you start working with React, you’ll notice something a little different. React uses a syntax that looks like HTML but lives inside JavaScript files. It can make you think:

"Wait… is that HTML inside JavaScript? Is that even allowed?"

It’s not just allowed — it’s JSX, and it’s one of the cool features that makes React stand out. But what is it, really? And how does it fit into the whole React experience?

In this article, we’re going to explore:

1. What JSX is and why it exists.
2. How JSX works under the hood (don’t worry, no technical jargon).
3. The Virtual DOM — what it is and why React uses it.
4. The full rendering process from start to finish.

---

What is JSX?

Let’s break it down: JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that lets you write code that looks like HTML, but under the hood, it’s still JavaScript.

Here’s a quick example:

function HelloWorld() {
  return <h1>Hello, world!</h1>;
}

That looks like plain HTML, right? But it’s not! It’s JSX, and here’s the cool part — React will turn this JSX into real JavaScript that the browser can understand.

But Wait... How Does That Work?

Okay, now you might be wondering: “How does JSX turn into JavaScript if it’s not actually HTML?” Great question! Babel does the heavy lifting here. Babel is a tool that compiles or transforms JSX into regular JavaScript that the browser can run.

For example, this JSX:

<h1>Hello, world!</h1>

Gets transformed by Babel into this plain JavaScript:

React.createElement('h1', null, 'Hello, world!');

This code tells React, "Hey, create an <h1> element with the text Hello, world! in it." React takes that and updates the browser with the correct content.

🧠 Fun Fact
While JSX looks like HTML, it’s actually just JavaScript under the hood. It makes the code easier to write and understand, and React knows exactly how to turn it into DOM elements.

Browsers just understand HTML and JavaScript. They do not understand buzz words like TypeScript, React etc. All such tools, languages and framework have some way of translating the 'easy to use' syntax to JavaScript

---

Why JSX Exists

Now, let’s talk about why JSX exists. Why couldn’t we just write HTML and JavaScript separately?

Well, React is all about components. Instead of splitting your UI structure (HTML) from the logic (JavaScript), React allows you to combine them in one place. It makes everything more organized, efficient, and reusable.

Imagine if you had to write HTML in one file and JavaScript in another file, then try to sync them every time you wanted to make a change. With JSX, you can keep your markup and your logic together in the same place, which is a huge win for productivity.

---

A Simple Analogy

Think of JSX like a recipe card. You’ve got the ingredients (your HTML) and the instructions (your JavaScript) in one place. If they were in two different drawers, you’d constantly be running back and forth to make sure everything is in sync. With JSX, everything you need is right there on one card, ready to go.

---

JSX Rules Beginners Should Know

Okay, now that you understand what JSX is and why it exists, let’s go over some basic rules. Don’t worry, they’re easy to follow!

1. One Parent Element

In JSX, every component must return one parent element. If you try to return multiple elements without wrapping them, it won’t work.

Here’s the wrong way:

return (
  <h1>Title</h1>
  <p>Description</p>
);

This won’t work because there’s no single parent element wrapping both the <h1> and <p>.

Here’s the right way:

return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

Or, if you don’t want a div, use a fragment (<> and </>):

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

---

2. Use className Instead of class

In HTML, we use class to define a CSS class, but in JSX, we use className. This is because class is a reserved word in JavaScript.

<div className="container">Content</div>

---

3. Attributes Are camelCase

In JSX, attributes like onclick become onClick, and tabindex becomes tabIndex. This is because JSX follows JavaScript conventions, so attributes are written in camelCase.

Example:

<label htmlFor="email">Email:</label>
<input type="email" id="email" />

---

4. JavaScript Expressions Go Inside {}

You can embed JavaScript expressions inside JSX using {}. For example:

const name = "React Developer";
return <h1>Hello, {name}!</h1>;

This makes it easy to inject dynamic content into your JSX.

---

5. Conditional Rendering with Ternaries or &&

Sometimes, you need to render something conditionally. You can do that easily with the ternary operator or the && operator:

{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}

Or with &&:

{notifications.length > 0 && <p>You have new messages!</p>}

---

JSX in Action: A Simple Component

Let’s see JSX in action with a simple ProfileCard component:

function ProfileCard({ name, bio, imageUrl }) {
  return (
    <div className="card">
      <img src={imageUrl} alt={`${name}'s profile`} />
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );
}

Here’s what’s going on:

1. function ProfileCard(...) — This is a functional component that takes in props.
2. <div className="card"> — This is the root element of the component.
3. <img ... /> — The self-closing <img> tag with the src and alt attributes.
4. {name} and {bio} — These are dynamic values that come from the props and are injected into the JSX.

---

⚠️ Common Mistake
JSX might look like HTML, but it’s actually JavaScript. That means:

• You can’t use browser-specific attributes like for or onclick.
• You need to follow JSX’s rules, not HTML’s.

Wrapping Up JSX

JSX might seem like an odd mix of JavaScript and HTML, but once you get the hang of it, it becomes an incredibly powerful way to build user interfaces in React. It allows you to write more declarative and readable code, making React development smooth and efficient.

Key Takeaways:

• JSX is JavaScript: Even though it looks like HTML, it's just syntactic sugar that React can convert into real JavaScript objects.
• Component-centric UI: JSX works in conjunction with React components, and it allows you to combine logic and UI in a clean, efficient way.
• One parent element: Always return one parent element in JSX.
• Attributes are in camelCase: Instead of using class, you use className in JSX, and remember to use htmlFor instead of for.

What's Next?

Now that you’ve got a solid understanding of JSX, you're ready to explore the next core concept in React — the Virtual DOM. In the next article, we’ll dive into how React uses the Virtual DOM to make updates faster and more efficient by minimizing direct DOM manipulations.

Up Next:
Understanding the Virtual DOM →

---

Follow me on DEV for future posts in this deep-dive series.
https://dev.to/a1guy
If it helped, leave a reaction (heart / bookmark) — it keeps me motivated to create more content
Want video demos? Subscribe on YouTube: @LearnAwesome