JSX Under the Microscope: Syntax and Compilation

Discover how React blends markup and logic with JSX, and see how it's transformed into code that browsers can actually run.

<h1>Hello, World!</h1>

Let's see how React describes UI. We start with something that looks just like HTML...

Hello, World!

What is JSX? HTML in Your JavaScript

JSX stands for JavaScript XML. It's a syntax extension that lets you write HTML-like markup inside a JavaScript file. Instead of separating your logic and markup into different files, JSX allows you to create UI components that contain both, making your code more readable and intuitive.

The Golden Rules of JSX

JSX has a few key rules: 1) You must return a single root element (use fragments <>...</> if needed). 2) HTML attributes like `class` become `className` and `for` becomes `htmlFor`. 3) You can embed any JavaScript expression inside curly braces .

From JSX to JavaScript: The Magic of Babel

Browsers cannot read JSX directly. A tool called a transpiler (most commonly Babel) converts your JSX code into regular JavaScript function calls that browsers can understand. Specifically, it transforms each JSX tag into a React.createElement() call.

The Result: Plain JavaScript Objects

The output of `React.createElement()` is not a DOM element, but a lightweight JavaScript object. This object is like a blueprint that describes the element type, its properties (props), and its children. React then uses these objects to efficiently construct and update the actual browser DOM.

Practice Zone

Interactive Test 1: Match the Concept

Match the JSX concept to its code example.

Arrastra en el orden correspondiente.


Arrastra las opciones:

{ user.name }
<div>...</div>
className="active"

Completa el código:

Attribute______
JS Expression______
Root Element______
Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

function UserProfile({ user }) {
  return (
    
      <h1>Hello, !</h1>
      <p>Your email is: {user.email}</p>
    
  )
}
Unlock with Premium

Practice Example: Code Editor

Create a component that returns a `div` with a `user-card` class. Inside, an `h2` should display a `name` prop, and a `p` tag should display an `email` prop.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function UserCard({ name, email }) { return ( <div className="user-card"> <h2>{name}</h2> <p>{email}</p> </div> ); }

Unlock with Premium

Knowledge Check

What tool is primarily used to compile JSX into standard JavaScript?


Unlock with Premium

JSX in Action

JSX truly shines when you combine its simple syntax with the power of JavaScript logic. Here’s how you can use it to build dynamic components.

1. Dynamic Attributes and Styles

You can use JavaScript variables and expressions to set attributes. This is perfect for changing styles, setting image sources, or disabling buttons based on state.

const isDisabled = true;
const avatarUrl = '...';

<img src={avatarUrl} />
<button disabled={isDisabled}>Submit</button>
avatar

2. Rendering Lists with .map()

JSX integrates perfectly with JavaScript's array methods. The .map() function is commonly used to transform an array of data into a list of JSX elements. Remember to add a unique key prop to each item for performance!

const fruits = ['Apple', 'Banana', 'Cherry'];

<ul>
  {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
</ul>
  • Apple
  • Banana
  • Cherry

3. Passing Functions as Event Handlers

In JSX, you pass a function as the event handler rather than a string. For example, onClick=handleClick passes the handleClick function to be called when the button is clicked.

function handleClick() {
  alert('Button was clicked!');
}

<button onClick={handleClick}>
  Click Me
</button>
Practical Takeaway: JSX isn't just about static markup; it's a powerful templating language that leverages the full capabilities of JavaScript to create dynamic, data-driven user interfaces.

JSX Glossary

JSX (JavaScript XML)
A syntax extension for JavaScript that allows you to write HTML-like code in your React components. It's compiled by tools like Babel into `React.createElement()` calls.
Compilation / Transpilation
The process of converting source code from one high-level language (or syntax) to another. Babel transpiles modern JavaScript and JSX into older, more widely supported JavaScript that browsers can execute.
React.createElement()
The core function that JSX compiles down to. It takes a type, props, and children as arguments and returns a React Element object.
React Element
A lightweight, plain JavaScript object that describes a DOM node or a component instance. React uses these objects to update the DOM efficiently.
Fragment (`<>...</>`)
A special React component that lets you group a list of children without adding an extra node to the DOM, satisfying JSX's "single root element" rule.