What is JSX?

Relax. We'll talk through this in plain words — no textbook voice.

JSX is a syntax that lets you write HTML-like markup inside JavaScript. React uses JSX to describe the UI. Since you can drop JavaScript expressions into JSX using `{}`, it lets you connect data and the UI cleanly.

jsx

function Greeting() {
  const name = 'Aung Aung';
  const isLearning = true;

  return (
    <section>
      <h1>Hello, {name}!</h1>
      <p>{isLearning ? 'React ကိုလေ့လာနေပါတယ်' : 'နောက်မှစမယ်'}</p>
    </section>
  );
}

The value of the `name` variable is inserted into the UI with `{name}`. If `isLearning` is true, the first line of text is shown; if false, the second line is shown — using a ternary operator.

You should see

The browser will show the text `Hello, Aung Aung!` and `React ကိုလေ့လာနေပါတယ်`.

Info

Even though JSX looks like HTML, it lives inside JavaScript syntax, so you have to follow React's rules — things like `className`, `htmlFor`, and self-closing tags.

Easy traps

You can't write something like `{if (...) { ... }}` inside JSX. For conditional UI, use a ternary operator, `&&`, or store the JSX in a variable before the return statement.