JSX Fundamentals

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

Under the hood, tools like Babel convert this JSX into standard JavaScript function calls (React.createElement).

The Golden Rule of JSX

A component must return a single root element.

Incorrect:

function App() {
  return (
    <h1>Hello</h1>
    <p>World</p>
  ); // Error! Two root elements.
}

Correct:

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

If you don’t want to add an extra <div> to the DOM, you can use a Fragment: <></>.