Are you ready?
10 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.
Which of the following correctly describes a component in React?
From the perspective of an application, a component in React is a reusable piece of the UI (user interface). This aligns with choice (A). For more info, refer to React Components: What are components?.
How do you create a function component in React?
A component in React is a function returning a React node (which can also be
undefined
). The choice that this explanation aligns with is (A), and that's the correct choice. Choice (B) is wrong because a component can't return a promise in React, which is the case with async
functions. For more info, refer to React Components: Creating components.What is the difference between host components and composite components in React if we talk from the perspective of the HTML DOM?
In the case React working with the HTML DOM, host components refer to the built-in HTML elements whereas composite components refer to user-defined components. Hence, the correct choice is (C). For more info, refer to React Components: Composite components vs. host components
In a React component, what is the purpose of the
children
prop?In a component, the
children
prop is used to access the content given between the opening and closing tags of an instance of the component — like literally the children of the component instance. Hence, the correct choice is (D). For more info, refer to React Components: The children
prop.What is the difference between a component and a component instance in React?
A component is a function, a blueprint, for generating concrete elements in a React app. A component instance is that concrete element instantiated out of a component. Hence, the correct choice is (B). For more info, refer to React Components: Components vs. component instances.
What is the primary benefit of using React components in terms of code organization and reusability?
The idea behind components in React was to favour code reusability and modularity. Hence, the correct choice is (B). For more info, refer to React Components.
What is prop drilling in React?
Prop drilling is a fancy term to refer to the act of consecutively passing props from higher-level components down to lower-level components until those props reach the components they are meant for. For more info, refer to React Components: Prop drilling.
Which of the following aligns with the
App
component convention in React?For more info, refer to React Components: The defacto
App
component.How does the
App
component convention help with code organization in a React app?For more info, refer to React Components: The defacto
App
component.Consider the two snippets below showing functionally equivalent pieces of code.
Snippet 1:
function Button(props) {
const type = props.type;
const disabled = props.disabled;
...
}
Snippet 2:
function Button({type, disabled}) {
...
}
Which of these snippets aligns with the common convention of naming props in a component in React?
Clearly, snippet 2. It's a convention in React to use object destructuring in the parameter of a component to extract out all the required props in local variables. Hence, the correct choice is (B). For more info, refer to React Components: Working with props.