🎓 Project 4: Course Platform

Chapter: React.js — Modern Frontend · Level ★★★ · Time: 90 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Combine routing, state, and hooksFilter/search rendered listsShare state via ContextAvoid prop drilling

📚 Quick Recap

🎯 What you'll practice: Planning a multi-page React app combining Lessons 20–22.

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

5Context avoids the problem known as prop .

6The hook used to read a Context's value is use.

7Write the filter logic for a search input bound to a "query" state variable.

8Sketch the FavouritesContext provider — what state does it hold?

9Why is Context better than passing "favourites" through 4 layers of unrelated components?

🚀 Section C · Challenge ● CHALLENGE 5

10Design the "My Favourites" page: what data source does it read from, and how does removing a favourite there update the rest of the app immediately?

💭 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 = drilling 6 = Context 7 = courses.filter(c => c.title.toLowerCase().includes(query.toLowerCase())) 8 = It holds a favourites array and its setter, exposed via value={{favourites,setFavourites}} to any nested component via useContext 9 = Prop drilling forces every intermediate component to accept and forward a prop it doesn't use itself, coupling unrelated components together; Context lets only the components that actually need the data subscribe to it directly | 10 = It reads from the same Context favourites array (filtered to just the saved ones); because all components share the same Context state, calling setFavourites to remove an item immediately re-renders every component reading that Context, including the cards elsewhere in the app.

📄 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