React JSX

JSX (JavaScript XML) is a syntax extension for JavaScript. It allows us to write HTML-like code in JavaScript files, making describing the UI very intuitive.

Look at this example:

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

This interesting, tag-like syntax is neither a string nor HTML. It's JSX.

Why Use JSX?

React believes that rendering logic is inherently coupled with other UI logic (such as event handling, state changes). React does not separate markup and logic into different files, but keeps them together in loosely coupled units called "components".

While you can write React without JSX (we'll see how later), the vast majority of developers find JSX extremely helpful when building UI, and React can provide more useful errors and warnings through it.

Embedding Expressions in JSX

You can embed any JavaScript expression in JSX by wrapping it in curly braces {}.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

You can also embed the result of function calls in JSX:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

For readability, we often split JSX across multiple lines. At this point, we recommend wrapping it in () to avoid automatic semicolon insertion pitfalls.

JSX is Also an Expression

After compilation, JSX expressions become regular JavaScript function calls, and their values are JavaScript objects. This means you can use JSX in if statements and for loops, assign it to variables, pass it as arguments, and return it from functions.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>; // Return JSX from function
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX Attributes

You can use quotes to specify string literals as attributes:

const element = <div tabIndex="0"></div>;

You can also use curly braces to embed JavaScript expressions as attributes:

const element = <img src={user.avatarUrl} />;

Note: Since JSX is closer to JavaScript than HTML, React DOM uses camelCase to define attribute names instead of HTML attribute naming conventions.

For example, class in HTML becomes className in JSX, and tabindex becomes tabIndex.

JSX Prevents Injection Attacks

By default, React DOM escapes all values embedded in JSX before rendering. This means your application is protected from XSS (Cross-Site Scripting) attacks. All content is converted to strings before rendering, so you never inject any unexpected content.

JSX Represents Objects

Babel transpiles JSX into calls to the React.createElement() function.

The following two examples are completely identical:

Using JSX:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Without JSX:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() creates an object like this (simplified for clarity):

// Note: This is a simplified structure
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

These objects are called "React elements". They are the foundation that React uses to build and update the DOM. Now that you understand JSX, we will dive deeper into the core unit of React: components.

---

Continue Learning: Next Chapter - React Components