React Mastery Series – Day 4: Understanding JSX – The Language of React

Welcome back to the React Mastery Series!

In the previous article, we set up our React development environment using Vite and explored the project structure.

Today, we'll learn one of the first concepts every React developer encounters: JSX.

At first glance, JSX looks like HTML inside JavaScript—but there's much more happening behind the scenes.

---

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write UI code in a way that closely resembles HTML.

Instead of creating elements using JavaScript APIs, JSX lets you describe your UI in a clean and readable format.

Without JSX:

const element = React.createElement(
  "h1",
  null,
  "Welcome to React!"
);

With JSX:

const element = <h1>Welcome to React!</h1>;

Both snippets produce the same result, but JSX is far more readable and maintainable.

---

Is JSX HTML?

This is one of the most common misconceptions.

JSX is not HTML.

It looks similar to HTML, but it is actually JavaScript syntax that gets transformed into JavaScript function calls during the build process.

For example:

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

is compiled into something similar to:

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

With the modern React compiler, this transformation happens automatically, so you rarely need to think about it.

---

Why Does React Use JSX?

Imagine building a complex dashboard using only React.createElement().

The code would quickly become difficult to read and maintain.

JSX solves this by making your UI resemble its final structure.

Benefits include:

• Improved readability
• Easier debugging
• Better developer experience
• Seamless integration of JavaScript expressions
• Cleaner component composition

---

Embedding JavaScript in JSX

One of JSX's greatest strengths is that you can embed JavaScript expressions using curly braces {}.

Example:

const name = "Siva";

function App() {
  return <h1>Welcome, {name}!</h1>;
}

You can also use:

• Variables
• Function calls
• Mathematical expressions
• Conditional expressions

Example:

const price = 500;

<p>Total: ₹{price * 2}</p>

React evaluates the JavaScript expression before rendering the UI.

---

What Can Be Written Inside {}?

Valid examples:

{name}

{age + 1}

{isLoggedIn ? "Logout" : "Login"}

{items.length}

{calculateTotal()}

Invalid examples:

if (isLoggedIn) {}

for (...) {}

while (...) {}

Statements are not allowed inside JSX—only expressions.

---

JSX Requires a Single Parent Element

A React component must return one parent element.

❌ Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome!</p>
);

✅ Correct:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </div>
);

Alternatively, you can use a Fragment.

---

What is a Fragment?

Sometimes, adding an extra <div> isn't necessary.

React provides Fragments to group elements without creating an additional DOM node.

return (
  <>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </>
);

Fragments help keep the DOM clean while satisfying React's requirement for a single parent element.

---

JSX Attributes

JSX attributes are similar to HTML attributes but follow JavaScript naming conventions.

For example:

HTML	JSX
class	className
for	htmlFor
onclick	onClick
tabindex	tabIndex

Example:

<button className="primary">
  Save
</button>

React uses camelCase for most DOM properties.

---

Self-Closing Tags

In JSX, elements without children must always be self-closed.

Correct:

<img src="logo.png" />

<input type="text" />

<br />

Incorrect:

<img>

<input>

<br>

This rule often catches beginners by surprise.

---

Comments in JSX

You can't use HTML comments inside JSX.

Instead, use JavaScript comments wrapped in curly braces.

return (
  <div>
    {/* User Profile */}
    <Profile />
  </div>
);

---

Rendering Lists with JSX

JSX makes it easy to render collections using JavaScript methods like map().

const fruits = ["Apple", "Orange", "Mango"];

return (
  <ul>
    {fruits.map((fruit) => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

We'll explore lists and keys in greater detail later in this series.

---

Conditional Rendering in JSX

Because JSX supports JavaScript expressions, conditional rendering becomes straightforward.

Using the ternary operator:

const isLoggedIn = true;

return (
  <h2>
    {isLoggedIn ? "Welcome Back!" : "Please Login"}
  </h2>
);

Using logical AND:

{isAdmin && <AdminPanel />}

These patterns are used extensively in real-world React applications.

---

Common Beginner Mistakes

Here are a few mistakes developers often make when starting with JSX:

• Using class instead of className
• Returning multiple sibling elements without a parent
• Forgetting to close self-closing tags
• Writing JavaScript statements inside JSX
• Forgetting to provide a key when rendering lists

Being aware of these early will save you debugging time.

---

JSX Best Practices

• Keep JSX simple and readable.
• Extract complex UI into reusable components.
• Avoid deeply nested JSX structures.
• Move business logic outside the return statement whenever possible.
• Use meaningful component names and descriptive props.

Clean JSX is easier to maintain and review.

---

Key Takeaways

Today, we learned:

✅ JSX is a syntax extension for JavaScript used to describe UI.
✅ JSX is transformed into JavaScript during the build process.
✅ JavaScript expressions can be embedded using {}.
✅ Components must return a single parent element or a Fragment.
✅ JSX uses camelCase for most attributes.
✅ Self-closing tags and proper syntax are essential for valid JSX.

---

Coming Next 🚀

In Day 5, we'll explore the building blocks of every React application:

Components in React – Functional Components, Reusability, and Composition

We'll cover:

• What components are
• Functional components
• Component composition
• Reusable UI design
• Best practices for organizing components
• Real-world examples from enterprise applications

By the end of the next article, you'll understand why React applications are built by composing small, reusable pieces into powerful user interfaces.

Happy Coding! 🚀