How do a "Master Page" or "Page Frame" to share header/footer across multiple pages?


(Peter Alvin) #1

I’ve Googled for almost an hour but can’t seem to find an answer:

What is the DRY pattern to create a master page frame that is shared across multiple pages. This template would “wrap” site pages?

I actually want this for React Native for screens but guess it’s the same for both web and mobile.


(Steven Land) #2

Go to the entry point of your application (probably App.jsx). Now, scroll down to the render() method. Examine what you are returning here. For example, if your app uses React Router but you have yet to implement a site Header or Navigation you may just be returning the following:

render() {
	return (
		<div>				
			{routes}
		</div>
	)
}

Now, think about what other DOM elements you would like to have render here globally for your application. If you want to create a Header component that will render your site Header (which may or may not include the site Navigation), then the render() method in App.jsx would change to look like the following:

render() {
	return (
		<div>
	        <Header />
			{routes}
		</div>
	)
}

You could continue on this path and do the same thing for the site Footer. Create a Footer component and add it to the App.jsx. So now the answer to your question should be obvious, you add new React components to your app entry point.


(Mikayel) #3

try Composite View Pattern