← React Beginner Questions - Set 1 Q3

What are components in React?

React Beginner Questions - Set 1

A component is a function that returns JSX. Composition — components using components — is the whole architecture.

Example

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

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

function UserCard({ user }) {
  return (
    <article className="card">
      <Avatar name={user.name} />
      <h3>{user.name}</h3>
      <p>{user.role}</p>
    </article>
  );
}

export default function Team({ users }) {
  return <>{users.map(u => <UserCard key={u.id} user={u} />)}</>;
}

What to notice

• Upper-case names are mandatory for components — `<avatar />` would be treated as an unknown HTML tag.
• Each component owns its markup and styles; `UserCard` knows nothing about how `Avatar` renders inside.
• A component can be as small as one element; there is no minimum size.