Demystifying JSX: Syntax and Expressions in React

Learn to write clean, declarative UI with the syntax that powers React components.

Welcome! Let's explore JSX, the syntax that makes writing React so intuitive.

/* Starting our JSX journey... */

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. Although it looks like HTML, it's actually a powerful way to describe your UI, which then gets converted into regular JavaScript objects by a compiler like Babel.

Embedding Expressions with Curly Braces {}

The true power of JSX comes from embedding JavaScript directly into your markup. You can do this by wrapping any valid JavaScript expression in curly braces ``. This is perfect for displaying dynamic data, like a variable (`{user.name}`), or even running simple logic like calculations (`{2 + 2}`).

JSX Attributes: camelCase is Key

JSX attributes are similar to HTML, but with a JavaScript twist. Since JSX is closer to JavaScript than HTML, attribute names use camelCase. For example, the HTML `class` attribute becomes `className` in JSX to avoid conflicting with the `class` keyword in JavaScript. Similarly, `for` becomes `htmlFor`.

The Golden Rule: One Root Element

There's one main rule in JSX: a component must return a single root element. If you need to return multiple elements, you must wrap them in a parent tag like a `div` or use a Fragment (`<React.Fragment>` or the shorthand `<>...</>`) which doesn't add an extra node to the DOM.

Practice Zone

Interactive Test 1: Build a Component

Arrange the code blocks to create a simple functional component that greets a user.

Arrastra en el orden correspondiente.

Arrastra las opciones:

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

export default Greeting;

import React from 'react';

Completa el código:

Import statement______

Component definition______

Export statement______

Unlock with Premium

Interactive Test 2: Fix the Syntax

Rellena los huecos en cada casilla.

function UserProfile({ user }) {
  return (
    <div className=>
      <img src={user.avatarUrl} />
      <h2>Welcome, !</h2>
    </div>
  );
}

Unlock with Premium

Practice Example: Code Editor

Create a component that takes `title` and `author` props and renders an `h2` with the title and a `p` with the author, all wrapped in a `div` with a `className` of "book-info".

Enunciado:

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

function Book({ title, author }) {
  return (
    <div className="book-info">
      <h2>{title}</h2>
      <p>By: {author}</p>
    </div>
  );
}

Unlock with Premium

Knowledge Check

What is JSX in React?

Unlock with Premium

JSX in a Real React Application

JSX is more than just syntax; it's the fundamental way you build component structures and connect your application's logic to its visual representation.

1. Building Component Structures

At its core, JSX defines the structure of your components. You can compose simple HTML tags to create complex layouts, like a user profile card, in a way that is declarative and easy to visualize.

function ProfileCard({ user }) {
  return (
    <div className="card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.title}</p>
    </div>
  );
}

Jane Doe

Developer

2. Passing Data with Props

JSX is how you pass data down to child components using attributes called "props". This allows you to create reusable components. Here, we pass a `user` object to our `ProfileCard`.

const currentUser = { name: 'Alex', title: 'Designer' };

// ... in another component's return
<ProfileCard user={currentUser} />

3. Integrating Logic (Mapping & Conditionals)

JSX elements are the *result* of your JavaScript logic. You can't put an `if` statement or `for` loop directly in JSX, but you can use JavaScript's array methods like `.map()` to generate lists of elements, or ternary operators for conditional rendering.

<ul>
  {tasks.map(task => (
    <li key={task.id}>{task.text}</li>
  ))}
</ul>

{isLoading ? <Spinner /> : <Content />}

Learn React
Build Project
Deploy App

Practical Takeaway: Think of JSX as the bridge between your JavaScript logic (state, props, functions) and the HTML that gets rendered in the browser. Mastering it is key to building anything in React.

JSX Glossary

JSX (JavaScript XML): A syntax extension for JavaScript that allows you to write HTML-like markup inside your code. It is compiled by tools like Babel into standard `React.createElement()` function calls.
Expression ``: Curly braces used within JSX to embed any valid JavaScript expression. The expression is evaluated, and its result is rendered in the UI.
`className`: The JSX attribute for specifying a CSS class. The name is different from HTML's `class` to avoid conflicting with the `class` keyword in JavaScript.
Fragment (`<>...</>`): A special React component that lets you group a list of children without adding an extra node to the DOM. Essential for satisfying the "single root element" rule.
Babel: A popular JavaScript compiler that is most commonly used to convert JSX syntax into browser-readable JavaScript.