JSX — HTML inside JavaScript
Writing HTML inside JavaScript? Yes.
The first thing that surprises everyone in React is JSX. It lets you write what looks like HTML, right inside your JavaScript:
const element = <h1>Hello, React!</h1>;
That is not a string and not HTML — it is JSX, a friendly syntax that React turns into real elements. It feels natural because the UI lives right next to the logic.
Putting data inside JSX with { }
The real power: drop any JavaScript value into JSX using curly braces { }.
const name = "Riya";
const element = <h1>Hello, {name}!</h1>; // Hello, Riya!
Anything inside { } is live JavaScript — variables, maths, function calls:
<p>2 + 2 = {2 + 2}</p>
<p>Today: {new Date().toDateString()}</p>
A few JSX rules (the easy ones)
JSX looks like HTML but has small differences:
- One parent element — a component must return a single wrapping element. Wrap siblings in a
<div>(or an empty<>...</>). className, notclass— becauseclassis a reserved word in JavaScript:
<div className="card">Hello</div>
- Close every tag — even self-closing ones:
<img />,<br />. - camelCase events —
onClick, notonclick.
Why JSX matters
Because it keeps your markup and logic together, in one readable place. Instead of HTML in one file and JavaScript reaching into it, your component shows exactly what it renders. Once you get used to it, plain DOM code feels clumsy.
JSX = HTML-like syntax inside JavaScript, with
{ }to inject live values. Remember: one parent,className, close all tags.