Mayank Tripathi

Understanding React JSX: The Syntax that Powers React

React has revolutionized how we build user interfaces with its component-driven architecture, and at the heart of this innovation is JSX. JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It is one of the most powerful features of React, providing a more declarative way to describe the UI components and their behavior.

In this blog post, we’ll dive deep into JSX, explore how it works, and look at the advantages it brings to modern front-end development.

What is JSX?

JSX is a syntax that looks like HTML but is actually a powerful abstraction over React’s React.createElement() function. Instead of manually writing JavaScript code to create and append elements to the DOM, JSX allows developers to write HTML-like tags directly in JavaScript, which React converts to JavaScript objects representing the UI structure.

Here’s an example of a simple component using JSX:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Under the hood, this is transformed into JavaScript using React.createElement():

function Greeting() {
  return React.createElement('h1', null, 'Hello, World!');
}

Why Use JSX?

While you can build React components without JSX, most developers prefer it because it makes the code more intuitive and readable. JSX looks like HTML, making it easier to visualize the structure of the UI, but it’s fully JavaScript, offering the full power of the language.

Benefits of JSX:

  1. Readable UI Code: JSX allows developers to write the structure of the component’s output in a familiar HTML-like syntax, making it easier to reason about the UI. You can quickly grasp what the rendered output will be just by glancing at the JSX.
  2. JavaScript Power: JSX is not a templating language; it is an extension of JavaScript. You can leverage all the JavaScript features like variables, functions, conditionals, and loops directly within JSX:
function UserGreeting(props) {
  return <h1>Welcome back, {props.username}!</h1>;
}

Cleaner Code: Without JSX, React code can become verbose and harder to maintain because you would have to use React.createElement() for every single HTML element. JSX simplifies this by allowing developers to focus on writing clean and concise components.

Prevention of Injection Attacks: React automatically escapes all values embedded in JSX, preventing XSS (Cross-Site Scripting) attacks. This means if you pass user data or variables into JSX, React will ensure that no malicious code is executed.

JSX Syntax and Rules

JSX is not HTML, and there are some specific rules that developers need to keep in mind while writing it. Let’s take a look at the core syntax and best practices:

1. JSX Must Have One Parent Element

JSX must return a single parent element. If you need to return multiple elements, they must be wrapped in a single enclosing tag or a React fragment (<></>):

function Greeting() {
  return (
    <div>
      <h1>Hello</h1>
      <p>Welcome to React!</p>
    </div>
  );}

Alternatively, you can use React fragments to avoid adding unnecessary divs to the DOM:

function Greeting() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome to React!</p>
    </>
  );
}

2. JSX is Case-Sensitive

JSX distinguishes between lowercase and uppercase letters. HTML tags are written in lowercase (<div>, <p>), while React components are written in uppercase:

function App() {
  return <MyComponent />;
}

If you use a lowercase tag (e.g., <mycomponent>), React will treat it as a regular HTML tag, not a React component.

3. JSX Attributes Use CamelCase

When using HTML attributes in JSX, they are written in camelCase rather than lowercase. For example, class becomes className, and onclick becomes onClick:

const button = <button className="primary" onClick={handleClick}>Click Me</button>;

This is because JSX uses JavaScript object notation for attributes, and JavaScript uses camelCase conventions.

4. JSX Expressions are Encapsulated in Curly Braces

In JSX, you can embed JavaScript expressions (like variables, function calls, or even inline logic) inside curly braces {}:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Any valid JavaScript expression can go inside the curly braces, such as mathematical operations, conditional expressions, or function calls.

5. JavaScript in JSX

JSX allows you to use JavaScript logic directly within the render output. This means you can use conditionals, loops, and other logic inside JSX.

  • Conditionals with Ternary Operator:
function Greeting(props) {
  return <h1>{props.isLoggedIn ? 'Welcome back!' : 'Please log in'}</h1>;
}

Rendering Lists:

You can use JavaScript’s map() method to dynamically render lists in JSX:

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

JSX is JavaScript

Despite its resemblance to HTML, JSX is JavaScript and can be stored in variables, passed as arguments to functions, and returned from functions:

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

function App() {
  return element;
}

This flexibility enables developers to write modular, reusable components and pass JSX around like any other JavaScript object.

JSX Compilation

JSX cannot be executed directly by browsers, so it needs to be compiled into regular JavaScript using tools like Babel. JSX is transformed into React.createElement() calls, and these calls ultimately create the actual elements that React uses to manage the DOM.

For example, this JSX code:

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

is compiled into:

const element = React.createElement('h1', null, 'Hello, World!');

Conclusion

JSX is a core feature of React that bridges the gap between HTML-like structure and JavaScript’s functionality. It provides an expressive and powerful way to describe UIs while keeping the logic inside the same file. Although optional, most React developers prefer using JSX because of its readability and closeness to HTML, making React development more intuitive.

Thank you for reading…
by ~Leaveitblank (Mayank Tripathi)