Loading... Login Loading... Register

React Basics Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

How can you share logic between two React components?

Select your answer

By creating custom hooks.

Through global variable declarations.

By writing CSS selectors.

By using magic methods.

Question 2/15

What is JSX in React?

Select your answer

A framework for building REST APIs.

A syntax extension for JavaScript that looks similar to XML or HTML.

A style sheet language used for describing presentation.

A JavaScript library for managing forms.

Question 3/15

Which method is used to update state in a class component?

Select your answer

updateState()

changeState()

assignState()

setState()

Question 4/15

Which of these statements about state in React is true?

Select your answer

State is the same as props.

State is static and does not update once the component is mounted.

State is a way to hold dynamic data and can influence the output of a component's render function.

State should be mutated directly for updates.

Question 5/15

Which method should be overridden to return a React element from a class component?

Select your answer

componentDidMount()

getInstance()

setState()

render()

Question 6/15

What does the 'return' statement do in a React component?

function Greeting() {
  return <h1>Hello, world!</h1>;
}

Select your answer

Executes a function upon rendering.

Immediately stops executing the component function.

Only works in class components.

Defines the UI to be rendered to the DOM.

Question 7/15

In React, how do you conditionally render elements based on state?

class Example extends React.Component {
  state = { show: true };

  render() {
    return (
      <div>
        {this.state.show ? <p>Displayed</p> : <p>Hidden</p>}
      </div>
    );
  }
}

Select your answer

JSX does not support conditional rendering.

Create separate HTML files for each condition.

Only use special functions provided by React for conditionals.

Use JavaScript conditional operators like '&&' and '?' within JSX.

Question 8/15

How can you pass data from a parent to a child component in React?

Select your answer

By using a custom JavaScript event.

By passing props from the parent to the child component.

By using the 'import' keyword within the child component.

By calling a method on the child's instance.

Question 9/15

What happens when you call setState() in React?

Select your answer

A new component instance is created.

The component re-renders with the updated state.

The state value is directly assigned without a re-render.

The entire page reloads.

Question 10/15

What is the significance of 'props' in React?

Select your answer

Props are immutable and therefore cannot be passed between components.

Props are inputs to a React component and are passed from a parent component.

Props hold the state of components internally.

Props are the same as a component's local variables.

Question 11/15

How do you handle events in React?

Select your answer

By writing inline event handlers with HTML attributes such as 'onclick'.

By using the 'bind' attribute in HTML.

By defining event handlers in JavaScript and passing them as props to the elements.

By handling only JavaScript's default events without any React involvement.

Question 12/15

What is the purpose of keys in React lists?

Select your answer

To give each element in the list a stable identity.

To enable CSS styling for list elements.

To automatically generate unique IDs.

To decrypt encrypted state data.

Question 13/15

Which statement about 'useState' hook is true?

Select your answer

It synchronously updates state but does not trigger a re-render.

It provides only a state read function and no setters.

It is used only in class components.

It lets you add state to function components and returns the current state and a function to update it.

Question 14/15

When should you use React's StrictMode?

Select your answer

To enforce strict variable naming conventions.

To restrict the app to use only the 'useState' hook.

To identify potential problems in an application by activating additional checks and warnings.

To run the app only in development mode.

Question 15/15

What is the purpose of componentDidMount lifecycle method?

Select your answer

To handle event bindings only.

To initialize state before rendering.

To update the component state after every render.

To execute code after the component is inserted into the DOM.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you share logic between two React components?

Available answers

By creating custom hooks.

Through global variable declarations.

By writing CSS selectors.

By using magic methods.

In React, logic that needs to be shared between components can be encapsulated in custom hooks. These hooks house reusable logic that function components can utilize, promoting cleaner and more maintainable code.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is JSX in React?

Available answers

A framework for building REST APIs.

A syntax extension for JavaScript that looks similar to XML or HTML.

A style sheet language used for describing presentation.

A JavaScript library for managing forms.

JSX is a syntax extension for JavaScript that resembles XML or HTML. It is used within React to describe what the UI should look like. Rather than separating logic and presentation as in some traditional approaches, JSX integrates HTML with JavaScript code, making it easier to visualize the structure of the UI.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which method is used to update state in a class component?

Available answers

updateState()

changeState()

assignState()

setState()

In class components, you should use the 'setState()' method to update the component's state. This method ensures the component is re-rendered with the updated state and handles updating the state asynchronously.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of these statements about state in React is true?

Available answers

State is the same as props.

State is static and does not update once the component is mounted.

State is a way to hold dynamic data and can influence the output of a component's render function.

State should be mutated directly for updates.

State in React is used to store dynamic data that may change over time and influence the output of a component's render function. Contrary to props, which are passed into a component, state is local to the component and managed entirely within it.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which method should be overridden to return a React element from a class component?

Available answers

componentDidMount()

getInstance()

setState()

render()

The

render()

method is required for class components and should be overridden to return the React elements dictating what gets rendered to the DOM. The elements in the

render()

method directly represent the rendered interface.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

What does the 'return' statement do in a React component?

function Greeting() {
  return <h1>Hello, world!</h1>;
}

Available answers

Executes a function upon rendering.

Immediately stops executing the component function.

Only works in class components.

Defines the UI to be rendered to the DOM.

In a React component, the 'return' statement declares what JSX, or combination of React elements, should be displayed in the UI. This forms the basis of how the component renders itself to the DOM.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

In React, how do you conditionally render elements based on state?

class Example extends React.Component {
  state = { show: true };

  render() {
    return (
      <div>
        {this.state.show ? <p>Displayed</p> : <p>Hidden</p>}
      </div>
    );
  }
}

Available answers

JSX does not support conditional rendering.

Create separate HTML files for each condition.

Only use special functions provided by React for conditionals.

Use JavaScript conditional operators like '&&' and '?' within JSX.

In React, you can use JavaScript's built-in conditional operators within JSX to control what gets rendered, such as '&&' for logical AND and '?' for ternary conditions. This enables you to create dynamic interfaces conveniently:

this.state.show ? <p>Displayed</p> : <p>Hidden</p>

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you pass data from a parent to a child component in React?

Available answers

By using a custom JavaScript event.

By passing props from the parent to the child component.

By using the 'import' keyword within the child component.

By calling a method on the child's instance.

To pass data from a parent to a child component in React, props are used. You can pass String, Object, Array, and Function in the props.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What happens when you call setState() in React?

Available answers

A new component instance is created.

The component re-renders with the updated state.

The state value is directly assigned without a re-render.

The entire page reloads.

When

setState()

is called in a React component, it schedules an update to the component's state. The component will re-render, reflecting the change in state and thus redrawing the UI to match the new data.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the significance of 'props' in React?

Available answers

Props are immutable and therefore cannot be passed between components.

Props are inputs to a React component and are passed from a parent component.

Props hold the state of components internally.

Props are the same as a component's local variables.

Props (short for properties) are inputs to a component typically passed from a parent component. They are used to pass data and event handlers from a parent to a child component. Props are immutable, meaning a component should not change them.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you handle events in React?

Available answers

By writing inline event handlers with HTML attributes such as 'onclick'.

By using the 'bind' attribute in HTML.

By defining event handlers in JavaScript and passing them as props to the elements.

By handling only JavaScript's default events without any React involvement.

In React, events are handled using camelCase syntax. Instead of using HTML attributes like 'onclick', you pass a function as the event handler in JSX:

<button onClick={handleClick}>Click Me</button>

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of keys in React lists?

Available answers

To give each element in the list a stable identity.

To enable CSS styling for list elements.

To automatically generate unique IDs.

To decrypt encrypted state data.

In React, keys help identify which items have changed, been added, or been removed. Keys should be given to the elements inside the array to give the elements a stable identity:

const items = items.map((item) => <li key={item.id}>{item.name}</li>)

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which statement about 'useState' hook is true?

Available answers

It synchronously updates state but does not trigger a re-render.

It provides only a state read function and no setters.

It is used only in class components.

It lets you add state to function components and returns the current state and a function to update it.

The 'useState' hook lets you add state to function components. It returns an array containing the current state and a function to update that state, allowing functional components to manage state without converting them to class components.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

When should you use React's StrictMode?

Available answers

To enforce strict variable naming conventions.

To restrict the app to use only the 'useState' hook.

To identify potential problems in an application by activating additional checks and warnings.

To run the app only in development mode.

<React.StrictMode>

is used for highlighting potential problems in a React application. Enclosing the application in

<React.StrictMode>

helps developers identify unsafe lifecycles, legacy API usage, and multiple driver side effects.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of componentDidMount lifecycle method?

Available answers

To handle event bindings only.

To initialize state before rendering.

To update the component state after every render.

To execute code after the component is inserted into the DOM.

The 'componentDidMount' method is invoked immediately after a component is mounted. This is the best place to initiate network requests, set timers, or directly interact with the DOM.