Basic Component

Every UI element in react is a component

The root component typically lives in a file named App.js , but when using Next it each page will have its own root

Create a basic component

Each component is a method that you export

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

Note: React components must always be capitalised

Use a component

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile /> // Notice that is it captitalised
      <Profile />
      <Profile />
    </section>
  );
}