React Basics Quiz

Are you ready?

11 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 is valid JavaScript. True or false?

JSX is NOT valid JavaScript. It's a syntactic extension to JavaScript, which has to be transpiled down to normal JavaScript by some kind of a tool (typically Babel) before it could be run in the browser. Hence, the correct choice is (B). For more info, refer to React Basics.

True False

What is wrong with the React.createElement() call below:

const element = React.createElement('h1', 'Hello World!');

The second argument of React.createElement() specifies the props of the element being created. It can either be null or an object, but not a string, and that's the problem in the code above. Hence the correct choice is (C). For more info, refer to React Basics.

There's nothing wrong. The first argument is a string and that's invalid. The second argument is a string and that's invalid.

Elements in React could be nested into one another. True or false?

Absolutely yes. Elements in React could definitely be nested. This goes with choice (A). For more info, refer to React Basics.

True False

Consider the following code:

const element = React.createElement(
   'section',
   null,
   React.createElement('h1', null, 'A heading'),
   React.createElement(
      'div',
      null,
      React.createElement('p', null, 'The first paragraph'),
      React.createElement('p', null, 'The second paragraph'),
      'Some outside text'
   )
);

Which of the following JSX produces this exact same result?

The correct choice is (A). For more info, refer to React Basics.

const element = (
   <section>
      <h1>A heading</h1>
      <div>
         <p>The first paragraph</p>
         <p>The second paragraph</p>
         Some outside text
      </div>
   </section>
);

const element = (
   <section>
      <h1>A heading</h1>
      <div></div>
      <p>The first paragraph</p>
      <p>The second paragraph</p>
      Some outside text
   </section>
);

const element = (
   <section>
      <h1>A heading</h1>
      <div>
         <p>The first paragraph</p>
         <p>The second paragraph</p>
      </div>
      Some outside text
   </section>
);

The props of a React element are provided in which argument to React.createElement()?

The second argument of React.createElement() specifies the props of the element. This goes with choice (B). For more info, refer to React Basics.

First Second Third

A JSX element is an expression. True or false?

A JSX element indeed is an expression, hence the correct choice is (A). For more info, refer to React Basics.

True False

Which of the following is the correct prop that's used to represent the class HTML attribute of an element?

className is the prop used to represent the HTML class attribute. This goes with choice (B). For more info, refer to React Basics.

class className classList classProp

The following code creates an <h1> element in React, which when clicked, logs 'Clicked'.

const element = (
   <h1 onclick={() => { console.log('Clicked'); }}>A heading</h1>
);

The element does get rendered but the click doesn't work.

What's wrong with this code?

The attribute has been named incorrectly — onclick is wrong. The correct name is onClick, with the camel casing convention. For more info, refer to React Basics.

The onclick attribute can't be set on <h1>. The function assigned to onclick isn't named, however it should be. The attribute must be named onClick (with a capital C) instead of onclick.

Can the following function be called a React component? If not, then why?

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

Yes, it can surely be called a React component. That's because it returns a string which is a React node. Hence, the correct choice is (A). For more info, refer to React Basics.

Yes No; because it doesn't return a React element. No; because it doesn't return a React node. No; because it doesn't have a render() method.

Which of the following is used to hook a component into React's state utility?

The correct choice is useState(). For more info, refer to React Basics.

setState() useState() stateHook() useStateHook()

Suppose that a state variable inside a function component is called positionX.

What would the corresponding state-update function be called if we were to follow the common convention of naming state-update functions in React?

The convention is to begin with the word 'set' followed by the name of the state variable, making sure that the overall name follows camel casing. So for positionX, the function would be named setPositionX. This goes with choice (C). For more info, refer to React Basics.

positionXSet positionX_set setPositionX set_positionX set_position_x

Are you ready?

More courses

Node.js

JavaScript RegExp