Как правильно верстать на ReactJS?

Question

[vladislav3101]

Привет, изучаю реакт и есть вопросы. Не совсем понял принцип компонентов. Допустим у меня есть веб страница содержащая: Шапку, Карточку (Контент), Подвал.
Шапка и Подвал имеют статичную верстку, а Карточка имеет стейты, которые меняют свое состояние. Здесь логично вынести карточку в отдельный компонент, но как правильно будет в ReactJS сверстать статичные эелементы шапку с подвалом? Вынести в отдельные компоненты или же в одной обвертке вида:

function PageIndex() {
   return (
       <header>
            ...
       </header>
        <Cards/>
        <footer>
             ...
        </footer>
   );
}

Comments

[WbICHA]

Шапку, Карточку (Контент), Подвал.

Не ожидал в 2021 увидеть свежий перевод промта.

Answer 1

[Sun_Day]

Все зависит от задач. В реакте важно делать компоненты как можно более мелкими(главное совсем не переусердствовать, хоть это и непросто). Декомпозировать. Это важно особенно с компонентами, которые могут стать переиспользуемыми.

Сделать темплейты хедера и футера, а в них вкладывать другие еще более мелкие компоненты - вполне оправданно и нормально. Тем более зачастую в этих частях бывает какая-то жаваскриптовая логика.

То есть, будет вполне норм, если в стартовом компоненте, с которого начинается отрисовка приложения, и начальная логика - это как правило App component, у вас будет:

const App = () => {
  <Header />
  ... other components
  <Footer />
}

В общем говоря, лучше вынести хедеры и футеры по отдельным компонентам, т.к там наверняка впоследствии будет какой-то js код. Плюс, это логично и упорядоченно выглядит.