What is React?
1. What is React?
- A.A database management system
- B.A server-side programming language
- C.A JavaScript library for building user interfaces
- D.A CSS styling framework
All featured quizzes
React - Basics
React root creation, JSX, components, custom hooks, and state management using useReducer.
Sample Questions
A preview of what's in this quiz. Answer them interactively for instant scoring and full explanations.
What does JSX stand for in React?
2. What does JSX stand for in React?
- A.JavaScript Extension
- B.JSON XML Syntax
- C.JavaScript XML
- D.Java Syntax Extension
Can web browsers read JSX directly?
3. Can web browsers read JSX directly?
- A.Yes, modern browsers support JSX natively.
- B.Yes, but only if they have React Developer Tools installed.
- C.No, JSX must be transpiled into standard JavaScript first.
- D.No, JSX is only run on the server side.
What are React 'props'?
4. What are React 'props'?
- A.Mutable variables defined inside a component using state
- B.Functions that directly interact with the real browser DOM
- C.Read-only properties passed from a parent component to a child component
- D.Styles applied inline using the style attribute
Can a child component modify the props it receives from its parent?
5. Can a child component modify the props it receives from its parent?
- A.Yes, by using the updateProps() method.
- B.Yes, if the props are declared as mutable.
- C.No, props are read-only and immutable for the child.
- D.No, unless the parent component is a class component.
What is the primary restriction on the root element of a JSX block?
6. What is the primary restriction on the root element of a JSX block?
- A.A JSX expression cannot have any child elements.
- B.A JSX expression must start with a <div> tag.
- C.A JSX expression must return a single root element.
- D.A JSX expression must contain at least two root elements.
Which React feature allows you to wrap multiple JSX child elements without adding extra nodes to the real DOM?
7. Which React feature allows you to wrap multiple JSX child elements without adding extra nodes to the real DOM?
- A.React Divs (<div> and </div>)
- B.React Blocks (<block> and </block>)
- C.React Fragments (<> and </>)
- D.React Containers
How do you pass a prop `username` with the value `John` to a component `UserProfile` in JSX?
8. How do you pass a prop `username` with the value `John` to a component `UserProfile` in JSX?
- A.<UserProfile username={John} />
- B.<UserProfile user="John" />
- C.<UserProfile username="John" />
- D.<UserProfile name:"John" />
What is state in React?
9. What is state in React?
- A.Read-only settings passed down from the parent component
- B.The URL address of the current webpage
- C.An object that holds mutable data local to a component, which triggers a re-render when changed
- D.A global storage object shared by all components in the application
How are events named in React JSX compared to standard HTML?
10. How are events named in React JSX compared to standard HTML?
- A.They are named using kebab-case.
- B.They are named using lowercase.
- C.They are named using camelCase.
- D.They are prefixed with standard 'react-' namespaces.
Which hook is used to declare state variables in React functional components?
11. Which hook is used to declare state variables in React functional components?
- A.useStateEffect
- B.getState
- C.useState
- D.setState
What is the return structure of the `useState` hook?
12. What is the return structure of the `useState` hook?
- A.An object with state and setState properties
- B.A single value representing the state variable
- C.An array containing the current state value and a function to update it
- D.A function that returns the state
Which special prop represents the nested HTML or JSX content passed between opening and closing tags of a custom component?
13. Which special prop represents the nested HTML or JSX content passed between opening and closing tags of a custom component?
- A.props.nested
- B.props.content
- C.props.children
- D.props.elements
Which of the following is a key rule of React hooks?
14. Which of the following is a key rule of React hooks?
- A.Hooks must be called inside loops or conditions.
- B.Hooks can be called inside ordinary JavaScript utility functions.
- C.Hooks must only be called at the top level of a component.
- D.Hooks must be declared using the function keyword.
Which JavaScript array method is commonly used to render a list of items inside React JSX?
15. Which JavaScript array method is commonly used to render a list of items inside React JSX?
- A.forEach()
- B.filter()
- C.map()
- D.reduce()
Why is the `key` prop required when rendering lists of elements in React?
16. Why is the `key` prop required when rendering lists of elements in React?
- A.To style each list item uniquely
- B.To bind click event handlers to each item
- C.To help React identify which items have changed, been added, or removed
- D.To store individual elements inside local storage
How should you correctly pass an event handler function `handleClick` to a button in React JSX?
17. How should you correctly pass an event handler function `handleClick` to a button in React JSX?
- A.<button onClick="handleClick">Click Me</button>
- B.<button onClick={handleClick()}>Click Me</button>
- C.<button onClick={handleClick}>Click Me</button>
- D.<button onclick={handleClick}>Click Me</button>
What is a recommended value for the `key` prop when rendering a list of items?
18. What is a recommended value for the `key` prop when rendering a list of items?
- A.The index of the item in the array (always recommended)
- B.A random number generated on each render
- C.A unique, stable ID associated with each item in the data
- D.The text content of the element
What is a 'controlled component' in React?
19. What is a 'controlled component' in React?
- A.A component that is controlled directly by a parent component's props
- B.A component that cannot trigger re-renders
- C.An input element whose value is driven by React state
- D.An element that bypasses the virtual DOM completely
How do you access the typed value of an input field inside an `onChange` event handler?
20. How do you access the typed value of an input field inside an `onChange` event handler?
- A.event.value
- B.input.value
- C.event.target.value
- D.event.input.text
Looking for a different topic? Browse all subjects