React Components Quiz

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

A function that performs mathematical calculations A reusable piece of the UI A JavaScript library for handling HTTP requests An array of HTML elements

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.

function Component() {}

async function Component() {}

const Component = {};

const Component = Symbol(React.Component);

const Component = new React.Component;

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

There is no difference Host components are functional, while composite components are class-based Host components are built-in HTML elements, while composite components are user-defined Composite components are built-in HTML elements, while host components are user-defined

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.

To define the component's state To obtain the value of the HTML DOM children property of the DOM element representing the component To get all the data from its parent component To access the content between the opening and closing tags of an instance of the component

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.

A component is a class, while a component instance is a function. A component is a blueprint, while a component instance is a specific occurrence of that blueprint. A component is stateful, while a component instance is stateless. A component is used for styling, while a component instance is used for rendering content.

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.

Components allow for the direct manipulation of the DOM Components help organize code into modular and reusable pieces Components allow for quicker code bundling

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.

A way of finding out a given prop in a list of props A way of directly modifying a component's state A method for handling asynchronous operations in React A way of passing data from higher-level components to lower-level components using props

Which of the following aligns with the App component convention in React?

For more info, refer to React Components: The defacto App component.

It is a convention for naming the lowest-level component as App It is a convention for naming the root component of a React application as App It is a convention for naming purely stylistic components in React as App

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.

It enforces a specific CSS class naming convention for all components It centralizes the main structure and logic of the application, making it a clear entry point It eliminates the need for using props in components It allows us to easily create separate modules for other components

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.

Snippet 1 Snippet 2

Are you ready?

More courses

CSS

Advanced JavaScript