Function Components

Function Components — the modern standard

A React component is a JavaScript function that returns JSX. Function components are the default style in modern React.

Name components with PascalCase — UserCard, not userCard. React treats lowercase tags as HTML and uppercase as components.

Real-life example: A component is a reusable recipe card. Write the recipe once, cook it many times with different ingredients (props).

function Header() {
  return <header><h1>Rishtaara</h1></header>;
}

function Footer() {
  return <footer><p>&copy; 2026 Rishtaara</p></footer>;
}

function App() {
  return (
    <>
      <Header />
      <main><p>Learn React today.</p></main>
      <Footer />
    </>
  );
}

Component composition

Build small components and nest them inside bigger ones. This keeps code readable and reusable — the core idea of React.

Real-life example: Composition is like building a sandwich — bread, filling, and sauce are separate items you stack into one meal (page).

function CourseCard({ title, lessons }) {
  return (
    <article className="card">
      <h2>{title}</h2>
      <p>{lessons} lessons</p>
    </article>
  );
}

function CourseGrid() {
  return (
    <section>
      <CourseCard title="React Guide" lessons={28} />
      <CourseCard title="JavaScript" lessons={30} />
    </section>
  );
}