#React Sildebar

[latitudetechnolabsblog]

How to Create a Responsive Sidebar in React Using Bootstrap

Most of the websites are using sidebars nowadays. Sidebars are the website component shown to the left or right side of the website. They are used to display secondary information, navigation of websites, social media links and advertisements. This article is for you if you are entering in website development and want to create a website sidebar.

What Is React?

React is a free and open-source JavaScript library used to build the user interface, like using it for making a sidebar. Facebook developed it and released it in May 2013. React is a web platform, and it uses JavaScript.

Directly creating a sidebar from React will take more time but react has a JavaScript library called ‘’react-bootstrap’’. It has lots of components and styles that we will use to create a responsive sidebar.

What is ‘’react-bootstrap’’?

React-bootstrap is a bootstrap JavaScript made from scratch by React. React-bootstrap eliminates any dependency like jQuery. For years, it gradually became popular in making the UI foundation of any website. ‘’react-bootstrap’’ works with lots of bootstrap themes, making navbars, cards, layouts, and its React component model provides more control.

Before you start, you should know the following:

Basic Knowledge of React

NPM installed

Basic bootstrap Knowledge

NodeJS installed

Firstly, check that you have a node installed or not. You can check it by using this command: ‘’node -v. ‘’ If the Node is not installed, you can download it and install it. If you install Node, NPM also comes with it. You can check the NPM version by this command: ‘’npm –version’’.

Now, we have Node installed, and we can start to make a directory named ‘’sidebar’’ by using this command: ‘’npx create-react-app sidebar-app’’. You can use any name in place of the sidebar.

Installing Cdbreact

Now, we are installing CDBreact. CDBreact is a UI kit, and it has reusable components. It used to create websites and web apps.

To install CDBreact, enter the following command: ‘’npm install --save cdbreact’’.

Installing React router

We are installing react-router because a component of react-router, Navlink, will be needed for the sidebars.

Enter the following command to install react-router: ‘’npm install react-router-dom’’.

Now, you can check for any errors by running the command ‘’npm start’’.

‘’BrowserRouter’’ components will not work outside of react-router-dom to fold the app with ‘’BrowserRouter’’.

Creating a Sidebar

Now, we will create a file sidebar.js which will have a sidebar component. Now you have to import various sidebar components from cdbreact like CDBSidebarContent, CDBSidebarFooter, CDBSidebarHeader, CDBSidebarMenu, and CDBSidebarMenuItem.

We also have to import Navlink from React-router.

Now, let's make a sidebar header and footer, we will also add styles to components to look good.

Now, enter the text color, background color, padding pixels value according to your needs.

To add the body on the sidebar, enter the following in your code. Under CDBSidebarHeader you have to enter the following:

Now, let us import the sidebar into the app component.

Now, the sidebar is ready. You can see that your sidebar will have a dashboard, tables, profile page, analytics and 404 pages Or you can add home, about, my website, contacts, and blog. You can add anything you want, like You can put social media, advertisements, the live feed of content or any other content you want.

Conclusion

Creating sidebars on websites in react is simple with using react-bootstrap. You will not need jQuery. Before you start making sidebars, you must know React and bootstrap, NPM, and NodeJS installed. If you are still confused about adding a responsive sidebar or want to make a complete-featured website for your business, you can contact latitude technolabs; we have experts ready to help you.