Posted in React

JSX in React: Simplifying UI Code with HTML Inside JavaScript

Estimated read time 3 min read

When you first dive into React, one of the most unusual — and powerful — things you’ll notice is something called JSX. At a glance, JSX looks like you’re writing HTML inside your JavaScript code. Strange? Maybe. But it’s actually one of React’s biggest advantages.

Let’s break it down in a simple, beginner-friendly way.

🧾 What is JSX?

JSX stands for JavaScript XML. It’s a syntax extension that allows you to write HTML-like code inside JavaScript files. JSX helps make your UI code more readable, structured, and easier to maintain — especially when building components in React.

Here’s a basic JSX example:

const greeting = <h1>Hello, welcome to React!</h1>;

It may look like HTML, but it’s really JavaScript under the hood.

🧩 JSX and React – Are They the Same?

Nope, they’re different.

  • React is the JavaScript library used to build user interfaces.
  • JSX is just the syntax that makes writing those interfaces easier.

You can use React without JSX — but most developers don’t, because JSX makes React development much smoother.

💡 Why Use JSX?

Without JSX, creating a simple heading in React looks like this:

const heading = React.createElement(
  "h1",
  { id: "main-heading" },
  "Hello World From React!"
);

With JSX, it becomes way more intuitive:

const heading = <h1 id="main-heading">Hello World using JSX</h1>;

JSX lets you:

  • Write cleaner and shorter code
  • See your UI structure more clearly
  • Blend logic and layout in one place

⚙️ How Does JSX Work?

JSX isn’t valid JavaScript by itself — so how does it work?

When you run your React app, tools like Babel take your JSX and convert it into regular JavaScript. This is what happens behind the scenes:

const heading = <h1>Hello!</h1>;

gets turned into:

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

That means everything you write with JSX eventually becomes regular JavaScript function calls — optimized and handled by React.

📦 JSX Supports Dynamic Expressions

One of the best parts of JSX is how easily you can embed JavaScript inside your HTML-like structure:

const name = "TechCanva";
const element = <h2>Hello, {name}!</h2>;

You can also use conditionals:

const isLoggedIn = true;
const message = <p>{isLoggedIn ? "Welcome back!" : "Please log in."}</p>;

❗ JSX Rules to Remember

While JSX looks like HTML, there are a few important differences:

  • Use className instead of class
  • All tags must be properly closed (<img />, <br />, etc.)
  • JSX elements must return a single root element (use fragments or a <div>)

🏁 Conclusion

JSX is one of the features that makes React development so enjoyable. It combines the structure of HTML with the power of JavaScript — giving you the best of both worlds.

If you’re just starting out with React, don’t be intimidated by JSX. Once you get used to it, you’ll wonder how you ever built UIs without it.

Related