JSX under the hood — HTML’s clothes, JavaScript’s body — Visualize

JSX under the hood — HTML’s clothes, JavaScript’s body

Watch one JSX tag get compiled, become a plain object, and only then touch the real screen.

💡

THE BIG IDEA

JSX looks so much like HTML that most beginners never ask what it actually IS — and then an interviewer asks. The answer is a pipeline: a compiler rewrites every tag into a function call at build time, the call returns a plain JavaScript object, objects nest into a tree, and ReactDOM turns that tree into real pixels. Tap any block to hear its side of the story.

Press ▶ Play to watch it run step by step, or use the arrow buttons to go at your own pace.

You write <h1 className="title">Hi {name}</h1> in your component. It looks like HTML. It is not.

The giveaways: className instead of class, and JavaScript sitting inside { } braces. This line lives in a .jsx file — and no browser on earth can run it as-is.

🧑‍💻You, coding

📄JSX file

handling requesthealthyjust added

1/8

UP NEXT IN REACT

key={index} — the bug that puts Ravi’s number under Priya’s name

Build React’s row-matching rule, run the famous list corruption for real, then fix it with one change.

The fetching state machine — and the fifth state everyone forgets key={index} — the bug that puts Ravi’s number under Priya’s name