DEV Community

Cover image for React Mastery Series – Day 4: Understanding JSX – The Language of React
Siva Samanthapudi
Siva Samanthapudi

Posted on

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

#react #reactjsdevelopment #webdev

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!"
);
Enter fullscreen mode Exit fullscreen mode

With JSX:

const element = <h1>Welcome to React!h1>;
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

is compiled into something similar to:

const heading = React.createElement(
  "h1",
  null,
  "Hello, React!"
);
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

You can also use:

  • Variables
  • Function calls
  • Mathematical expressions
  • Conditional expressions

Example:

const price = 500;

<p>Total: ₹{price * 2}p>
Enter fullscreen mode Exit fullscreen mode

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()}
Enter fullscreen mode Exit fullscreen mode

Invalid examples:

if (isLoggedIn) {}

for (...) {}

while (...) {}
Enter fullscreen mode Exit fullscreen mode

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>Helloh1>
  <p>Welcome!p>
);
Enter fullscreen mode Exit fullscreen mode

✅ Correct:

return (
  <div>
    <h1>Helloh1>
    <p>Welcome!p>
  div>
);
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can use a Fragment.

What is a Fragment?

Sometimes, adding an extra

isn't necessary.

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

return (
  <>
    <h1>Helloh1>
    <p>Welcome!p>
  
);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

Incorrect:

<img>

<input>

<br>
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

Using logical AND:

{isAdmin && <AdminPanel />}
Enter fullscreen mode Exit fullscreen mode

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! 🚀

Top comments (0)