Learn React

import React from 'react';

// A React component is just a function
// that returns JSX
function Greeting({ name, role = 'Student' }) {
  return (
    <div className="card">
      <h1>Hello, {name}! 👋</h1>
      <p>Role: {role}</p>
      <p>Welcome to React.</p>
    </div>
  );
}

// Usage:
// <Greeting name="Alice" role="Developer" />
// <Greeting name="Bob" />   ← uses default role

┌─────────────────────────────┐
│ Hello, Alice! 👋            │
│ Role: Developer             │
│ Welcome to React.           │
└─────────────────────────────┘
┌─────────────────────────────┐
│ Hello, Bob! 👋              │
│ Role: Student               │
│ Welcome to React.           │
└─────────────────────────────┘

import { useState } from 'react';

function Counter() {
  // useState returns [currentValue, setter]
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        + Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        − Decrement
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

Count: 0
[+ Increment] [− Decrement] [Reset]

After clicking + three times:
Count: 3
[+ Increment] [− Decrement] [Reset]

function LanguageList({ languages }) {
  return (
    <ul>
      {languages.map((lang) => (
        <li key={lang.id}>
          <span>{lang.emoji}</span>
          <strong>{lang.name}</strong>
          <em> — {lang.level}</em>
        </li>
      ))}
    </ul>
  );
}

// Usage:
const data = [
  { id: 1, emoji: '🐍', name: 'Python',     level: 'Beginner' },
  { id: 2, emoji: '⚛️', name: 'React',      level: 'Intermediate' },
  { id: 3, emoji: '🦀', name: 'Rust',       level: 'Advanced' },
];
// <LanguageList languages={data} />

• 🐍 Python — Beginner
• ⚛️ React — Intermediate
• 🦀 Rust — Advanced