How to layout in ReactJS?

Question

React

Hello, I'm learning react and have questions. I don't quite understand the principle of components. Let's say I have a web page containing: Header, Card (Content), Footer.
The Header and Footer have a static layout, while the Card has states that change their state. Here it is logical to move the card into a separate component, but how would it be correct in ReactJS to lay out a header with a footer for static elements? Move to separate components or in one wrapper of the form:

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

Answer 1

Everything depends on the tasks. In React, it is important to make the components as small as possible (the main thing is not to overdo it at all, although this is not easy). Decompose. This is important especially with components that can become reusable.
Making header and footer templates, and investing other even smaller components in them is quite justified and normal. Moreover, often in these parts there is some kind of javascript logic.
That is, it will be quite normal if in the start component, from which the rendering of the application begins, and the initial logic is usually the App component, you will have:

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

In general, it is better to separate headers and footers into separate components, because there will probably be some kind of js code there later. Plus, it looks logical and orderly.