BitWithBite
React Worksheet
🧠 React Foundations Review
SCORE___ / 20
NameClassDate
After this worksheet you can
Apply JSX rulesExplain props flowExplain the Virtual DOMSelf-check against explanations📚 Quick Recap
🎯 What you'll practice: A written review of the React foundations rules tested in the Lesson 5 quiz.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1JSX compiles to:
2Rendered lists need:
3Props flow:
4A functional component is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The Vite command to scaffold a React project is npm create .
6JS expressions in JSX are wrapped in braces.
7Can a component modify the props it receives? Explain.
8What must every JSX expression return?
9What is the Virtual DOM used for?
🚀 Section C · Challenge ● CHALLENGE 5
10Write a small component that renders a list of 3 hardcoded course names using .map(), with correct keys and className usage.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-A 4-B | 5 = vite@latest 6 = curly 7 = No — props are read-only from the receiving component; only the parent that passed the prop can change what it sends down 8 = Exactly one root element, or a Fragment wrapping multiple elements 9 = An in-memory representation of the UI that React diffs against the previous version to compute the minimal real DOM changes needed | 10 = function CourseList(){const courses=["Python","React","English"];return <ul className="courses">{courses.map((c,i)=><li key={i}>{c}</li>)}</ul>;}