Html – How to create sections with React

html, reactjs

How should I create section in my html: create one root div and fill it with components like <Header/> and <Footer/> or create a few html section and fill each one with corresponding components?

Best Solution

I am finding that it is a lot cleaner for me to have a single root component that holds the header and footer components like so:

class RootComponent extends React.Component {  render() {    return (      <Header />      {this.props.children}      <Footer />    );  }}

This allows me to render my components without having to bloat them with the header and footer components. It is also annoying to me that I have to include the header and footer components every time I create a new page if I don't use this setup.