easyPhone Screen

What are React Components?

Q: What are React Components?

**Core concept (TL;DR).** Components are the **reusable, independent building blocks** of a React UI. A component is typically a JavaScript **function** that accepts inputs (**props**) and returns **JSX** describing what to render. You compose small components into larger ones to build the whole interface. Small components compose into a UI tree <App />

137 views

Understand the problem

A fundamental concept, crucial for building any React application.

componentsreusabilityuifunctional components

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Compose small components

function Avatar({ name }) {
  return <span style={{ marginRight: 8 }}>👤 {name}</span>;
}
function UserRow({ name, role }) {       // composes Avatar
  return <li><Avatar name={name} /> — {role}</li>;
}

export default function App() {
  const users = [{ name: "Ada", role: "Eng" }, { name: "Grace", role: "Sci" }];
  return (
    <ul style={{ padding: 24, fontFamily: "system-ui" }}>
      {users.map((u) => <UserRow key={u.name} {...u} />)}
    </ul>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between state and props?

What is the role of a bundler like Webpack in a React project?