React Basics Quiz
~5 minutes
MCQ Quiz
Instructions: Click an option to select your answer. Use Show Answer to reveal the correct answer at any time. When ready, click Submit Quiz to see your score.
",
"C. { expression }",
"D. ${ expression }"
],
"correctAnswer": "C",
"explanation": "In JSX, JavaScript expressions are embedded using single curly braces { }. For example:
{studentName}
" }, { "id": 4, "type": "multiple_choice", "question": "Which naming convention must React component names follow?", "options": [ "A. All lowercase (e.g., mycomponent)", "B. snake_case (e.g., my_component)", "C. Start with a capital letter (e.g., MyComponent)", "D. Start with 'react_' prefix" ], "correctAnswer": "C", "explanation": "React component names must start with a capital letter. React uses this convention to distinguish between HTML tags (lowercase) and React components (capitalized)." }, { "id": 5, "type": "multiple_choice", "question": "What are 'props' in React?", "options": [ "A. Internal state variables of a component", "B. Data passed from a parent component to a child component", "C. CSS properties applied to components", "D. Built-in React lifecycle methods" ], "correctAnswer": "B", "explanation": "Props (short for properties) are the way you pass data from a parent component to a child component. They flow in one direction — from parent to child." }, { "id": 6, "type": "multiple_choice", "question": "What is the rule regarding modifying props inside a child component?", "options": [ "A. Props can be freely modified inside any component", "B. Props can only be modified using setState()", "C. Props must never be modified — they are read-only", "D. Props can be modified only inside class components" ], "correctAnswer": "C", "explanation": "A core React rule is that a component must never modify its own props. Props are read-only and should be treated as immutable by the receiving component." }, { "id": 7, "type": "multiple_choice", "question": "When rendering a list in React using .map(), what prop must each list item have?", "options": [ "A. id", "B. index", "C. key", "D. ref" ], "correctAnswer": "C", "explanation": "Each item rendered in a list must have a unique 'key' prop. React uses this to efficiently update the DOM when data changes, is reordered, or deleted." }, { "id": 8, "type": "multiple_choice", "question": "What does the following JSX compile to behind the scenes?\nHello, Ahmad!
", "options": [ "A. document.createElement('h1', 'Hello, Ahmad!')", "B. React.createElement('h1', null, 'Hello, Ahmad!')", "C. new HTMLElement('h1', 'Hello, Ahmad!')", "D. React.render('h1', 'Hello, Ahmad!')" ], "correctAnswer": "B", "explanation": "JSX is syntactic sugar. The compiler convertsHello, Ahmad!
into React.createElement('h1', null, 'Hello, Ahmad!') behind the scenes." }, { "id": 9, "type": "multiple_choice", "question": "Which of the following correctly shows 'prop destructuring' in a function component?", "options": [ "A. function Card(props.name, props.city) { }", "B. function Card([name, city]) { }", "C. function Card({ name, city }) { }", "D. function Card(name, city) { }" ], "correctAnswer": "C", "explanation": "Prop destructuring uses object destructuring syntax in the function parameter: function Card({ name, city }). This is equivalent to accessing props.name and props.city but is cleaner to read." }, { "id": 10, "type": "multiple_choice", "question": "What is a React Fragment and when would you use it?", "options": [ "A. A special type of prop used for styling", "B. A wrapper (<> ) that lets you return multiple elements without adding extra DOM nodes", "C. A method to split large components into smaller ones", "D. A built-in React component for lazy loading" ], "correctAnswer": "B", "explanation": "A React Fragment (<>...) lets you return multiple sibling elements from a component without adding an unnecessary wrapper to the DOM. Every JSX expression must have one root element."
},
{
"id": 11,
"type": "multiple_choice",
"question": "How do you set a default value for a prop in a function component?",
"options": [
"A. function Card({ price = 0 }) { }",
"B. Card.defaultProps = { price: 0 }",
"C. const price = props.price || 0",
"D. Both A and B are correct"
],
"correctAnswer": "D",
"explanation": "You can set default prop values either using ES6 default parameter syntax in destructuring (function Card({ price = 0 })) or using the Card.defaultProps object. Both approaches are valid."
},
{
"id": 12,
"type": "multiple_choice",
"question": "What is wrong with the following JSX?\n![](\"logo.png\")
",
"options": [
"A. The src attribute should be 'source'",
"B. The tag is not self-closed — it should be ",
"C. Images are not supported in JSX",
"D. The attribute value should use curly braces"
],
"correctAnswer": "B",
"explanation": "In JSX, all tags must be closed. HTML void elements like ![]()
,
, and must be written as self-closing tags:"
},
{
"id": 13,
"type": "multiple_choice",
"question": "Which type of React component is recommended for all new React code today?",
"options": [
"A. Class components",
"B. Higher-Order Components",
"C. Function components",
"D. Mixin components"
],
"correctAnswer": "C",
"explanation": "Function components are the modern standard. Since React 16.8, Hooks made function components just as powerful as class components, and the entire industry has moved toward them."
},
{
"id": 14,
"type": "multiple_choice",
"question": "In the following code, what is the role of 'App'?\nfunction App() { return (
",
"options": [
"A. The src attribute should be 'source'",
"B. The tag is not self-closed — it should be ",
"C. Images are not supported in JSX",
"D. The attribute value should use curly braces"
],
"correctAnswer": "B",
"explanation": "In JSX, all tags must be closed. HTML void elements like , and must be written as self-closing tags:
"
},
{
"id": 13,
"type": "multiple_choice",
"question": "Which type of React component is recommended for all new React code today?",
"options": [
"A. Class components",
"B. Higher-Order Components",
"C. Function components",
"D. Mixin components"
],
"correctAnswer": "C",
"explanation": "Function components are the modern standard. Since React 16.8, Hooks made function components just as powerful as class components, and the entire industry has moved toward them."
},
{
"id": 14,
"type": "multiple_choice",
"question": "In the following code, what is the role of 'App'?\nfunction App() { return (
0%
Your Result
0
Correct
0
Wrong
0
Skipped