React Components — Deep Dive

// Reusable Card component
function Card({ title, children, footer, className = "" }) {
  return (
    <div className={`card ${className}`}>
      {title && <div className="card-header"><h3>{title}</h3></div>}
      <div className="card-body">{children}</div>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
}

// Usage — compose karo
function UserProfile({ user }) {
  return (
    <Card
      title={user.name}
      footer={<button>Message</button>}
      className="user-card"
    >
      <img src={user.avatar} alt={user.name} />
      <p>{user.bio}</p>
      <TagList tags={user.skills} />
    </Card>
  );
}

// Render prop pattern
function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch(url).then(r => r.json()).then(d => {
      setData(d);
      setLoading(false);
    });
  }, [url]);
  
  return render({ data, loading });
}

// Usage
<DataFetcher 
  url="/api/users" 
  render={({ data, loading }) => 
    loading ? <Spinner /> : <UserList users={data} />
  }
/>