React Basics Fundamentals Quiz

This quiz covers foundational topics in React, including:

  1. Basic Concepts: React structure, JSX, and component types.
  2. State and Props: Managing data within and across components.
  3. Hooks: useState and useEffect.
  4. Lifecycle Methods: Managing React component lifecycles.
  5. Advanced Topics: Context API, keys, and fragments.

This will help you evaluate your understanding of React fundamentals!

Question 1.

What is React?

  • A.

    A programming language

  • B.

    A JavaScript library for building user interfaces

  • C.

    A web browser

  • D.

    A database

Question 2.

What is JSX?

  • A.

    A template engine

  • B.

    A new programming language

  • C.

    JavaScript XML, a syntax extension for JavaScript

  • D.

    A type of JavaScript library

Question 3.

Which method is used to update the state in a React component?

  • A.

    updateState()

  • B.

    setState()

  • C.

    stateChange()

  • D.

    changeState()

Question 4.

What are props in React?

  • A.

    A way to change the state

  • B.

    An API call

  • C.

    Inputs to a component that are immutable

  • D.

    A built-in hook

Question 5.

Which of the following is used to create a functional component in React?

  • A.

    class Component extends React.Component

  • B.

    function Component()

  • C.

    React.createElement()

  • D.

    None of the above

Question 6.

What is the default port for a React application?

  • A.

    3000

  • B.

    8080

  • C.

    5000

  • D.

    8000

Question 7.

Which of the following lifecycle methods is called when a component is first added to the DOM?

  • A.

    componentDidMount

  • B.

    componentWillUpdate

  • C.

    shouldComponentUpdate

  • D.

    componentDidUpdate

Question 8.

What does the useState hook do in React?

  • A.

    Manages component rendering

  • B.

    Adds state management to functional components

  • C.

    Handles routing

  • D.

    Manages API calls

Question 9.

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

  • A.

    Through state

  • B.

    Using props

  • C.

    With hooks

  • D.

    Using context

Question 10.

What does the key prop do in React?

  • A.

    Creates a unique identifier for each component

  • B.

    Adds styles

  • C.

    Attaches an event listener

  • D.

    Optimizes component rendering

Question 11.

Which statement is true about React fragments?

  • A.

    They modify DOM structure.

  • B.

    They are used to group multiple elements without adding extra nodes to the DOM.

  • C.

    They are stateful components.

  • D.

    They only work with class components.

Question 12.

What does useEffect do?

  • A.

    Executes code before the component is rendered

  • B.

    Performs side effects in functional components

  • C.

    Updates the DOM directly

  • D.

    Handles state management

Question 13.

Which React function creates a virtual DOM element?

  • A.

    React.createElement()

  • B.

    React.createComponent()

  • C.

    React.render()

  • D.

    React.init()

Question 14.

What is the purpose of React's Context API?

  • A.

    To share data between components without prop drilling

  • B.

    To manage component state

  • C.

    To handle HTTP requests

  • D.

    To optimize rendering

Question 15.

What is the React Developer Tools browser extension used for?

  • A.

    Debugging and inspecting React components

  • B.

    Creating React components

  • C.

    Managing state

  • D.

    Testing components