Components

Relax. We'll talk through this in plain words — no textbook voice.

A component is a piece of UI split out into its own function. When you break a large React app down into small components, the code becomes easier to read, easier to reuse, and easier to debug.

jsx

function WelcomeCard() {
  return (
    <article className="card">
      <h2>React Course</h2>
      <p>Component နဲ့ UI ကိုအပိုင်းလိုက် တည်ဆောက်ကြမယ်။</p>
    </article>
  );
}

function App() {
  return (
    <main>
      <h1>ThutaTech Lessons</h1>
      <WelcomeCard />
      <WelcomeCard />
    </main>
  );
}

The `WelcomeCard` component is written once and reused twice inside `App`. In a real project, you can reuse components the same way for product cards, course cards, blog cards, and more.

You should see

The browser will show a heading and two matching cards.

Info

When using a component, you can write it as a self-closing tag, like `<WelcomeCard />`.

Easy traps

If you write a component function name in lowercase, React may treat it as an HTML tag. Write `WelcomeCard`, not `welcomeCard`.