Test Yourself
React Quiz
Answer the questions below. For multiple choice, pick the best single answer.
Multiple Choice (15)
- What is JSX?
- A. A CSS preprocessor
- B. A database query language
- C. A syntax extension for JavaScript that looks like HTML
- D. A server-side template engine
Show answer
Answer: C
- In JSX, how do you embed a JavaScript expression inside markup?
- A.
{{ expression }} - B.
${ expression } - C.
{ expression } - D.
<js>expression</js>
Show answer
Answer: C
- Which best describes a React component?
- A. A function or class that returns JSX to describe UI
- B. A CSS rule to style elements
- C. An HTML attribute
- D. A database model
Show answer
Answer: A
- What are props used for?
- A. Managing local component state
- B. Passing data from a parent component to a child
- C. Making network requests
- D. Writing CSS classes
Show answer
Answer: B
- Which hook lets you add local state to a function component?
- A. useProps
- B. useState
- C. useEffect
- D. useStyle
Show answer
Answer: B
- What is a common use for useEffect?
- A. Declaring local variables
- B. Rendering JSX
- C. Running side effects like fetching data, timers, or subscribing to events
- D. Creating CSS classes
Show answer
Answer: C
- Tailwind CSS is best described as…
- A. A JavaScript framework for building UIs
- B. A utility-first CSS framework with pre-made classes
- C. A React state management library
- D. A mobile app runtime
Show answer
Answer: B
- In JSX, which attribute applies a CSS class to an element?
- A. class
- B. css
- C. className
- D. classes
Show answer
Answer: C
- Given: const [count, setCount] = useState(0). What is count?
- A. A function that updates state
- B. The current state value
- C. A CSS class name
- D. A special React prop
Show answer
Answer: B
- Given:
const [value, setValue] = useState(0). What is the initial value ofvalue?
- A. 0
- B. null
- C. undefined
- D. ""
Show answer
Answer: A
- An effect with an empty dependency array ([]) runs…
- A. On every render
- B. Only when props change
- C. Once after the initial render
- D. Only when state changes
Show answer
Answer: C
- React is primarily a…
- A. Library for building user interfaces
- B. Full-stack web framework and server
- C. Database system
- D. CSS preprocessor
Show answer
Answer: A
- React Native is used to build…
- A. Desktop command line tools
- B. Mobile apps for iOS and Android using React
- C. Only web pages
- D. Server-side APIs
Show answer
Answer: B
- How do you pass a prop named title with value "Hello" to a component Card?
- A.
<Card props={title: "Hello"} /> - B.
<Card title="Hello" /> - C.
<Card {title: "Hello"} /> - D.
<Card>title="Hello"</Card>
Show answer
Answer: B
- How do you add inline styles to an element in JSX?
- A.
<p style="color: red">Hi</p> - B.
<p css="color: red">Hi</p> - C.
<p style={{ color: 'red' }}>Hi</p> - D.
<p class="color: red">Hi</p>
Show answer
Answer: C
True/False (5)
- Props are read-only from the perspective of the child component.
- True or False
Show answer
Answer: True
- useState returns a pair: the current value and a function to update it.
- True or False
Show answer
Answer: True
- In JSX you should use class instead of className for CSS classes.
- True or False
Show answer
Answer: False
- By default, useEffect runs after the component renders to the screen.
- True or False
Show answer
Answer: True
- Tailwind CSS gives you small utility classes so you can style without writing custom CSS files for every component.
- True or False
Show answer
Answer: True
Answers
The answers are revealed under each question. If you prefer a single key, let me know and I can add a summary block at the end.