How To Create A Layout Component: React

Step by Step Guide on creating a layout on a create-react-app Project

Chris Achinga
·May 30, 2021·

2 min read

How To Create A Layout Component: React

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

When creating a react application/website, most of the pages would be sharing the same content all over, other than importing each component in every page to be rendered, it is much easier and faster to just create a layout component.

Here is how to do it:

1. Create a new file called Layout.js (could be any name of choice)

2. Create a function component

You can choose either class component or function component that works best for you 😄

const Layout = () => {
 return (
  <div></div>
 )
}

3. Add a prop called children to allow the components to be used as an HTML tag with both opening and closing tags i.e

<Layout></Layout>


const Layout = ({children}) => {
 return (
  <div></div>
 )
}

import NavigationBar from '../components/NavigationBar'
import Footer from '../components/Footer'

const Layout = ({children}) => {
 return (
  <div>
    <NavigationBar />
    <Footer />
  </div>
 )
}

5. Adding the children props

Add the children props where contents from other pages will be dynamically added:


import NavigationBar from '../components/NavigationBar'
import Footer from '../components/Footer'

const Layout = ({children}) => {
 return (
  <div>
    <NavigationBar />
    <main>
      {children}
    </main>
    <Footer />
  </div>
 )
}

Now any content added within the layout component will have the same navbar and footer.

6. Using the Layout Component:

Import the component into the pages needed i.e

import Layout from '../layout/Layout'

const AboutPage = () => {

return (
  <Layout>
    //page content
  </Layout>
)

}
import Layout from '../layout/Layout'

const HomePage = () => {

return (
  <Layout>
    //page content
  </Layout>
)

}
 
Share this