Functional Components

// Simple component
function Hello() {
  return <h1>Hello World!</h1>;
}

// Arrow function syntax
const Hello = () => {
  return <h1>Hello World!</h1>;
};

// Default export — दुसऱ्या files मधून import करायला
export default function Hello() {
  return <h1>Hello World!</h1>;
}

// Named export
export function Hello() {
  return <h1>Hello World!</h1>;
}

function Header() {
  return (
    <header>
      <h1>Tech Tatya 🎯</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  );
}

function Footer() {
  return <footer><p>© 2025 Tech Tatya</p></footer>;
}

function App() {
  return (
    <div>
      <Header />       {/* Component वापरणे */}
      <main>
        <h2>मुख्य Content</h2>
      </main>
      <Footer />
    </div>
  );
}

export default App;

// Button.jsx — स्वतंत्र file मध्ये
export default function Button({ label, onClick }) {
  return (
    <button
      onClick={onClick}
      className="bg-blue-500 text-white px-4 py-2 rounded"
    >
      {label}
    </button>
  );
}

// App.jsx — import करून वापरणे
import Button from './Button';

export default function App() {
  return (
    <div>
      <Button label="Click Me" onClick={() => alert("Clicked!")} />
      <Button label="Submit" onClick={() => alert("Submitted!")} />
    </div>
  );
}