How to create a navigation bar using React-Bootstrap
The rapid growth of single-page applications has led to an inevitable rise of JavaScript frameworks (the most widely used of which is React). As a result, this has led to the emergence of CSS frameworks to aid software developers in creating web applications. As React is the most popular framework for building applications, Bootstrap is a widely used CSS framework utilized by millions of developers around the globe.
How does React-Bootstrap work
Rather than using JavaScript sources and plugins from the CDN, React-bootstrap converts JavaScript to React components and merges them. Moreover, Bootstrap is compatible with all themes to give a consistent UI for our application. React-Bootstrap is one of the oldest React libraries, making it a suitable choice as our UI foundation. Let’s discuss how to integrate a React-Bootstrap navigation bar in a React application.
Installation
The easiest way to install React-Bootstrap is via the npm package, as shown in the command below:
$ npm install react-bootstrap bootstrap
Code
We will grab a navbar component from React-Bootstrap and add it to App.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);Note: React-Bootstrap has different components that we can use. To use a component, go to the Bootstrap
, copy the component’s markup, and update it according to the requirements. documentation https://react-bootstrap.github.io/
Explanation
-
Lines 1–4: These lines import the
react-bootstrapdependencies required to set up the navigation bar. -
Line 8: This line sets the background color of the navigation bar.
-
Line 9:
Nav.Brandadds the title React-Bootstrap to the navigation bar and links it to the home page. -
Lines 10–13: These lines add the two links, “Primary Link” and “Secondary Link”, to the navigation bar. We can modify this template bar to add/remove features to suit our applications.
Free Resources
