• Skip to main content
  • Skip to primary sidebar
  • Home
  • About
  • Subscribe BMA
  • Contact Us!

Be My Aficionado

Inspire Affection

You are here: Home / Programming / Create Page Layouts with React and Typescript

Create Page Layouts with React and Typescript3 min read

July 28, 2020 by Varun Shrivastava Leave a Comment

Layouts are one of the most important pieces when it comes to web development.

Let’s say you have a website that offers a member’s dashboard so that the members of the site can login and get the exclusive content.

Now, you wouldn’t want to have the same layout for your members that you have for a non-member of your website. The logged-in user may have access to a lot more features that will end up having a different page layout.

For instance, the logged-in user may have the option to change their profile information.

What I mean to say here is that they would have a different page setup (layout) than non-members.

So, you got the point.

In this short article, I will share a react snippet with you that will give a fair bit of idea on how to create different page layouts for your website.

Overview

Let’s say we want a pretty sidebar on the Dashboard for logged-in users to navigate. And this sidebar is static and will appear in multiple pages once the user has logged in.

So, you will need a component that will contain this static sidebar. This component will also be responsible for the position and structure of the page and how its child components sit inside of it.

Let’s directly look into a code snippet because that is faster and self-explanatory.

Dashboard Layout Component

As you can see in the above snippet. The DashboardLayout comes with its own style. I like to keep style separate from the component, so I always create a separate style class and import that in the components whenever I need it.

The import './sidebar.css' is just a stylesheet.

And the component is a very simple and minimal component that takes care of the sidebar and layout of the page. It places the child exactly where it wants to load it.

Dashboard Layout Component React

Dashboard Component

You’ve got the layout ready but how are you going to use it.

Suppose, Dashboard is a page that needs to extend the DashboardLayout. Then it can simply wrap itself with the layout it wants to use.

You can see that clearly in that component.

It is very straightforward and intuitive.

You can even select nested layouts with this. There is no limit.

The same concept can also be expanded for dynamic rendering which can be completely controlled from your backend data (I will leave the design to you for now).

So, with this, the class ends here 🙂

Let me know your thoughts on the same in the comments below.

Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • More
  • Click to print (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Telegram (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to share on Skype (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Filed Under: Programming Tagged With: frontend, page layout, programming, react, typescript, web developer

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Featured Posts

Flutter – Beautiful native apps in record time

January 21, 2019 By Varun Shrivastava Leave a Comment

WordPress White Screen Of Death- How To Debug and Fix It?

January 29, 2018 By Varun Shrivastava 1 Comment

Interview Attires for Men – How to dress for an Interview?

October 2, 2016 By Varun Shrivastava 2 Comments

Study Abroad Destinations : Research and Review

January 12, 2021 By Priyanka Yadav 5 Comments

How Does Successful Bloggers Earn Money Blogging

June 11, 2017 By Varun Shrivastava 4 Comments

Latest Posts

  • 3 Best Laptops (Mid-Range) For Every Use Case In India
  • Distributed System Architectural Patterns
  • The Power of being in the Present
  • Basic Calculator Leetcode Problem Using Object-Oriented Programming In Java
  • Study Abroad Destinations : Research and Review

Categories

  • Blogging (103)
  • Cooking (11)
  • Fashion (7)
  • Finance & Money (12)
  • Programming (51)
  • Reviews (4)
  • Technology (22)
  • Travelling (4)
  • Tutorials (12)
  • Web Hosting (8)
  • Wordpress N SEO (19)

Follow us on facebook

Follow us on facebook

Grab the Deal Now!

Hostgator Starting @$3.95/mo

DigitalOcean Free Credits

Trending

Affordable Hosting amazon aoc-2020 bad luck believe in yourself best database earn money blogging education experience fashion finance Financial Freedom food friends goals google india indian cuisine indian education system java javascript life life changing love make money microservices motivation oops poor education system principles of microservices problem-solving programmer programming reality search engines seo SSD Hosting success technology tips top 5 web web developer wordpress

Copyright © 2021 · BeMyAficionado by Varun Shrivastava · WordPress

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.