BitWithBite
React Worksheet
📝 JSX Rules
SCORE___ / 20
NameClassDate
After this worksheet you can
Apply the 7 JSX rulesUse conditional renderingRender lists with keysUse dynamic inline styles📚 Quick Recap
🎯 What you'll practice: JSX syntax rules — className, self-closing tags, curly braces, and the key prop.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1JSX uses className instead of:
2An empty <img> tag in JSX must be:
3JS expressions in JSX use:
4onClick uses which casing convention?
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Inline dynamic styles use double braces.
6Rendered lists must include a unique prop.
7Write JSX that conditionally renders <span>Admin</span> only if isAdmin is true.
8Write JSX that renders <Adult/> or <Minor/> based on age >= 18.
9Why must JSX return only one parent element (or a Fragment)?
🚀 Section C · Challenge ● CHALLENGE 5
10Write a component that renders a list of skill names (array of strings) as spans, each with a unique key and dynamic color based on index.
💭 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-C 4-B | 5 = curly 6 = key 7 = {isAdmin && <span>Admin</span>} 8 = {age >= 18 ? <Adult/> : <Minor/>} 9 = Because JSX compiles to a single React.createElement() call tree — a function can only return one value, so multiple sibling elements must be wrapped in one parent or Fragment | 10 = {skills.map((s,i) => <span key={i} style={{color: i%2?"blue":"red"}}>{s}</span>)}