JSX - markup in JavaScript

In the last lesson you saw components return something that looks like HTML. That is JSX: a syntax extension that lets you write markup inside JavaScript files.

Why mix them? On the web, rendering logic and markup are closely linked. A book card's markup depends on the book's data, and whether a badge appears depends on its status. React keeps the markup and the logic that drives it together, in one component, instead of spreading them over separate files.

JSX is JavaScriptCopy Anchor Link

JSX looks like HTML, but it is turned into ordinary JavaScript before it runs. Each tag becomes a function call that creates an object describing the element. That has two consequences you will feel straight away:

• JSX is stricter than HTML. Browsers forgive sloppy HTML; JavaScript tools do not.
• Some attribute names are different, because JSX attributes become JavaScript object keys.

Because JSX is a value, you can store it in a variable, return it from a function, or put it in an array. That is what makes map work for lists.

The rules of JSXCopy Anchor Link

1. Return a single root elementCopy Anchor Link

A component can return only one top-level element. To return several, wrap them in a parent. If you do not want an extra <div> on the page, use a Fragment, written as empty tags <> and </>.

A Fragment groups elements without adding anything to the page. Under the hood, a component returns one value, and two side-by-side tags would be two values. The wrapper turns them into one.

2. Close every tagCopy Anchor Link

In HTML you can leave some tags open, like <br> or <img>. In JSX every tag must be closed. Tags with no content close themselves with />.

// HTML style: not allowed in JSX
<img src="cover.jpg">
<br>

// JSX
<img src="cover.jpg" />
<br />

3. camelCase most attributesCopy Anchor Link

JSX attribute names become JavaScript keys, so they follow JavaScript naming. Names with dashes become camelCase (stroke-width becomes strokeWidth, onclick becomes onClick). Two names change completely, because class and for are reserved words in JavaScript:

Two exceptions keep their dashes: aria-* and data-* attributes, such as aria-label and data-id, are written exactly as in HTML.

The {' '} after the label adds a space. JSX removes line breaks between tags, so you add a space this way when you need one.

Curly braces: a window into JavaScriptCopy Anchor Link

Inside JSX, curly braces { } let you step back into JavaScript. Whatever expression you put inside is evaluated, and its result appears in the markup.

You can use curly braces in two places:

1. As text inside a tag: <h2>{book.title}</h2>.
2. As an attribute value, instead of quotes: max={book.pages}, value={120}. Use quotes for a fixed string (className="card") and curly braces for anything computed, including numbers.

Anything that produces a value works inside the braces: variables, maths, function calls, the ternary operator and template literals. Statements that do not produce a value, such as if or a for loop, do not work inside braces. You will see how to handle those on Day 2.

<p style={{ color: 'teal', fontSize: 14 }}>Styled text</p>

<h1 class="title">Book of the week</h1>
<article class="card">
  <h2>title</h2>
  <img src="emma.jpg" alt="Cover">
  <label for="note">Your note</label>
  <input id="note">
</article>

const title = 'Emma';

export default function App() {
  return (
    <>
      <h1 className="title">Book of the week</h1>
      <article className="card">
        <h2>{title}</h2>
        <img src="emma.jpg" alt="Cover" />
        <label htmlFor="note">Your note</label>
        <input id="note" />
      </article>
    </>
  );
}