What is JSX in React - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does JSX stand for in React?

Choose the correct full form of JSX used in React.

A JavaScript XML

B Java Syntax Extension

C JavaScript XHTML

D JavaScript eXtension

💡 Hint

JSX combines JavaScript with a markup language similar to HTML.

JSX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript, making UI code easier to read and write.

❓ component_behavior

intermediate

What will this JSX code render?

Given the JSX code below, what will be displayed on the screen?

React

const element = <h1>Hello, world!</h1>;

ReactDOM.render(element, document.getElementById('root'));

A A blank page because 'root' element is missing

B An error because JSX cannot be rendered directly

C A heading with text 'Hello, world!'

D Nothing will render because ReactDOM.render is missing parentheses

💡 Hint

JSX elements like

can be rendered by ReactDOM.render inside a valid root element.

This JSX creates an <h1> element with the text 'Hello, world!'. ReactDOM.render places it inside the HTML element with id 'root'.

📝 Syntax

advanced

Which JSX snippet correctly embeds a JavaScript expression?

Select the JSX code that correctly shows the sum of 2 + 3 inside a paragraph.

A <p>{2 + 3}</p>

B <p>(2 + 3)</p>

C <p>${2 + 3}</p>

D <p>2 + 3</p>

💡 Hint

JSX uses curly braces {} to embed JavaScript expressions inside markup.

Curly braces {} in JSX let you insert JavaScript expressions. So {2 + 3} evaluates to 5 inside the paragraph.

🔧 Debug

advanced

Why does this JSX code cause an error?

Identify the reason this JSX code throws a syntax error: const element =

Hello

World

;

A JSX requires all tags to be lowercase

B JSX elements must be wrapped in a single parent element

C JSX tags must be self-closing if empty

D JSX cannot have multiple lines without parentheses

💡 Hint

Multi-line JSX expressions need parentheses to group them properly.

JSX spanning multiple lines must be wrapped in parentheses to avoid syntax errors. Without parentheses, JavaScript misinterprets the line breaks.

❓ lifecycle

expert

How does JSX relate to React component lifecycle?

Which statement best describes how JSX interacts with React component lifecycle methods?

A JSX directly controls lifecycle methods like componentDidMount and componentWillUnmount

B JSX is converted to React.createElement calls which React uses to update the DOM during lifecycle phases

C JSX replaces lifecycle methods by automatically handling state changes

D JSX runs only once and does not affect component updates or lifecycle

💡 Hint

Think about what JSX becomes after compilation and how React uses that to manage UI updates.

JSX is a syntax that compiles to React.createElement calls. React uses these calls to build a virtual DOM and update the real DOM during lifecycle phases.

Practice

1. What is JSX in React?

easy

A. A syntax that lets you write HTML-like code inside JavaScript

B. A CSS framework for styling React components

C. A database query language used with React

D. A tool to compile JavaScript into machine code

Solution

1. Step 1: Understand JSX purpose

   JSX allows writing HTML-like tags directly in JavaScript code, making UI code easier to write and read.

2. Step 2: Identify incorrect options

   Options B, C, and D describe unrelated tools or concepts not connected to JSX.

3. Final Answer:

   A syntax that lets you write HTML-like code inside JavaScript -> Option A

4. Quick Check:

   JSX = HTML-like code in JavaScript [OK]

Hint: JSX looks like HTML but is inside JavaScript code [OK]

Common Mistakes:

• Confusing JSX with CSS or styling tools
• Thinking JSX is a separate language
• Believing JSX is a database query language

2. Which of the following is the correct way to write a JSX element?

easy

A. <div>Hello World

B. div>Hello World

C. Hello World

D. {div}Hello World{/div}

Solution

1. Step 1: Check JSX tag syntax

   JSX elements must have opening and closing tags properly enclosed in angle brackets, like <div>Hello World</div>.

2. Step 2: Identify syntax errors in other options

   div>Hello World</div> misses the opening angle bracket, C misses the closing tag, and D uses curly braces incorrectly.

3. Final Answer:

   <div>Hello World</div> -> Option C

4. Quick Check:

   Proper JSX tags use <tag>content</tag> [OK]

Hint: JSX tags look like HTML tags with < and > [OK]

Common Mistakes:

• Omitting angle brackets around tags
• Forgetting closing tags
• Using curly braces instead of angle brackets for tags

3. What will this JSX code render?

const element = <h1>Hello, {"React"} & JSX!</h1>;
ReactDOM.render(element, document.getElementById('root'));

medium

A. Hello, {"React"} & JSX!

B. SyntaxError due to curly braces

C. Hello, React & JSX!

D. Hello, React & JSX!

Solution

1. Step 1: Understand JSX expression inside curly braces

   The string "React" inside curly braces is evaluated and inserted as text inside the h1 element.

2. Step 2: Recognize HTML entities and output

   The & symbol renders as & in the browser, so the final rendered text is Hello, React & JSX! inside an h1 tag.

3. Final Answer:

   <h1>Hello, React & JSX!</h1> -> Option D

4. Quick Check:

   JSX expressions render evaluated content [OK]

Hint: Curly braces insert JavaScript values inside JSX [OK]

Common Mistakes:

• Thinking curly braces print raw code
• Confusing HTML entities with literal text
• Expecting syntax error from curly braces

4. Identify the error in this JSX code:

const element = <div>Hello {name}</div>
ReactDOM.render(element, document.getElementById('root'));

Assuming name is not defined anywhere.

medium

A. ReferenceError because 'name' is not defined

B. SyntaxError due to missing quotes around name

C. Renders 'Hello name' as plain text

D. No error, renders empty space after Hello

Solution

1. Step 1: Check variable usage inside JSX

   JSX expressions inside curly braces expect valid JavaScript variables or expressions. Here, 'name' is not defined.

2. Step 2: Understand runtime behavior

   Using an undefined variable causes a ReferenceError at runtime, stopping rendering.

3. Final Answer:

   ReferenceError because 'name' is not defined -> Option A

4. Quick Check:

   Undefined variables in JSX cause ReferenceError [OK]

Hint: Variables in JSX must be defined before use [OK]

Common Mistakes:

• Assuming missing quotes cause syntax error
• Thinking JSX prints variable names as text
• Believing undefined variables render empty strings

5. How can you include a JavaScript expression inside JSX to display the sum of 2 + 3?

hard

A. The sum is {"2 + 3"}

B. The sum is {2 + 3}

C. The sum is (2 + 3)

D. The sum is "2 + 3"

Solution

1. Step 1: Use curly braces for JavaScript expressions in JSX

   JSX lets you insert JavaScript expressions inside curly braces to evaluate and display their result.

2. Step 2: Evaluate each option's expression

   The sum is {2 + 3}

   correctly uses curly braces with 2 + 3, which evaluates to 5. Options A and B treat it as a string, and C uses parentheses without curly braces, so it won't evaluate.

3. Final Answer:

   <p>The sum is {2 + 3}</p> -> Option B

4. Quick Check:

   Curly braces evaluate JS expressions inside JSX [OK]

Hint: Use curly braces to evaluate expressions inside JSX [OK]

Common Mistakes:

• Putting expressions inside quotes disables evaluation
• Using parentheses without curly braces
• Confusing strings with expressions