Components and Props - React Tutorial

Components are the building blocks of React. Each component is a function that returns JSX. Props let you pass data from parent to child.

Creating a component

JSX

// A component is just a function that returns JSX
function UserCard({ name, age, role }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <span>{role}</span>
    </div>
  );
}

Using a component

JSX

function App() {
  return (
    <div>
      <UserCard name="Ram" age={22} role="student" />
      <UserCard name="Sita" age={21} role="teacher" />
    </div>
  );
}

Props are just the attributes you pass. React collects them into a single object ({ name, age, role }) and passes it to the function.

Children

JSX

function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage — everything between the tags becomes `children`
<Card title="Welcome">
  <p>This is the card body.</p>
  <button>Click me</button>
</Card>

Default props

JSX

function Badge({ text, color = 'blue' }) {
  return <span style={{ backgroundColor: color }}>{text}</span>;
}

<Badge text="New" />           {/* color defaults to 'blue' */}
<Badge text="Hot" color="red" />

Destructuring props

JSX

// Instead of props.name, props.age, destructure in the parameter list
function UserCard({ name, age, role = 'student' }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age} — {role}</p>
    </div>
  );
}

Composing components

JSX

function Avatar({ name }) {
  return <div className="avatar">{name[0]}</div>;
}

function UserCard({ name, age, role }) {
  return (
    <div className="card">
      <Avatar name={name} />
      <h2>{name}</h2>
      <p>{age} — {role}</p>
    </div>
  );
}

Components compose — a component can contain other components. This is what makes React powerful: build small pieces, combine them into complex UIs.

Tips

Components start with a capital letter (UserCard, not userCard).
Props are read-only — a component must never modify its own props.
Keep components small — one component, one job.
Use composition — build complex UIs from simple, focused components.

Next: props.