JSX: what it is, how it works and when to really use it

Posted by

  

JSX is often automatically associated with React, but this association risks hiding its true nature. In this article, we will see what JSX is, how it works under the hood, and why it is not tied to a single framework.

After clarifying the basics, we will analyze its advantages, limitations, and alternatives to understand when JSX is an effective choice and when it is better to avoid it.

🔗 Like Techelopment? Check out the website for all the details!

What is JSX?

JSX (JavaScript XML) is an extension of JavaScript syntax that allows you to write code with a structure similar to HTML directly inside JavaScript files. It became popular mainly thanks to React, but its use and meaning go far beyond this framework.

A classic example of JSX is the following:

const element = <h1>Hello world</h1>;

At first glance, it looks like HTML, but in reality, it is not: JSX is transformed into JavaScript function calls before being executed.


The Basics of JSX

The key idea behind JSX is to allow developers to describe the user interface using a declarative and readable syntax, while maintaining all the power of JavaScript.

For example:

const name = "Peter";

const greeting = <h1>Hello, {name}!</h1>;

Here, JSX allows you to:

  • mix markup and logic
  • insert JavaScript expressions using {}
  • make the code more expressive compared to nested function calls

JSX is not React (Independence from React)

A point often misunderstood is that JSX is not tied to React.

JSX is simply syntactic sugar for JavaScript function calls. For example, this JSX:

<h1>Hello</h1>

is transformed (in React) into something similar to:

React.createElement("h1", null, "Hello");

But nothing prevents you from using JSX with:

  • libraries other than React
  • custom functions
  • alternative frameworks like Preact, Solid, Inferno, or even libraries created ad hoc

As long as there is a function that knows how to "interpret" that structure, JSX can be used.


JSX Requires a Compilation Phase

Browsers do not understand JSX natively.

This means that JSX code must be converted into standard JavaScript before being executed. This process is called transpilation.

The most widely used tool for this is Babel, which:

  • takes JSX code as input
  • transforms it into browser-compatible JavaScript

Example flow:

JSX → Babel → JavaScript → Browser

Without this phase, the browser would generate a syntax error.


Why use JSX? The Main Advantages

JSX offers several practical advantages:

1. More Readable Code

Writing interfaces with a syntax similar to HTML is often more intuitive than long JavaScript function calls.

2. Markup and Logic Together

JSX encourages keeping structure and behavior in the same place, avoiding artificial separations between HTML and JS.

3. Expressiveness

Conditions, loops, functions, and components can be integrated directly into the markup in a natural way.

Example:

{isLoggedIn ? <Dashboard /> : <Login />}

When not to use JSX? The Main Disadvantages

Despite its advantages, JSX is not always the best choice. There are scenarios where its use may be superfluous or even counterproductive.

1. Need for Additional Tooling

JSX always requires a compilation phase. In very simple projects or contexts where you want to avoid a build pipeline (for example, quick scripts or minimal prototypes), this can be an unjustified overhead.

2. Initial Learning Curve

For those new to JavaScript, JSX can be confusing: it looks like HTML, but it really isn't. The presence of specific rules (like a single root element or the use of curly braces) can slow down learning.

3. Less Distinct Separation of Responsibilities

While many see it as an advantage, mixing markup and logic in the same file is not always desirable. Some teams or architectures prefer a more traditional separation between structure, style, and behavior.

4. Not Ideal Without Components

JSX performs best in component-based architectures. In applications that do not follow this model, using JSX can feel artificial and less readable than simpler solutions.

In summary, JSX is a powerful tool, but like any tool, it must be used in the right context: it is not mandatory, nor always the best choice.


Alternatives to React: JSX Without the Whole Ecosystem

Although React is the most well-known framework using JSX, it is not the only option.

Preact, for example, is often cited as:

  • a lighter alternative
  • compatible with JSX
  • having an API very similar to React
  • ideal for smaller bundles and high performance

In these cases, you can continue to use JSX without adopting the entire React ecosystem (complex hooks, heavier runtime, etc.).


Conclusion

JSX is not magic and it is not React.
It is a syntactic choice that makes it simpler and more natural to describe interfaces using JavaScript.

In summary:

  • 🧁 JSX is just syntactic sugar
  • ⚙️ it requires a compilation phase
  • ↕️ it improves code readability and expressiveness but can also affect the separation between logic and UI in complex projects or well-structured architectures
  • ♻️ it can be used outside of React, with libraries like Preact or custom solutions

Understanding this helps to use JSX more consciously — and to stop considering it "something weird that React does" 😊.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment