Test Yourself
React Quiz
Answer the questions below. For multiple choice, pick the best single answer.
Multiple Choice (15)
1) 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
2) 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
3) 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
4) 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
5) Which hook lets you add local state to a function component?
- A. useProps
- B. useState
- C. useEffect
- D. useStyle
Show answer
Answer: B
6) 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
7) 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
8) In JSX, which attribute applies a CSS class to an element?
- A. class
- B. css
- C. className
- D. classes
Show answer
Answer: C
9) 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
10) Given: const [value, setValue] = useState(0). What is the initial value of value?
- A. 0
- B. null
- C. undefined
- D. ""
Show answer
Answer: A
11) 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
12) 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
13) 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
14) 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
15) 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)
1) Props are read-only from the perspective of the child component.
- True or False
Show answer
Answer: True
2) useState returns a pair: the current value and a function to update it.
- True or False
Show answer
Answer: True
3) In JSX you should use class instead of className for CSS classes.
- True or False
Show answer
Answer: False
4) By default, useEffect runs after the component renders to the screen.
- True or False
Show answer
Answer: True
5) 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.