CodeMIRAI
0 XP

Components

2 min read 2 runnable examples Quiz included

A component is a function that returns JSX. Components can use other components, which is how a whole app is assembled from small pieces.

React (JSX)
function Header() {
  return <h1>CodeMIRAI Store</h1>;
}

function Footer() {
  return <p style={{ color: "#888" }}>© 2026 CodeMIRAI</p>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Welcome! Browse our courses below.</p>
      <Footer />
    </div>
  );
}

Naming rule: capital letters

Component names must start with a capital letter. React treats <header> as an HTML tag and <Header /> as your component.

Reusing components

Write once, use many times:

React (JSX)
function Star() {
  return <span style={{ color: "#f5b301", fontSize: 24 }}>★</span>;
}

function Rating() {
  return (
    <div>
      <Star /><Star /><Star /><Star /><Star />
    </div>
  );
}

function App() {
  return (
    <div>
      <h3>Python course</h3>
      <Rating />
      <h3>SQL course</h3>
      <Rating />
    </div>
  );
}

Every Rating shows five stars. In the next lesson, props will let each one show a different number.

A component tree

Apps form a tree of components, from one root down to small leaves:

Diagram
App
├── Navbar
│   ├── Logo
│   └── Menu
├── CourseList
│   ├── CourseCard
│   ├── CourseCard
│   └── CourseCard
└── Footer

Keep components small

A good component does one thing. If a component grows long, or part of it repeats, extract a new component. Small components are easier to read, test and reuse.

Finished this lesson?Mark it complete to earn +20 XP and move your progress on.