JSX vs HTML differences in React - Quick Revision & Key Differences

Recall & Review

beginner

What is JSX in React?

JSX is a syntax extension for JavaScript that looks like HTML. It lets you write UI components in a way that feels like writing HTML but with the power of JavaScript.

beginner

Why do we use className instead of class in JSX?

In JSX, class is a reserved word in JavaScript, so React uses className to assign CSS classes to elements.

intermediate

How do you write inline styles in JSX compared to HTML?

In JSX, inline styles are written as an object with camelCase property names, for example: {'{ color: "red", fontSize: "12px" }'}, unlike HTML which uses a string.

intermediate

What is the difference in how attributes like for are handled in JSX?

JSX uses htmlFor instead of for because for is a reserved word in JavaScript. This is used mainly with <label> elements.

beginner

Can JSX elements have multiple root elements like HTML?

No, JSX requires a single root element. If you want multiple elements, you must wrap them in a parent element or use React fragments.

Which attribute is used in JSX to add CSS classes?

A cssClass

B class

C className

D styleClass

JSX uses 'className' instead of 'class' because 'class' is a reserved word in JavaScript.

How do you write inline styles in JSX?

A As an object with camelCase keys

B As a string like in HTML

C Using CSS files only

D Using a style tag inside JSX

JSX inline styles are objects with camelCase property names, e.g., { color: 'red' }.

What must JSX elements have that HTML elements do not require?

A Multiple root elements

B No attributes

C Only self-closing tags

D A single root element

JSX requires a single root element to wrap all other elements.

Which attribute replaces 'for' in JSX when labeling form elements?

A forLabel

B htmlFor

C labelFor

D formFor

'htmlFor' is used in JSX because 'for' is a reserved JavaScript word.

Can you use regular HTML comments inside JSX?

A No, use JavaScript comments inside braces

B No comments allowed

C Yes, but only at the top

D Yes, <!-- comment --> works

JSX uses JavaScript style comments inside braces: {/* comment */}.

Explain the main differences between JSX and HTML attributes.

Think about reserved words in JavaScript and how JSX adapts HTML.

Describe how JSX handles multiple elements compared to HTML.

Consider how JSX compiles to JavaScript function calls.