JSX, Rendering, and the Virtual DOM

JSX is the syntax that lets you write markup directly inside JavaScript, and it is what makes React components readable. It looks like HTML but is really JavaScript: a build step transforms each JSX tag into a function call that produces a plain object describing an element. Understanding that JSX is JavaScript in disguise clears up most early confusion about what is and isn't allowed.

Those element descriptions form the Virtual DOM — a lightweight, in-memory tree of what the UI should be. When state changes, React builds a new Virtual DOM tree, compares it to the previous one, and computes the minimal set of real DOM operations needed to update the screen. This process, called reconciliation, is why React is both convenient and fast.

This lesson connects the three: how JSX expresses UI, how React renders it into the Virtual DOM, and how reconciliation efficiently updates the real DOM. Grasping the relationship — and the role of keys in lists — explains both why React feels declarative and how to avoid the common performance and correctness pitfalls.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.