Components and UI Composition in React

Runnable lesson · press Try it on the examples to edit and run them here.

A component is a reusable piece of the user interface. In React, a component is a JavaScript function that returns what should appear on the screen. Every React app is a tree of components.

Think in pieces

Imagine a user profile screen. You could build it as one giant block of markup, or you could see the pieces:

• a ProfileCard that contains – an Avatar – a Name – a FollowButton

Each piece is small, has one job and can be reused. That is what components are for. The skill of breaking a screen into pieces and putting them together is called composition.

A component is a function

1
2
3
4
5
6
7

function Welcome() {
  return <h1>Welcome to React</h1>;
}

function App() {
  return <Welcome />;
}

Two rules to remember right now:

1. A component’s name starts with a capital letter. React uses that to tell components (<Welcome />) from normal HTML tags (<div>).
2. A component returns JSX, or null if it should show nothing.

You use a component by writing it like a tag. <Welcome /> means “call the Welcome function and put its result here”.

Composing components

A component can use other components. Here a ProfileCard is built from three smaller ones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function Avatar() {
  return <span style={{ fontSize: 40 }} role="img" aria-label="avatar">🧑‍💻</span>;
}

function Name() {
  return <h2 style={{ margin: 0 }}>Ada Lovelace</h2>;
}

function FollowButton() {
  const [following, setFollowing] = React.useState(false);
  return (
    <button onClick={() => setFollowing(!following)}>
      {following ? "Following" : "Follow"}
    </button>
  );
}

function ProfileCard() {
  return (
    <div style={{ border: "1px solid #ccc", borderRadius: 8, padding: 16, display: "inline-flex", gap: 12, alignItems: "center" }}>
      <Avatar />
      <Name />
      <FollowButton />
    </div>
  );
}

function App() {
  return <ProfileCard />;
}

App contains ProfileCard, which contains Avatar, Name and FollowButton. The FollowButton keeps its own state. Clicking it does not affect the other components.

Reuse is the point

Because components are functions, you can use them many times. Later lessons will show how to give each use different data with props. For now, notice that the same component can appear twice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function FollowButton() {
  const [following, setFollowing] = React.useState(false);
  return (
    <button onClick={() => setFollowing(!following)}>
      {following ? "Following" : "Follow"}
    </button>
  );
}

function App() {
  return (
    <div style={{ display: "flex", gap: 8 }}>
      <FollowButton />
      <FollowButton />
    </div>
  );
}

Each button has its own state. Click one and the other does not change.

How to split a screen into components

A useful habit: draw boxes around the parts of a design and ask whether each box does one thing. You can split when

• a part is repeated (a list item, a card, a button),
• a part has its own state or behaviour (a form, a toggle),
• or a function is simply getting too long to read.

Do not split everything into tiny pieces on day one. Start with a few clear components and split further when the code asks for it.

Common mistakes

• Lowercase names. <welcome /> is treated as an HTML tag, not your component. Always capitalise.
• Defining a component inside another component. It is recreated on every render and loses its state. Define components at the top level of the file.
• Calling a component like a function. Write <Welcome />, not Welcome().

Key points

• A component is a function that returns JSX.
• Component names start with a capital letter.
• You build screens by composing components inside components.
• Each component instance keeps its own state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

function Content() {
  return <main><p>Welcome! This is the main content.</p></main>;
}

function Footer() {
  return <footer><small>Copyright 2026</small></footer>;
}

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