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.
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.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.
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.
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.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.
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.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.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.
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.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.