JSX syntax rules in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is JSX in React?

JSX is a syntax that looks like HTML but is used in React to describe what the UI should look like. It lets you write HTML-like code inside JavaScript.

beginner

How do you embed JavaScript expressions inside JSX?

You put JavaScript expressions inside curly braces {} within JSX. For example: {2 + 2} will show 4.

beginner

Why must JSX elements have one parent element?

JSX must return a single root element because React needs one element to represent the component. You can wrap multiple elements in a <div> or <React.Fragment>.

beginner

How do you add CSS classes in JSX?

Use className instead of class because class is a reserved word in JavaScript. For example: <div className="box"></div>.

beginner

What is the rule for self-closing tags in JSX?

All tags without children must be self-closed with a slash. For example, <img src="image.png" /> or <br />.

Which of these is the correct way to write a JSX element with a JavaScript expression?

A <div>(5 + 5)</div>

B <div>{5 + 5}</div>

C <div>5 + 5</div>

D <div>${5 + 5}</div>

JavaScript expressions must be inside curly braces {} in JSX.

What attribute do you use to add CSS classes in JSX?

A styleClass

B class

C cssClass

D className

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

Which JSX snippet is valid?

A <div><p>Hello</p><p>World</p></div>

B <p>Hello</p><p>World</p>

C <div><p>Hello</p><p>World</p>

D <div><p>Hello</p></div><p>World</p>

JSX must have one parent element wrapping all children.

How should you write a self-closing tag for an image in JSX?

A <img>

B <img></img>

C <img />

D <img/>

Self-closing tags must include a slash before the closing angle bracket in JSX. Both and are valid.

Can you use statements like if or for directly inside JSX?

A No, use JavaScript before JSX or use conditional expressions

B Yes, directly inside JSX

C Yes, but only if wrapped in curly braces

D No, JSX does not support any JavaScript

JSX supports expressions inside curly braces, but statements like if or for must be handled outside or with conditional expressions.

Explain the main rules you must follow when writing JSX syntax.

Think about how JSX mixes HTML and JavaScript and what special syntax it requires.

Describe how to include JavaScript logic like conditions or loops when using JSX.

Remember JSX allows expressions but not statements inside its syntax.