JSX in React

JSX looks like HTML inside JavaScript. It is not HTML. The compiler (Babel in CRA, esbuild in Vite) turns <p className="x">{name}</p> into React.createElement('p', { className: 'x' }, name). You almost never write createElement by hand, but the viva may ask what JSX becomes. Say that sentence.

class is a reserved word in JavaScript, so the attribute is className. for on a label becomes htmlFor. Inline styles are a camelCase object, not a CSS string: style={{ fontSize: 18 }}. Expressions go in curly braces: {marks}, {ok ? 'Pass' : 'Fail'}, {items.map(...)}. You cannot put a for-loop statement inside those braces — only an expression.

One parent rule: a component’s return cannot be two sibling tags with nothing wrapping them. Use a div, a semantic tag, or a Fragment <> </>. Table cells often need Fragment because a wrapper div would be invalid HTML. Comments inside JSX are {/* like this */}, not <!-- HTML comments -->. Paste HTML into a component and this is the first error you hit.

Let’s do it on the board. const marks = 72; return <p className={marks >= 40 ? 'pass' : 'fail'}>Asha scored {marks}</p>; Screen: Asha scored 72 with class pass. Change marks to 30, class becomes fail. If you write class= instead of className, the class never lands on the DOM the way you expect.

Self-closing tags must close: <img />, <input />, <br />. In HTML you can get away with <input>. In JSX you cannot. Boolean attributes: <button disabled={busy} /> — pass a real boolean, not the string "false" (that is still truthy).

Trap list for exams: class= , <!-- --> , two roots, using if/for as statements inside JSX, forgetting that 0 && <Badge /> still shows 0. If you can avoid those six, JSX is no longer scary.

JSX in React — on screen — Asha scored 72 with class pass. {marks} is JS. className, not class.