React components: your site in blocks
Understand why your site is built from components, read a component and its props, make a reusable card with typed props, and tell a Server Component from a Client Component.
Why this matters
Look at your Home page in app/page.tsx. It's probably a short list: <Hero />, <Services />, <SelectedWork />, <HowIWork />… Your whole Home page is a stack of blocks. Your header and footer are blocks too, used on every page.
These blocks are called components, and they're the reason AI can build a website quickly without making a mess of it. Each block lives in its own file, does one job and can be reused. When something's wrong with the footer, you know exactly which file to open. When you want the same card design in three places, you make it once.
Components also explain one of the most confusing words you'll meet in Stage 2: "use client". Your order form, your admin dashboard and your login page will all need it in the right place, and nowhere else. By the end of this lesson, you'll know why.
In the full lesson
- The idea in plain English
- Do it
- Check it worked
- Understand what AI wrote
- Quick check
- What you can do now
The step-by-step, the prompt to copy, the video and the check-it-worked list, for every lesson in all 15 modules. GHS 399 ($40), paid once by mobile money or card, yours to keep.