In chapter 3 you already saw JSX without us naming it. This chapter explains exactly what JSX is, and extends App.jsx into our first real component with several parts.

What is JSX?

JSX ("JavaScript XML") is an extension of JavaScript that lets you write HTML-like syntax directly in JavaScript. Unlike our React Native tutorial, the building blocks here are almost identical to real HTML (div, p, img instead of View, Text, Image), because a React web app ultimately produces real HTML in the browser.

Behind the scenes, Vite/Babel translates JSX into regular JavaScript function calls:

// You write:
function Title() {
  return <h1>Hello World!</h1>;
}

// This happens behind the scenes (simplified):
function Title() {
  return React.createElement('h1', null, 'Hello World!');
}

Three important JSX rules

1. Exactly one root element: a component must return EXACTLY ONE outer element. Multiple sibling elements side by side (without a shared wrapper) are a syntax error.
2. Every tag must be closed: even "empty" tags like <img /> or <br /> need the closing slash – unlike classic HTML.
3. class becomes className: since class is already a reserved JavaScript keyword (for class definitions), JSX uses className instead.

// WRONG – two sibling elements without a shared wrapper:
return (
  <h1>Title</h1>
  <p>Text</p>
);

// CORRECT – wrapped in a shared <div>:
return (
  <div>
    <h1>Title</h1>
    <p>Text</p>
  </div>
);

Extending App.jsx: embedding JavaScript values

Curly braces {{...}} let you embed ANY JavaScript expression right inside JSX – a variable, a calculation, a function call. Replace the content of src/App.jsx with this version:

function App() {
  const shopName = 'Mironsoft Product Catalog';
  const productCount = 42;

  return (
    <div className="app">
      <h1>Welcome to {shopName}</h1>
      <p>Currently {productCount} products in the catalog.</p>
    </div>
  );
}

export default App;

{{shopName}} and {{productCount}} insert the values of the two JavaScript variables directly into the rendered HTML. Important: curly braces always contain an EXPRESSION (something that produces a value) – not statements like if or for loops directly inside them (there are other techniques for that, see chapter 7).

What exactly is a component?

A "component" is simply a JavaScript function that returns JSX – exactly like our App function above. Two conventions matter: the function name ALWAYS starts with a capital letter (this is how React tells <App />, your own component, apart from <div>, a built-in HTML element), and each file usually exports exactly one main component via export default.