⚡ What is React?

Chapter: React Foundations & JSX · Level ★☆☆ · Time: 15 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Explain what React isDefine components, props, stateExplain hooksExplain the Virtual DOM

📚 Quick Recap

🎯 What you'll practice: Core React concepts and how it differs from vanilla JS.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5A function used to access React features is called a .

6A reusable UI piece is called a .

7Explain the difference between vanilla JS DOM updates and React's approach.

8Name two apps/companies that use React.

9Why is the Virtual DOM faster than directly updating the real DOM every time?

🚀 Section C · Challenge ● CHALLENGE 5

10A teammate says "React updates the whole page every time state changes." Explain why this is inaccurate, using the Virtual DOM diffing concept.

💭 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-B 4-B | 5 = hook 6 = component 7 = Vanilla JS requires manually finding and updating DOM elements; React lets you declare what the UI should look like for the current state, and React updates the DOM itself 8 = e.g. Facebook, Instagram, Netflix, Airbnb 9 = Because it's an in-memory JS object, comparing (diffing) it against the previous version is far cheaper than touching the real DOM directly, and only the actual differences get applied to the real DOM | 10 = React doesn't touch the whole real DOM — it diffs the new Virtual DOM against the previous one and applies only the minimal set of real DOM changes needed, not a full page re-render.

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5