React.js: layout different areas without adding multiple components

Hi, I am currently a beginner to React.js, and I want to know if I could divide the a page's body with different background color without adding multiple components. I have implemented the header and the footer, but I do not have any ideas to divide a body area into three parts. For example,

function App() {
  return (
    <div className="App">
      <Navbar />
      <AreaOne/>
      <AreaTwo/>
      <AreaThree/> 
      <Footer />
    </div>
  );
}

I was thinking about to use this kind of method, but I think it might be a better / more commonly used method. Any ideas would be appreciated