Components

A component is a function that returns JSX

Define a component as a function whose name starts with a capital letter. It returns JSX. Then use it like an HTML tag: <MyComponent />.

function Welcome() {
  return <h2>Welcome to CodingClave!</h2>;
}

function App() {
  return (
    <div>
      <Welcome />
      <p>The heading above comes from the Welcome component.</p>
    </div>
  );
}

Two functions here. Welcome is a small component that returns one heading. App is the main component, and inside its markup it uses <Welcome /> — exactly like an HTML tag. When React draws App, it sees <Welcome /> and swaps in whatever Welcome returns. This is composition: building a bigger UI by placing smaller components inside it.

Compose and reuse

function Card() {
  return (
    <div style={{ border: "1px solid #ccc", borderRadius: 10, padding: 12, margin: 6 }}>
      <h4>A reusable card</h4>
      <p>Used as many times as you like.</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card />
      <Card />
    </div>
  );
}

We wrote the Card component once (a bordered box with a heading and text), then used <Card /> three times inside App. React renders three identical cards. Change the Card definition in one place and all three update together — that is the power of reusable components. (The style={{ ... }} is an inline style object; styling is covered in its own lesson.)