В React существуют пользовательские и встроенные компоненты.
Другими словами, React поставляется с определённым набором уже готовых к использованию компонентов.
В данном пример, там, где вы видите div, h1 или p вы как раз и используете встроенные в React компоненты. Это не HTML-теги.
Это именно React-компоненты. Внутри React создана логика касательно того, как создавать соответствующие HTML-теги непосредственно в реальном DOM.
Еще раз подчеркну, что код как из примера выше будет сконвертирован в JavaScript-код.
А вот <Footer /> в данном примере является пользовательским компонентом, то есть компонентом, который создает непосредственно сам разработчик.
React отличает встроенные компоненты от пользовательских по первой букве в имени компонента (в теге JSX), если буква заглавная, значит это пользовательский компонент. Если буква в нижнем регистре, то это встроенный компонент.
В React есть следующее правило:
Все пользовательский компоненты должны начинаться с заглавной буквы.
Именно таким образом React понимает, что в том или ином месте JSX вы хотите использовать ваш компонент, а не встроенный компонент.
