What is JSX? A Simple Guide for React Beginners

One of the first things that confused me when I first started learning React was JSX. At first, it felt strange that I was writing it inside JavaScript even though it appeared to be HTML.

You're not alone if you're new to React and don't know what JSX is. Based on my understanding as a beginner, I am going to explain JSX in this article as simply as possible.

---

So, What Exactly is JSX?

JSX stands for JavaScript XML.

It’s a special syntax that allows you to write HTML like code inside JavaScript. React uses JSX to define how the UI should look.

Here's a simple illustration:

const element = <h1>Hello, Yasir!</h1>;

Although it appears to be HTML, it is actually JSX, with all of JavaScript working behind the scenes.

---

How JSX Works Behind the Scenes

JSX is not directly understood by the browser. Instead, Babel (a JavaScript compiler) converts it into regular JavaScript using React.createElement.

For example:

const element = <h1>Hello, Yasir!</h1>;

gets compiled to:

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

JSX is simply a more readable way to use JavaScript to describe user interface elements.

---

JSX vs HTML — Key Differences

Despite having a similar appearance to HTML, JSX differs significantly in the following ways:

JSX Example:

<div className="container" style={{ color: 'blue' }}>
  Hello from JSX!
</div>

---

JavaScript Integration in JSX

JavaScript logic can be directly inserted into your UI code using {}, which is one of JSX's superpowers.

Here’s a simple example:

const name = "Yasir";

return <h2>Hello, {name}!</h2>;

You can also use expressions:

const age = 20;

return <p>You are {age >= 18 ? "an adult" : "a minor"}.</p>;

This makes your UI dynamic and reactive based on data or conditions.

---

Why Make Use of JSX?

Writing React components is made simpler and more intuitive with JSX. This is the reason:

• ✅ Cleaner code: It’s more readable than using React.createElement manually.

• ✅ Combines UI and logic: Keeps things organized.

• ✅ Simple to maintain: Excellent for creating reusable parts.

• ✅ Developer-friendly: More useful error messages and improved editor support..

---

Conclusion

JSX may appear odd at first glance, combining JavaScript and HTML? We don't typically do that! However, JSX becomes natural as you begin to construct more components.

It is among the characteristics that give React its strength and user-friendliness.