How to build reusable layouts in React JS with Router

#react #javascript

This is a common problem I couldn't do the common layout when I started to learn React. The problem is getting bigger as the scope of work increases. That is why there is a need for a common layout and we will use it again and again. Let's get started

Here is a simplified implementation of what I did.

This layout component will accept to get props such as title, description, className, children by default use some property here but we will be able to pass these properties from any other bases where we use this layout and that way we can dynamically display these content. We put inside single div and title, description these are headings but they will have the entire content. So with the last name of let's say let's asset class name as well so you might want different layout for different pages. Here classname send as props and content avaiable in children props . So this our layout now we should be able to use this layout any of the pages.Let's try in the Home page to begin with.

So let's say load from home page then we can use layout instead of using the div all we can do in layout. Now pass the title,desciption and send the content at the moment let's send anything let's just leave empty.Now if you go to the home page you can see we have the target achieve

So this way you can use this component and use any other component as your need For example if you don't send anything as props then you'll see the default title and description of what we have given