Test what you learned.

8 questions on React Basics & JSX. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

React Basics & JSX — Chapter Quiz

Eight questions on JSX, components, and rendering.

0/ 8

Question 1
1
Why does a function component's name need to start with a capital letter?
AIt's just a style preferenceBLowercase names are treated as HTML tagsCJSX requires it for parsingDIt's required for TypeScript
Capitalization tells JSX whether to treat the name as an HTML tag (<div>) or a component (<MyThing>).
Question 2
2
A function component can return multiple top-level JSX elements without a wrapper.
TTrueFFalse
JSX requires one root. Use a Fragment (<>...</>) or a parent element to group multiples.
Question 3
3
Which is the right way to write a "class" attribute in JSX?
AclassBclassNameCcssClassDstyle.class
class is a JS keyword. JSX uses className instead.
Question 4
4
What does this JSX produce?
```
function App() {
 const n = 5;
 return {n + 1};
}
```
An + 1B{n + 1}C6DTypeError
Inside { }, JSX evaluates JS expressions. n + 1 is 6.
Question 5
5
What does createRoot(...).render(<App />) do?
AMounts the React app into a DOM nodeBCompiles JSX into JSCCreates a new state storeDInstalls React
createRoot is the bridge from React to the real DOM — call it once at the entry point.
Question 6
6
In React 19, the style prop takes a CSS string like in HTML.
TTrueFFalse
style takes an OBJECT with camelCase keys — style={{ color: "red", marginTop: 10 }}.
Question 7
7
What is <StrictMode>?
AA production performance optimizationBA dev-only helper that surfaces bugs by double-running componentsCA required wrapper for every React appDA type-safe version of React
<StrictMode> runs components and effects extra times in development to help find side-effect bugs. It does nothing in production builds.
Question 8
8
To group elements without adding a wrapper div, use a _________.
<>...</> (or <Fragment>...</Fragment>) renders no wrapping element — useful when a wrapper would break layout.