🧩 Lesson 1: Components & JSX

Learn how React components work by changing the code above!

W

Welcome, wei hup! 👋

Role: Student

Logged In

🎯 What You're Changing

  • • showWelcome: Controls if components appear
  • • appName: Changes text content
  • • theme: Switches entire visual style
  • • userName/userRole: Personalizes content
  • • enableAnimations: Toggles CSS effects

⚛️ React Concepts Here

  • • Components: Reusable UI pieces
  • • Props: Data passed to components
  • • JSX: HTML-like syntax in JavaScript
  • • Conditional Rendering: Show/hide based on conditions
  • • CSS Classes: Dynamic styling

📝 What's Happening in the Code

1. Variables Control Everything

// 🎯 These variables control the entire page:
const showWelcome = true
const appName = "My Awesome App"
const theme = "modern"

Variables at the top control how components render

2. Conditional Rendering

{showWelcome && (
  <WelcomeCard userName={userName} />
)}

Components only show when conditions are true

3. Props (Data Flow)

<WelcomeCard 
  userName={userName}
  userRole={userRole}
  theme={currentTheme}
/>

Props pass data from parent to child components

🚀 Try This Challenge!

  1. 1. Change showWelcome to false
  2. 2. Try different themes: "retro", "minimal", "colorful"
  3. 3. Change your name and role
  4. 4. Toggle isLoggedIn between true/false
  5. 5. Turn off animations with enableAnimations = false