Originally published on CodingCush .

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. It is the way React developers describe what a component should look like: instead of writing long, confusing function calls, you write something that looks like HTML, and a tool converts it into regular JavaScript before the browser runs it. If React code has ever looked like HTML and JavaScript had a friendly baby, that baby is JSX.

Almost every beginner opens their first React file, sees HTML sitting inside JavaScript, and thinks something has gone wrong. Nothing has gone wrong. That mix is deliberate, and once you understand why it exists and learn its five or six small rules, JSX becomes the part of React that feels easiest — honestly, many developers say they could never go back to the old way.

Why JSX Exists at All

Before JSX, writing a user interface in JavaScript meant calling functions for every single element.…