DEV Community

Chris Achinga
Chris Achinga

Posted on • Originally published at chrisdevcode.hashnode.dev on

5

How To Create A Layout Component: React

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

This post will cover how to create a react app using Layout Components.

Live demo: https://hjpx0v.csb.app/

Source Code to the demo: https://github.com/achingachris/react-layout-demo

Here is how to do it:

Creating a React App using create-react-app

To start a new React application, run the following on the CLI of your developer environment:

npx create-react-app react-layout-demo
cd react-layout-demo
npm start
Enter fullscreen mode Exit fullscreen mode

If the installation is successful, open the browser and go to http://localhost:3000/:

Default react landing page

Creating the Layout Component

Inside the src directory, create a new folder: components/ and inside the new folder, add a new file: Layout.js

Inside the new file, create a new component.

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


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

export default Layout
Enter fullscreen mode Exit fullscreen mode

Making the Component a Layout Component

To make the component, a layout component, we will use React inheritance, which allows the contents of the component used anywhere the Layout component will be imported. To do that, we will use the children props:

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

export default Layout
Enter fullscreen mode Exit fullscreen mode

Adding Navigation and Footer to the Layout.

Inside the src/components directory, add two new files: Navigation.js and Footer.js and update the content as follows:

Navigation.js

const Navigation = () => {
return (
<div>
<nav className='navbar navbar-expand-lg bg-light'>
<div className='container-fluid'>
<a className='navbar-brand' href='/'>
ChrisDevCode
</a>
<button
className='navbar-toggler'
type='button'
data-bs-toggle='collapse'
data-bs-target='#navbarSupportedContent'
aria-controls='navbarSupportedContent'
aria-expanded='false'
aria-label='Toggle navigation'
>
<span className='navbar-toggler-icon' />
</button>
<div className='collapse navbar-collapse' id='navbarSupportedContent'>
<ul className='navbar-nav me-auto mb-2 mb-lg-0'>
<li className='nav-item'>
<a className='nav-link active' aria-current='page' href='/'>
Home
</a>
</li>
<li className='nav-item'>
<a className='nav-link' href='/'>
Link
</a>
</li>
<li className='nav-item dropdown'>
<a
className='nav-link dropdown-toggle'
href='/'
id='navbarDropdown'
role='button'
data-bs-toggle='dropdown'
aria-expanded='false'
>
Dropdown
</a>
<ul className='dropdown-menu' aria-labelledby='navbarDropdown'>
<li>
<a className='dropdown-item' href='/'>
Action
</a>
</li>
<li>
<a className='dropdown-item' href='/'>
Another action
</a>
</li>
<li>
<hr className='dropdown-divider' />
</li>
<li>
<a className='dropdown-item' href='/'>
Something else here
</a>
</li>
</ul>
</li>
<li className='nav-item'>
<a className='nav-link disabled' href='/'>
Disabled
</a>
</li>
</ul>
<form className='d-flex' role='search'>
<input
className='form-control me-2'
type='search'
placeholder='Search'
aria-label='Search'
/>
<button className='btn btn-outline-success' type='submit'>
Search
</button>
</form>
</div>
</div>
</nav>
</div>
)
}
export default Navigation
view raw Navigation.js hosted with ❤ by GitHub

Footer.js

view raw Footer.js hosted with ❤ by GitHub

To add the Navigation and Footer on the Layout component, update the Layout.js to:

import Navigation from './Navigation'
import Footer from './Footer'

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

export default Layout
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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>
)

}

Enter fullscreen mode Exit fullscreen mode

Ensure that all the contents in the component are wrapped inside the <Layout></Layout>

Conclusion

The post has covered the steps to create a Layout component in React.

Codesandbox

Image of Bright Data

Maximize Data Efficiency – Store and process vast amounts efficiently.

Optimize your infrastructure with our solutions designed for high-volume data processing and storage.

Optimize Now

Top comments (0)

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay