React Quiz
React is a JavaScript library for building user interfaces from reusable components. The questions here cover JSX, components, props, state, hooks and the rendering model, which are the ideas every React job interview starts with.
What this quiz covers
- JSX and components
- Props and state
- Hooks such as useState and useEffect
- Rendering, keys and lists
Study tip: Build a small to-do app while you study; most beginner React questions map directly to something you will use in it.
Questions, answers and explanations
1. What is React.js?
- Open-source JavaScript back-end library
- JavaScript front-end library to create a database
- Free and open-source JavaScript front-end library
- None of the mentioned
Answer: Free and open-source JavaScript front-end library
React is a free and open-source JavaScript library for building user interfaces.
2. What is JSX in React?
- JavaScript Execution
- JavaScript XML
- JavaScript Extra
- None of the mentioned
Answer: JavaScript XML
JSX stands for JavaScript XML and lets you write HTML-like syntax inside JavaScript.
3. React.js is primarily used for which of the following?
- Backend Development
- Database Management
- Frontend Development
- Mobile App Development
Answer: Frontend Development
React is mainly used for building interactive user interfaces.
4. Which of the following acts as the input of a class-based component?
- Class
- Props
- Factory
- None of the mentioned
Answer: Props
Props are used to pass data into React components.
5. What is the main purpose of JSX in React?
- Database Query Language
- JavaScript Function
- CSS Styling
- HTML-like syntax
Answer: HTML-like syntax
JSX allows developers to write HTML-like code inside JavaScript.
6. React.js is written in which language?
- C
- C++
- JavaScript
- Java
Answer: JavaScript
React is built using JavaScript.
7. How many elements can a valid React component return?
- React doesn't return elements
- 1 Element
- More than 1 element
- None of the mentioned
Answer: 1 Element
A component must return one parent element. Multiple elements can be wrapped in a Fragment.
8. In which directory are React components commonly stored?
- js/components/
- components/js/
- vendor/js/components/
- vendor/components/
Answer: js/components/
Many React projects store components inside a components folder.
9. Which command installs Create React App globally?
- npm install create-react-app
- npm install -f create-react-app
- npm install -g create-react-app
- install -g create-react-app
Answer: npm install -g create-react-app
Historically, Create React App could be installed globally. Today, using 'npx create-react-app' is recommended.
10. Which hook is used to manage state in functional components?
- useState
- useReducer
- useEffect
- useRef
Answer: useState
useState is the basic React Hook for managing state.
11. Which of the following is NOT part of ReactDOM?
- ReactDOM.hydrate()
- ReactDOM.destroy()
- ReactDOM.createPortal()
- All of the mentioned
Answer: ReactDOM.destroy()
ReactDOM has methods like render, hydrate, and createPortal, but not destroy().
12. Which statement is correct about props in React?
- Can be changed inside another component
- Can be changed inside the component
- Cannot be changed in the component
- All of the mentioned
Answer: Cannot be changed in the component
Props are read-only (immutable) inside the receiving component.
13. What is the Virtual DOM in React?
- A DOM management system
- A method to update the real DOM directly
- A server-side DOM
- A virtual version of the actual DOM
Answer: A virtual version of the actual DOM
React compares the Virtual DOM with the real DOM to update only the necessary parts.
14. How do you pass data to a React component?
- props
- render with arguments
- setState
- PropTypes
Answer: props
Props are used to pass data from a parent component to a child component.
15. What is the purpose of React.StrictMode?
- To add animations
- To improve performance
- To enhance UI
- To add additional validation checks
Answer: To add additional validation checks
StrictMode helps identify potential problems during development.
16. Which of the following is NOT a valid React Hook?
- useContext
- useState
- useReturn
- useEffect
Answer: useReturn
There is no Hook named useReturn.
17. How do you create a React application?
- Using Node.js
- Writing plain JavaScript
- Using the 'npx create-react-app' command
- Using HTML
Answer: Using the 'npx create-react-app' command
Traditionally, React apps are created with Create React App. Modern projects often use Vite.
18. Which statement about React components is true?
- A component must return only a single parent element
- A component cannot accept props
- A component must be a function
- A component cannot have state
Answer: A component must return only a single parent element
Components return one parent element, or a React Fragment.
19. In React, what is a component?
- A method used for side effects
- A function that takes props and returns UI
- A class used to manage state
- A system for routing
Answer: A function that takes props and returns UI
Components are reusable building blocks that return UI.
20. Which statement about React Hooks is true?
- Hooks can be used in class components
- Hooks can only be used in functional components
- Hooks are used to manage props
- Hooks are not supported in React
Answer: Hooks can only be used in functional components
Hooks are designed for functional components.