Imagine you have a giant box of Lego blocks. You can use the same small blocks to build a car, a house, or a spaceship! React works exactly like Lego for websites. 🧱

React has some special words. Let's learn what they mean! 🧠

To build React apps on your computer, you need to use the computer's terminal (the black box where coders type commands). Don't worry, here we can just read along! 🖥️

If you want to try it for real one day, this is the magic spell coders use:

JSX is a special language React uses. It looks like HTML, but you can put JavaScript right inside it! It's like putting chocolate chips 🍫 inside your cookie dough 🍪.

// App.jsx — this is a REAL React file
// Every component file that uses JSX needs React available.
// Vite/Create React App set this up for you automatically.
import React from 'react';

function App() {
  return (
    <div className="card p-3">
      <h1 style={{ color: '#0891b2' }}>Hello React! 👋</h1>
      <p>Welcome to the magical world of JSX!</p>
      <button className="btn btn-primary btn-sm">Click Me! 🎮</button>
    </div>
  );
}

export default App;

// 👇 This console.log is NOT part of React —
// it's just here so you can see what the component describes.
console.log("✨ JSX Component Created!");
console.log("It has a title, a paragraph, and a button.");

✨ JSX Component Created!
It has a title, a paragraph, and a button.

A Component is a piece of your website. You can build a small piece (like a Button) and use it inside a bigger piece (like a Page).

Let's build a Robot out of components: Head, Body, and Legs! 🤖 Below is the complete, real code — three files working together, exactly how it would look in an actual project.

import React from 'react';

export function RobotHead() {
  return <div>🤖 Metal Head</div>;
}

export function RobotBody() {
  return <div>🦾 Shiny Body with buttons</div>;
}

export function RobotLegs() {
  return <div>🦿 Wheels instead of legs</div>;
}

import React from 'react';
import { RobotHead, RobotBody, RobotLegs } from './RobotParts';

function MyAwesomeRobot() {
  return (
    <div>
      <RobotHead />
      <RobotBody />
      <RobotLegs />
    </div>
  );
}

export default MyAwesomeRobot;

import React from 'react';
import MyAwesomeRobot from './MyAwesomeRobot';

function App() {
  return (
    <div>
      <h1>My Robot Builder 🛠️</h1>
      <MyAwesomeRobot />
    </div>
  );
}

export default App;

My Robot Builder 🛠️
🤖 Metal Head
🦾 Shiny Body with buttons
🦿 Wheels instead of legs

Sometimes, a Lego block needs information to work. Props are like passing a note 📝 to your friend! Here's the complete real code, including how the component is actually used with different names.

import React from 'react';

// The component receives 'props' — an object holding
// whatever data was passed in when it was used
function Greeting(props) {
  return <div>👋 Hello, <strong>{props.name}</strong>! Welcome!</div>;
}

export default Greeting;

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Riya" />
      <Greeting name="Aarav" />
      <Greeting name="Priya" />
    </div>
  );
}

export default App;

👋 Hello, Riya! Welcome!
👋 Hello, Aarav! Welcome!
👋 Hello, Priya! Welcome!

State is how your app remembers things that change. Think of a video game score 🎮 — it starts at 0, but when you get a coin, it goes up!

React gives you a built-in tool called useState to do this. It's a Hook — a special function that must be imported from the react package before you can use it. Here is the complete, real code:

import React from 'react';
import { useState } from 'react';

function ScoreBoard() {
  // useState(0) means: "start my memory at 0"
  // score = the current value, setScore = function to change it
  const [score, setScore] = useState(0);

  function handleClick() {
    setScore(score + 10);
  }

  return (
    <div>
      <h2>Score: {score}</h2>
      <button onClick={handleClick}>
        Grab a Coin (+10)
      </button>
    </div>
  );
}

export default ScoreBoard;

import React from 'react';
import ScoreBoard from './ScoreBoard';

function App() {
  return (
    <div>
      <h1>My Game 🎮</h1>
      <ScoreBoard />
    </div>
  );
}

export default App;

My Game 🎮
Score: 0
[ Grab a Coin (+10) ]

👆 After clicking the button twice:
Score: 20
[ Grab a Coin (+10) ]

Let's use everything we learned to create a machine that displays Superhero ID Cards on screen! We'll build a Component, give it Props (name, power, emoji), and reuse it three times. Here's the complete real code:

import React from 'react';

// Destructuring props right in the function signature —
// this pulls out name, superpower, and emoji directly
function SuperheroCard({ name, superpower, emoji }) {
  return (
    <div className="card p-3 mb-2">
      <h3>🦸 SUPERHERO ID CARD</h3>
      <p>👤 Name: {name}</p>
      <p>⚡ Power: {superpower}</p>
      <p>🎭 Symbol: {emoji}</p>
    </div>
  );
}

export default SuperheroCard;

import React from 'react';
import SuperheroCard from './SuperheroCard';

function App() {
  return (
    <div>
      <SuperheroCard
        name="Captain Code"
        superpower="Can debug any error!"
        emoji="💻"
      />
      <SuperheroCard
        name="Incredible Girl"
        superpower="Super strength and kindness!"
        emoji="🦸‍♀️"
      />
      <SuperheroCard
        name="Flash Boy"
        superpower="Types at the speed of light!"
        emoji="⚡"
      />
    </div>
  );
}

export default App;

🦸 SUPERHERO ID CARD
👤 Name: Captain Code
⚡ Power: Can debug any error!
🎭 Symbol: 💻

🦸 SUPERHERO ID CARD
👤 Name: Incredible Girl
⚡ Power: Super strength and kindness!
🎭 Symbol: 🦸‍♀️

🦸 SUPERHERO ID CARD
👤 Name: Flash Boy
⚡ Power: Types at the speed of light!
🎭 Symbol: ⚡

Let's see how much you learned! Pick the best answer. 🧠

Check the boxes as you finish each lesson. Watch your progress bar fill up! 🌈

Awesome job reaching here! 🎉 You just learned the basics of React. Here are fun things to do next:

• 🧱 Practice making more components (like a Pokemon card!)
• 🎮 Build a real clicker game using State
• 🎨 Add some CSS to make your React app look amazing
• 🍔 Learn how to fetch data from the internet (like getting a menu from a restaurant)
• 🤝 Show your Superhero ID cards to your friends!