Welcome, apprentice wizard, to the Arcane Academy of React — where you'll learn the mystical arts of component-based magic!
Dark times approach... Every decade, the greatest magical academies across the realm gather for the legendary Wizarding War — a grand competition where students prove their mastery of React magic through increasingly complex challenges.
You've been chosen as a new student at the Arcane Academy. Through three phases of rigorous training, you'll build your skills from basic incantations to advanced battle systems. By the end, you'll command a fully functional battle dashboard where wizarding teams clash in real-time combat!
This course contains 13 modules divided into four progressive phases:
Technology: React CDN + Plain JavaScript
Learn fundamental JavaScript and basic React concepts. You'll track student stats, manage magical resources, and master the basics of React elements, JSX, props, and state.
- Module 1: React Elements with createElement()
- Module 2: JSX and Components
- Module 3: State with useState
- Module 4: Forms and Event Handling
Technology: Vite + JavaScript
Build complete Academy systems using modern tooling. Master side effects, styling, and component composition as you prepare for the coming war.
- Module 5: Styling in React (CSS Modules, Styled Components, Tailwind)
- Module 6: Side Effects with useEffect
- Module 7: The Children Prop
Technology: Vite + TypeScript
The war begins! Learn client-side routing, build the battle system with TypeScript for type safety, and master advanced patterns and optimization techniques.
- Module 8: Built-in React Hooks
- Module 9: Custom Hooks
- Module 10: Context API for Global State
- Module 11: React Router
- Module 12: Performance and Code Splitting
Technology: Next.js / Remix / Astro + TypeScript
Victory achieved! Now share the Academy's knowledge with the world. Learn modern server rendering with React Server Components and Islands Architecture.
- Module 13: Modern Server Rendering
- Part A: React Server Components (Next.js + Remix paths)
- Part B: Islands Architecture (Astro path - bonus)
Each module contains:
- Demo — A straightforward technical example showing the concept in action
- Three Quests — Themed exercises with story context that advance your skills and the narrative
By Module 13, you'll have built:
- A complete student management system
- Spell and potion directories
- Resource management dashboards
- A fully interactive battle arena with:
- Two teams of wizards fighting in real-time
- Health and mana tracking
- Spell animations and damage calculations
- Victory determination
- Lazy-loaded sections for Optimiusl performance
By Module 13, you'll deploy production server-rendered applications:
- Academy Knowledge Portal with React Server Components (Next.js/Remix)
- OR Lightning-fast content site with Islands Architecture (Astro)
- Real hosting on Vercel, Netlify, or Fly.io
- SEO-optimized and production-ready
To enroll in the Arcane Academy, you should have:
- Basic understanding of HTML and CSS
- Willingness to learn JavaScript (we start from fundamentals!)
- A code editor (VS Code recommended)
- Node.js installed (for Modules 5+)
- A curious mind and determination to master React magic
No prior React or TypeScript experience required!
- Navigate to the module folder
- Open the demo's
index.htmlfile in your browser - Study the demo code
- Complete the three quests in order
- Check your work against the acceptance criteria
- Navigate to the module folder
- Install dependencies:
npm install - Run the demo:
npm run dev - Study the demo code
- Complete the three quests in separate folders
- Test each quest with
npm run dev
If you're a designer learning React, there's a dedicated set of exercises that start from fully working apps — no blank canvas, no writing JavaScript from scratch. Read the Designer Guide first, then work through one exercise per module:
| Module | Exercise | What you do | JS concept |
|---|---|---|---|
| 2 — JSX | The Roster Board | Edit variables to change student data and add a student to a list | Variables |
| 3 — useState | The Spell Vault | Add a spell to a loop-rendered list, toggle a boolean | Loops |
| 4 — Forms | The Enrolment Scroll | Add a form option, change a function's output string | Functions |
| 5 — Styling | One Card, Three Ways | Restyle a SpellCard using CSS Modules, styled-components, and Tailwind | — |
| 5 — Styling | The Perfect Input | Build a component from scratch, then style it three ways | Components |
| 6 — useEffect | Design the Waiting | Design loading, error, and empty states on a pre-wired fetch | — |
| 7 — Children | Build the Great Hall | Compose a page from pre-built layout components (pure JSX) | — |
| 8 — Hooks | Spell Search Polish | Design pending and no-results states on a live search | — |
| 9 — Custom Hooks | Day and Night | Design light and dark themes as CSS variable sets | — |
| 10 — Context | The Third House | Add a theme by duplicating a theme object | — |
| 11 — Router | The Lost Corridor | Design a 404 page and add one route by copying a pattern | — |
| 12 — State Management | The Spell Shop | Design empty-cart, badge, and feedback states | — |
Each exercise lives in a designer-quest-01-* folder inside the corresponding module.
- STORY.md — The complete Wizarding War narrative, world-building, and character details
- assets/ — Shared resources including styles, data files, and images
- extras/ — Supplementary modules (Tailwind CSS, etc.) outside the main flow
Track your journey through the Academy:
- Module 1: React Elements with createElement()
- Quest 1: Wizard Identity
- Quest 2: Student Registry
- Quest 3: Spell Calculator
- Module 2: JSX and Components
- Quest 1: Translation
- Quest 2: SpellCard
- Quest 3: Potion Cards
- Module 3: State with useState
- Quest 1: Multiple State
- Quest 2: Object State
- Module 4: Forms and Event Handling
- Quest 1: Form Validation
- Quest 2: Controlled Inputs
- Quest 3: Form Submission
- Bonus: Roster Manager (Array State)
- Module 5: Styling in React
- Quest 1: House Badges (CSS Modules)
- Quest 2: Spell Cards (Styled Components)
- Quest 3: Battle Dashboard (Tailwind)
- Module 6: Side Effects with useEffect
- Quest 1: Meditation Timer
- Quest 2: War Intelligence
- Quest 3: Auto-Save
- Module 7: The Children Prop
- Quest 1: Layout Components
- Module 8: Built-in React Hooks
- Quest 1: DOM Access (useRef)
- Quest 2: Persisting Values (useRef)
- Quest 3: Media Controls (useRef)
- Quest 4: Spell Inventory (useReducer)
- Module 9: Custom Hooks
- Quest 1: useLocalStorage
- Quest 2: useFetch
- Quest 3: useDebounce
- Module 10: Context API for Global State
- Quest 1: Theme Switcher
- Quest 2: Battle Notifications
- Quest 3: User Session
- Module 11: React Router
- Quest 1: Academy Navigation
- Quest 2: Spell Directory
- Quest 3: War Room
- Module 12: Performance and Code Splitting
- Quest 1: Damage Calculator
- Quest 2: Army Roster
- Quest 3: Battle Arena
- Module 13: Modern Server Rendering
- Choose your path:
- Next.js Path (RSC) - Recommended first
- Quest 1: Academy Portal
- Quest 2: Battle Records
- Quest 3: Production Deployment
- Remix Path (RSC Alternative)
- Quest 1: Academy Portal
- Quest 2: Battle Records
- Quest 3: Production Deployment
- Astro Path (Islands - Bonus)
- Quest 1: Knowledge Base
- Quest 2: Interactive Simulator
- Quest 3: Production Portal
Once you've mastered all 13 modules and completed your chosen server rendering path, you'll have:
- Solid JavaScript fundamentals through practical wizard-themed exercises
- Complete React mastery from basic elements to advanced optimization
- TypeScript proficiency with proper typing for complex applications
- Production-ready skills with modern server rendering frameworks
- Portfolio projects including:
- Interactive Battle Arena (client-side React)
- Server-rendered Academy Portal (Next.js/Remix/Astro)
- Real-world full-stack skills applicable to professional React development
You'll be ready to build production applications with confidence, understanding both client-side React and modern server rendering approaches!
The Wizarding War awaits, brave apprentice. May your code be bug-free and your components render swiftly!
Ready to begin? Start with Module 1: React Elements
Questions or stuck? Review the hints in each quest README, or study the demo code for guidance.
Completed Modules 1-12? Continue to Module 13: Modern Server Rendering for the capstone!