DEV Community

Cover image for Layout Component and why we use it in React
Olena Drugalya
Olena Drugalya

Posted on

Layout Component and why we use it in React

This blog post starts a series of posts exploring React components. When a developer starts an application, he has to decide what components and for what purpose will be used.

In this blog post I will go through Layout Component - an extremely useful component in every application.

Purpose of Layout Component

This component does exactly what its name says - it defines the layout of the application. It simply accepts children as props and render them to the DOM together or without other child components.

It's a good practice to separate it from other components in the project in a separate folder like this:
Folder_layout

Usage of Layout Component

In the Layout folder we create Layout.js file and store the code of layout component there:



import React from 'react';

const Layout =({children}) =>{
    return(
        <>
        <div>
            <ToolBar/>
            <Sides/>
            <Backdrop/>
        </div>
        <main>{children}</main>
        </>
    )
}

export default Layout;


Enter fullscreen mode Exit fullscreen mode

In the main App.js file we import Layout and wrap our application with it:



import React from "react";
import Layout from "./components/Layout/Layout";

function App() {
  return (
    <>
      <Layout>
        <p>Test</p>
      </Layout>
    <>
  );
}

export default App;


Enter fullscreen mode Exit fullscreen mode

So we have separated layout logic into the component and if we want to change layout later, we can simple do that with changing just one component.

Reusable Layout Components

Because Layout component is so simple, it can be re-used in other parts of application, where a developer wants to use the same page layout. Moreover, it's possible to create customs reusable layouts which use FlexBox or Grid properties like this:



<Flexbox vertical gap={3}>
  <Flexbox noGrow>
    <h1>A Title for You</h1>
  </Flexbox>
  <Flexbox bottom>
    <p>Your cool paragraph.</p>
  </Flexbox>
</Flexbox>


Enter fullscreen mode Exit fullscreen mode

Working with reusable layouts is a very good practice, because it let you write code once and use it in a lot of parts of your application.

Here below are some of the reusable layout components which one can use while building applications:

1. React grid layout - demo and code
2. React Flexbox grid - code
3. React Material-UI grid - source
4. Grommet grid layout - source
5. React Bootstrap / Reactstrap grid layout - source
6. Autoresponsive React - code
7. React stack grid - demo and code
8. Hedron - code
9. React grid system - code
10. Rebass React grid - code
11. Semantic-UI React grid - source
12. Reflexbox - code

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Buy Me a Coffee at ko-fi.com

Top comments (9)

Collapse
 
starpebble profile image
starpebble

Looks like a helpful list. My feedback: I'm now thinking about the look and feel of the layout. For example, consider the simplest way to control colors and borders with react functional components that create a layout. Frameworks like Amplify explaining theming. Maybe there's something here to consider with themes and react and layout.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
joshpattersonmcfaddin profile image
Not_a_Space_Invader

My favorite part about React and other SPAs that act like it: when a page jumps around 20 times before I can click what I want. Svelte FTW.

Collapse
 
jonathandsouza profile image
Jona

What is the point of the Flexbox component?

Why not go for a simple html + css solution?

I would argue that going for a simple HTML + CSS solution would me more performant in the long run.

Collapse
 
mikkimichaelis profile image
Mikki Michaelis • Edited

Excellent post! Thank you for the list of repos! #1 Google result for 'react layout component'

Collapse
 
colindante profile image
randy

Hi, When you get a moment could you please outline your journey on learning JavaScript and more so on React. How much time did you invest to come to this level? My question stems from having looked through the code in your layouts which is very impressive. Thankyou much.

Collapse
 
claudebejj profile image
Claudebejj

a small mistake in the App.js .. the react fragment shorthand is not closed :)
</> instead of <>

Collapse
 
moises_787111910c97e3c3af profile image
Moises

Hola soy nuevo integrante alguien que pueda ayudar hacer que mi layout funcione le hecho tal cual dice la imagen pero no funciona no esta unificando mi sidebar con mi hader, por favor.

Collapse
 
moises_787111910c97e3c3af profile image
Moises

Image description
no esta unificando aqui mi sidebar con mi hader este es main import { Header } from '../Componentes/Header';
import { Sidebar } from '../Componentes/Sidebar';

const MainLayout = ({ children }) => {
return (
<>





{children}
</>
);
}

export default MainLayout;

Image description
y este es mi app
Image description