React JSX Quiz

Are you ready?

14 questions to solve

Instructions

This quiz goes to full-screen once you press the Start button.
At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.

JSX code requires some kind of preprocessing before the underlying program could be run. True or false?

JSX definitely requires preprocessing before the underlying program could be run. This processor is typically Babel. Hence, the correct choice is (A). For more info, refer to React JSX.

True False

JSX is simplification over React's createElement() function. True or false?

JSX is indeed syntactic sugar over calling createElement() manually. Hence, the correct choice is (A). For more info, refer to React JSX.

True False

Does the code below correctly define an <h1> React element?

const element = <h1>Hello World!</h1>

There's no problem in the given code. This goes with choice (A). For more info, refer to React JSX.

Yes No; it has to be <React.h1> No; it shouldn't have an ending tag

What's the problem in the following code?

function Greeting() {
   return 'Hello World!';
}

const element = <Greeting></Greeting>;

There's no problem — it's perfectly valid for a component to return a plain string. Hence, the correct choice is (A). For more info, refer to React JSX — Elements.

There's no problem The function component returns a string instead of a JSX element. The function component's name must be lower-cased.

What's the problem in the following code?

function greeting() {
   return (
      <h1>Hello World!</h1>
   );
}

const element = <greeting></greeting>;

In the code above, the name of the function component isn't capitalized; it begins with a lowercase character, and that's invalid for the name of a component in JSX. Hence, the correct choice is (C). For more info, refer to React JSX — Elements.

There's no problem A pair of parentheses (()) encapsulates the element. The function component's name isn't capitalized.

The closing tag of a JSX element can be omitted. What must be then done to make sure that the opening tag represents valid JSX?

If the closing tag of a JSX element is omitted, the opening tag must have a forward slash (/) at its end, as in <Greeting/>. Without this slash, the tag would be invalid. The correct choice, therefore, is (B). For more info, refer to React JSX — Elements.

Nothing Append a forward slash (/) inside the opening tag, for e.g. <Greeting/> Rename the opening tag to include the text end in it, for e.g. <Greeting end>

When the following component is rendered, nothing gets displayed on the document. Why is this so?

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greeting() {
   (
      <h1>Hello World!</h1>
   );
}

ReactDOM.createRoot(document.querySelector('#root')).render(
   <Greeting/>
);

If you take a close look at the Greeting component, there is no return keyword prior to the pair of parentheses (()). In other words, the JSX element isn't returned from the component, and that's why we get nothing on the document. The correct choice is, therefore, (A). For more info, refer to React JSX — Elements.

The JSX in the component isn't returned. The render() method requires an instance of a component called App. The import 'react-dom/client' should instead be 'react-dom'.

The attributes of JSX elements correspond to props of those elements. True or false?

This statement is indeed true — the attributes of JSX elements are, in effect, props of the React elements. For more info, refer to React JSX — Attributes.

True False

What's the problem in the code below?

const element = (
   <section style={{ marginTop: 50, border: '1px solid black', padding: '20px' }}>
      <h1>A heading</h1>
      <p>A paragraph</p>
   </section>
);

There's absolutely no problem in the code. One might think that the numeric value assigned to marginTop is an issue but that's not the case — when the value of a style property in React is a number, React automatically converts it to a string ending with 'px'. So marginTop: 50 becomes marginTop: '50px'. Hence, the correct choice is (A). For more info, refer to React JSX — Attributes.

There's no problem The value assigned to marginTop is a number, not a string. An object literal is assigned to the style attribute.

What happens when an attribute is set on a JSX element without a corresponding value, as shown below?

const element = (
   <button disabled>A button</button>
);

When an attribute in JSX doesn't have a corresponding value, its value is assumed to be true. Hence, the correct choice is (B). For more info, refer to React JSX — Attributes.

The attribute is ignored Its value is taken to be true Its value is taken to be an empty string ('')

How to embed JavaScript code inside JSX?

A pair of curly braces ({}) is used to embed JavaScript code inside JSX. This goes with choice (A). For more info, refer to React JSX — Embedding code inside JSX.

Using {} Using ${} Using <<>> Using ::

What gets rendered by the code below inside the #root element?

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = (
   <h1>{true}</h1>
);

ReactDOM.createRoot(document.querySelector('#root')).render(element);

The value true isn't rendered by React. Hence, the code above simply just renders an empty <h1> element inside the #root element. And thus, the correct choice is (A). For more info, refer to React JSX — Values not rendered.

<h1></h1>

<h1>true</h1>

<h1>"true"</h1>

<h1>1</h1>

JSX code can only appear inside a .jsx file, not a .js file. True or false?

There's no necessity to put JSX code inside .jsx files — we can continue using plain old .js files. JSX files are only meant for better organization of code bases so that we are able to quickly see that the file contains JSX code. Hence, the given statement is false, which goes with choice (B). For more info, refer to React JSX — JSX files.

True False

The following code correctly denotes a comment in JSX?

const element = (
   <section>
      <!-- This is a JSX comment -->
      A section element.
   </section>
);

The comment is invalid — HTML comments don't work in JSX. In order to denote a comment in JSX, we ought to use a pair of curly braces ({}) and then put a JavaScript comment in there. Hence, the correct choice is (B). For more info, refer to React JSX — JSX comments.

True False

Are you ready?

More courses

Node.js

Advanced JavaScript