Components & Props

A component is a reusable, independent piece of UI — a JavaScript function that returns JSX. Component names must start with a capital letter so React can tell them apart from regular HTML tags.

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// usage
<Welcome name="Rahim" />
<Welcome name="Karim" />

Props: passing data down

Props (properties) are read-only inputs passed from a parent component to a child. A component must never modify its own props — data flows one way, top to bottom.

function StudentCard({ name, department, cgpa }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{department} — CGPA {cgpa}</p>
    </div>
  );
}

function App() {
  return (
    <StudentCard name="Fatema Begum" department="EEE" cgpa={3.95} />
  );
}

Destructuring props

// full props object
function StudentCard(props) {
  return <h3>{props.name}</h3>;
}

// destructured (preferred, more readable)
function StudentCard({ name, department }) {
  return <h3>{name} — {department}</h3>;
}

Default props

function Button({ label = 'Click me', variant = 'primary' }) {
  return <button className={`btn btn-${variant}`}>{label}</button>;
}

The children prop

Every component automatically receives a special children prop containing whatever was nested between its opening and closing tags:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// usage
<Card>
  <h2>Title</h2>
  <p>Any content can go here.</p>
</Card>

Composing components

Real apps are trees of components: a page is made of sections, sections are made of smaller components, and so on.

function App() {
  return (
    <div>
      <Header />
      <StudentList />
      <Footer />
    </div>
  );
}