┌─────────────────────────────────────────────────────────────────┐
│                         App Component                           │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                    Header Component                      │   │
│  │  ┌──────────────┐  ┌──────────────────────────────────┐ │   │
│  │  │    Logo      │  │         Navigation               │ │   │
│  │  └──────────────┘  └──────────────────────────────────┘ │   │
│  └─────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                     Main Content                         │   │
│  │  ┌─────────────────┐  ┌─────────────────────────────┐   │   │
│  │  │   ProductCard   │  │        ProductCard          │   │   │
│  │  └─────────────────┘  └─────────────────────────────┘   │   │
│  └─────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                    Footer Component                      │   │
│  └─────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

// Function Declaration
function Welcome() {
  return <h1>Hello, World</h1>;
}

// Arrow Function (more common)
const Welcome = () => {
  return <h1>Hello, World</h1>;
};

// Arrow Function with implicit return
const Welcome = () => <h1>Hello, World</h1>;

// Welcome.jsx - Named export
export const Welcome = () => <h1>Hello</h1>;

// Welcome.jsx - Default export
const Welcome = () => <h1>Hello</h1>;
export default Welcome;

// App.jsx - Importing
import Welcome from './Welcome';           // Default import
import { Welcome } from './Welcome';       // Named import
import { Welcome as Greeting } from './Welcome'; // Renamed import

function App() {
  return (
    <div>
      <Welcome name="Sara" age={25} isOnline={true} />
      <Welcome name="Bob" age={30} isOnline={false} />
    </div>
  );
}

// Method 1: Props object
function Welcome(props) {
  return (
    <h1>
      Hello, {props.name}. You are {props.age} years old.
      {props.isOnline && <span> 🟢</span>}
    </h1>
  );
}

// Method 2: Destructuring (recommended)
function Welcome({ name, age, isOnline }) {
  return (
    <h1>
      Hello, {name}. You are {age} years old.
      {isOnline && <span> 🟢</span>}
    </h1>
  );
}

// Method 1: Default parameters (recommended)
function Button({ color = 'blue', size = 'medium', text }) {
  return (
    <button 
      style={{ backgroundColor: color }}
      className={`btn-${size}`}
    >
      {text}
    </button>
  );
}

// Method 2: defaultProps (older approach)
function Button({ color, size, text }) {
  // ...
}
Button.defaultProps = {
  color: 'blue',
  size: 'medium'
};

function Card({ children, title }) {
  return (
    <div className="card">
      <h2 className="card-title">{title}</h2>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

function App() {
  return (
    <Card title="Welcome">
      <p>This is the card content.</p>
      <button>Click me</button>
    </Card>
  );
}

// Layout component
function PageLayout({ children }) {
  return (
    <div className="page">
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

// Modal component
function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;
  
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

// Usage
<Modal isOpen={showModal} onClose={() => setShowModal(false)}>
  <h2>Confirm Action</h2>
  <p>Are you sure you want to proceed?</p>
  <button onClick={handleConfirm}>Yes</button>
</Modal>

npm install prop-types

import PropTypes from 'prop-types';

function UserCard({ name, age, email, isAdmin, avatar }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
      {isAdmin && <span className="badge">Admin</span>}
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  email: PropTypes.string.isRequired,
  isAdmin: PropTypes.bool,
  avatar: PropTypes.string
};

UserCard.defaultProps = {
  isAdmin: false,
  avatar: '/default-avatar.png'
};

// Presentational Component (dumb) - only handles display
function UserList({ users, onSelect }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id} onClick={() => onSelect(user)}>
          {user.name}
        </li>
      ))}
    </ul>
  );
}

// Container Component (smart) - handles logic
function UserListContainer() {
  const [users, setUsers] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(setUsers);
  }, []);

  return <UserList users={users} onSelect={setSelectedUser} />;
}

// Accordion compound component
function Accordion({ children }) {
  const [openIndex, setOpenIndex] = useState(null);
  
  return (
    <div className="accordion">
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          isOpen: index === openIndex,
          onToggle: () => setOpenIndex(index === openIndex ? null : index)
        })
      )}
    </div>
  );
}

function AccordionItem({ title, children, isOpen, onToggle }) {
  return (
    <div className="accordion-item">
      <button onClick={onToggle} className="accordion-header">
        {title}
        <span>{isOpen ? '−' : '+'}</span>
      </button>
      {isOpen && <div className="accordion-content">{children}</div>}
    </div>
  );
}

// Usage
<Accordion>
  <AccordionItem title="Section 1">Content 1</AccordionItem>
  <AccordionItem title="Section 2">Content 2</AccordionItem>
  <AccordionItem title="Section 3">Content 3</AccordionItem>
</Accordion>

function MouseTracker({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMove = (e) => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handleMove);
    return () => window.removeEventListener('mousemove', handleMove);
  }, []);

  return children(position);
}

// Usage
<MouseTracker>
  {({ x, y }) => (
    <div>Mouse position: {x}, {y}</div>
  )}
</MouseTracker>

function Button({ className, children, ...rest }) {
  return (
    <button className={`btn ${className}`} {...rest}>
      {children}
    </button>
  );
}

// All native button props (onClick, disabled, type, etc.) are passed through
<Button 
  className="primary" 
  onClick={handleClick} 
  disabled={isLoading}
  type="submit"
>
  Submit
</Button>