Interactive React Tutorial
Learn React & Next.js by changing one line of code at a time! Clone this repo and start experimenting immediately.
🚀 Quick Start
Step 1: Look for lines marked with 🎯 in the code
Step 2: Change the value and save the file
Step 3: Watch the magic happen instantly!
💡 Quick Jump: Currently set to "components" lesson. Change the quickLesson variable above to jump to any lesson!
Choose Your Learning Path
01. Components & JSX
BeginnerLearn how to create and use React components
02. Props & TypeScript
BeginnerPass data between components with typed props
03. State & Interactivity
BeginnerMake your components interactive with useState
04. Lists & Conditional Rendering
BeginnerRender dynamic content and handle arrays
05. useEffect & Side Effects
BeginnerLearn lifecycle effects, timers, and data fetching
06. Next.js Routing
IntermediateNavigate between pages with Next.js routing
📚 How This Tutorial Works
🎯 Look for Target Lines
Every lesson has clearly marked lines you can modify. Just look for the 🎯 emoji and follow the suggestions!
const message = "Hello"
⚡ Instant Feedback
Every change you make shows immediate results. No complex setup, no waiting - just pure learning!