Careeroza

What is a Component?

Components

A component is an independent, reusable piece of UI. A page is a tree of components: App → Navbar, ProductList → ProductCard. Component names must start with a capital letter so React can tell them apart from HTML tags.

Reusing a Component

Example

Write a component once and use it many times.

function Badge() {
  return <span style={{ background: '#04AA6D', color: '#fff', padding: '2px 8px', borderRadius: 10 }}>New</span>;
}

export default function App() {
  return (
    <ul>
      <li>React course <Badge /></li>
      <li>Node course <Badge /></li>
      <li>SQL course</li>
    </ul>
  );
}

Result