JSX Basics

JSX looks like HTML

JSX is syntax sugar that React turns into elements. You return it from components.

function App() {
  return <h1>Hello, React</h1>;
}

Embed expressions

Curly braces run JavaScript. Use them for variables, math, and function calls.

const name = "Ada";
const year = 2026;

return (
  <p>
    {name} is learning React in {year}.
  </p>
);

Attributes differ slightly

• Use className instead of class
• Use htmlFor instead of for on labels
• Most event names are camelCase: onClick, onChange
• Self-close void tags: <img />, <br />

One parent element

A return must wrap siblings in one parent—often a <div> or a fragment <>...</>.

return (
  <>
    <h1>Title</h1>
    <p>Subtitle</p>
  </>
);