Understanding JSX in React: History, Features, and Examples

Introduction

JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe the UI structure in a way that resembles HTML. It simplifies writing and understanding React components by allowing developers to write declarative UI code inside JavaScript.

History of JSX

JSX was introduced with React by Facebook in 2013 as a way to simplify UI development. Before JSX, React components were created using the React.createElement function, which was cumbersome and less readable. JSX emerged as a solution to provide a more intuitive way to describe UI components while still leveraging JavaScript's power.

Early React without JSX

Before JSX, React components looked like this:

const element = React.createElement('h1', null, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));

While functional, this approach was not very readable for complex UI structures.

Introduction of JSX

With JSX, the same component can be written as:

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

This makes the code more readable and intuitive, especially for developers familiar with HTML.

How JSX Works

JSX is not understood by browsers directly. It gets compiled by Babel into regular JavaScript before execution. For example, the JSX code:

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

is transformed into:

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

This means JSX is just syntactic sugar for React.createElement calls, making it easier to write and maintain UI code.

Key Features of JSX

1. Embedding JavaScript Expressions

JSX allows embedding JavaScript expressions inside curly braces {}.

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

2. Using Components

JSX allows you to use custom React components like HTML elements.

function Greeting() {
  return <h1>Welcome to React!</h1>;
}
const element = <Greeting />;

3. Adding Attributes

JSX attributes follow camelCase naming conventions.

const image = <img src="image.jpg" alt="Sample Image" />;

4. Conditional Rendering

JSX allows conditions using ternary operators.

const isLoggedIn = true;
const message = <h1>{isLoggedIn ? "Welcome back!" : "Please sign in"}</h1>;

5. Handling Events

JSX allows event handlers similar to regular HTML but in camelCase.

function handleClick() {
  alert("Button clicked!");
}
const button = <button onClick={handleClick}>Click Me</button>;

6. Lists and Keys

JSX allows rendering lists dynamically using map.

const items = ['Apple', 'Banana', 'Cherry'];
const list = (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

Why Use JSX?

• Improves Readability: Writing UI in JSX is more intuitive than using React.createElement.
• Prevents XSS Attacks: JSX escapes expressions by default, preventing security vulnerabilities.
• Better Developer Experience: Helps developers quickly visualize UI structure.

Conclusion

JSX is a core part of React that enhances the way developers create UI components. While it looks like HTML, it is actually JavaScript that gets transformed before execution. Understanding JSX is essential for building React applications efficiently.

Comments

[Ramkumar M N]

Hi Marie Berezhna,
Nice post, One small suggestion. If you add js right after starting code block, it will visible better. Please check the sample below.

const items = ['Apple', 'Banana', 'Cherry'];
const list = (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

Regards,
Ram