JSX vs HTML differences in React - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use the correct JSX attribute for CSS classes.

React

<div [1]="container">Hello World</div>

Drag options to blanks, or click blank then click option'

Aid

Bclass

Cstyle

DclassName

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' instead of 'className' causes errors in JSX.

In JSX, className is used instead of class to assign CSS classes.

2fill in blank

medium

Complete the code to correctly write a self-closing tag in JSX.

React

<img src="logo.png" [1]>

Drag options to blanks, or click blank then click option'

A/>

B</img>

C>

D></img>

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the slash in self-closing tags causes syntax errors.

In JSX, self-closing tags must end with /> to be valid.

3fill in blank

hard

Fix the error in the JSX code by choosing the correct attribute for inline styles.

React

<div [1]={{ color: 'red' }}>Text</div>

Drag options to blanks, or click blank then click option'

AclassName

Bstyle

CstyleName

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'className' or 'styleName' instead of 'style' for inline styles.

In JSX, the style attribute accepts a JavaScript object for inline styles.

4fill in blank

hard

Fill both blanks to correctly write a JSX event handler for a button click.

React

<button [1]=[2]>Click me</button>

Drag options to blanks, or click blank then click option'

AonClick

Bonclick

C{handleClick}

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase event names like 'onclick'.

Wrapping the handler in extra braces inside the attribute.

JSX uses camelCase event names like onClick. The handler is passed as a JavaScript expression without braces inside the attribute value.

5fill in blank

hard

Fill all three blanks to correctly write a JSX fragment with two paragraphs.

React

<>[1][2][3]<p>Second paragraph</p></>

Drag options to blanks, or click blank then click option'

A<p>First paragraph</p>

BFirst paragraph

C</p>

D<p>

Attempts:

3 left

💡 Hint

Common Mistakes

Putting raw text outside paragraph tags.

Not closing paragraph tags properly.

JSX fragments allow grouping without extra nodes. Paragraph tags must open and close properly around text.