React Basics: JSX और Components

// A component is just a function that returns JSX
function Welcome() {
  return <h1>Namaste, student!</h1>
}

export default function Page() {
  return (
    <main>
      <Welcome />
      <Welcome />
    </main>
  )
}

export default function Page() {
  return (
    <>                                    {/* 1. one parent (Fragment) */}
      <h1 className="title">Courses</h1>  {/* 2. className, not class */}
      <label htmlFor="q">Search</label>   {/* 3. htmlFor, not for */}
      <input id="q" />                    {/* 4. close every tag */}
      <img src="/logo.png" alt="Logo" />
      <p style={{ color: 'green', fontSize: 18 }}>Open now</p> {/* 5. style is an object */}
      <button onClick={() => alert('Hi')}>Click</button>      {/* 6. camelCase events */}
    </>
  )
}

export default function Page() {
  const name = 'Aman'
  const marks = [78, 92, 85]
  const total = marks.reduce((a, b) => a + b, 0)

  return (
    <div>
      <p>Student: {name.toUpperCase()}</p>
      <p>Total: {total} / 300</p>
      <p>Percentage: {((total / 300) * 100).toFixed(1)}%</p>
      <p>Result: {total >= 99 ? 'Pass ✅' : 'Fail ❌'}</p>
    </div>
  )
}

// components/Header.jsx
export default function Header() {
  return (
    <header style={{ padding: 16, background: '#4f46e5', color: '#fff' }}>
      <strong>EduSite</strong>
    </header>
  )
}

// components/Footer.jsx
export default function Footer() {
  return <footer style={{ padding: 16 }}>© 2026 EduSite</footer>
}

// app/page.jsx
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default function HomePage() {
  return (
    <>
      <Header />
      <main style={{ padding: 16 }}>
        <h1>Learn coding the easy way</h1>
      </main>
      <Footer />
    </>
  )
}

// components/Buttons.jsx
export function PrimaryButton({ children }) { return <button className="btn">{children}</button> }
export function LinkButton({ children })    { return <button className="btn light">{children}</button> }

// usage — named exports use curly braces
import { PrimaryButton, LinkButton } from '@/components/Buttons'