Создание компонента страницы React

В создании компонента React есть три главных шага:

1. Импортировать React из пакета react, чтобы можно было использовать разметку JSX в .js-файлах.
2. Определить компонент. Это должна быть функция, которая возвращает элемент JSX.
   1. Я тут ничего не понял, но пошли дальше. Если это будет важно именно для создания страницы, придётся вернуться.
3. Экспортировать компонент, чтобы его можно было использовать как в других частях сайта.

Вот пример такого кода:

// Step 1: Import React. This lets you use JSX inside your .js file.
import * as React from 'react'

/* Step 2: Define your component. Note that your
component name should start with a capital letter. */
const MyComponent = () => {
  return (
    <h1>Hi, welcome to my site!</h1>
  )
}

/* Step 3: Export your component so it
can be used by other parts of your app. */
export default MyComponent

Я так понимаю, этот код нужно писать одновременно, а не по шагам. Для написания надо зайти в файл, который мы собираемся править, а не в папку. В данном случае my-component.js, например.

В случае этого кода, ты создаёшь некий компонент в виде html-кода, который потом можно тупо вставлять на страницу, а не переписывать заново. Вот как пример в Коде: ссылку написал не 15 раз, а создал компонент и потом тупо вставляешь код компонента.

То есть мы тут создали компонент MyComponent в файле my-component.js, при вызове которого приходит ответ в виде кода заголовка, и экспортировали его, чтобы можно было использовать в других местах нашего сайта. Так?

Компонент может включать в себя сколько угодно элементов, но они все должны быть объединены в один верхнеуровневый элемент. Вот на примере, правильный компонент содержит несколько элементов, объединённых тегом <div>, и неправильный, где просто два тега:

import * as React from 'react'

const ValidComponent = () => {
  return (
    <div>
      <h1>A valid component!</h1>
      <p>This will work fine.</p>
      <p>
        Since there is only one top-level element: the div.
      </p>
    </div>
  )
}

const InvalidComponent = () => {
  return (
    <h1>This won't work.</h1>
    <p>Because there are two elements at the top level.</p>
  )
}