Creating a Layout Component in React

Introduction

When creating a react application/website, most of the pages would be showing the same content all over. For example the navigation bar and footer. Instead of importing each component in every page to be displayed, it is better to just create a layout component. This article will guide on how to create layouts in react.

Layout Component Setup.

Firstly, you’ll need to create a Layout file(Layout.js) or whichever name you prefer to call it) for your React app.

Inside the Layout file, create a new component like this :

Making the Layout Component.

To make the 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:

Importing the Navigation bar and Footer.

Create the Navigation and footer files, then the components.

The navigation component can look like this :

Then the footer component :

To add the Navigation and Footer on the Layout component, update the Layout Component to look like this :

Using the Layout Component

Import the component where needed for example in the about page :

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

Conclusion

This article has covered the steps to create a Layout component in React.