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.