Scribd
Upload
221 views

Adding Navigation Bar To React App Using React-Bootstrap

Author: Kaleab Woldemariam, November 21, 2017 - Adding Navigation Bar to React App Using react-bootstrap.

Uploaded by

Kaleab Tekle
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
221 views

Adding Navigation Bar To React App Using React-Bootstrap

Author: Kaleab Woldemariam, November 21, 2017 - Adding Navigation Bar to React App Using react-bootstrap.

Uploaded by

Kaleab Tekle
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Adding navigation bar to react app using react-bootstrap

I am saving this post for my own future reference and other new react enthusiasts who
might find it useful. By no means Im an expert on react. However, I hope you will avoid the
hours of confusion (this could be a good movie title) I had to go through.

In choosing frontend components among others, we have 4 main competing options. These
are bootstrap, foundation, react-bootstrap and reactstrap. In this article you will find the
comparison of these options.

This choice seems a comparison between Coca Cola and Pepsi. I personally prefer Coca
Cola. Coca Cola and Pepsi must have different characteristics that make them preferred by
their respective customers. As I am trying to learn react, I want to use react-bootstrap,
which is javascript reimplementation of bootstrap 3. By far, Bootstrap is the most
commonly used frontend option. So, what are the advantages of react-bootstrap over
bootstrap?

The authors of Learning Web Development with React outline these advantages of react-
bootstrap:

React-bootstrap has no dependency on other libraries such as bootstrap and jquery.


Saves you a bit of typing, reduces bugs and typos by compressing the code.
It avoids react rendering of virtual DOM.
It is easy to detect DOM changes and update the DOM without conflict.
It is preferable than bootstrap which uses a different approach as it is written in
react JSX synthax.
It is easy to use.
It is maintained frequently.
It has growing followers on Github next to bootstrap,.

Installing react-bootstrap
Go to the folder where you created a react-app using the create-react-app command in
node CMD. Use the following command:

npm install react-bootstrap

This will install the react-bootstrap module in the node_modules of your project folder. For
styling the navbar you also need to install bootstrap.

npm install bootstrap

Now, add bootstrap css to the <head> section of index.html.


npm install bootstrap
<link type="text/css" href="/node_modules/bootstrap/css/bootstrap.min.css">

Also add the react-bootstrap javascript in the <body> section, below <div id="root"></div>
<script rel="stylesheet" type="javascript" href="../node_modules/react-
bootstrap/react-bootstrap.min.js"></script>

Create the navbar component


Import react-bootstrap to src/components/App.jsx. Create the file NavigationBar.jsx and put
the following code:

import React from 'react';


import { Navbar, Nav, NavItem, MenuItem, NavDropdown} from 'react-
bootstrap';

class Header extends React.Component {


render() {
return (
<Navbar fixedTop>
<Navbar.Header>
<Navbar.Brand>
<a href="#"> EIS </a>
</Navbar.Brand>
<Navbar.Toggle/>
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Home</NavItem>
<NavItem eventKey={2} href="#">Portfolio</NavItem>
<NavDropdown eventKey={3} title="Services" id="basic-nav-
dropdown">
<MenuItem eventKey={3.1}> Services 1></MenuItem>
<MenuItem eventKey={3.2}> Services 2></MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}

export { Header };

Import the class Header from NavigationBar to App.jsx and embed it as <Header
className="Header"/> below <div className="App"> .

I hope I had saved you some time in figuring react-bootstrap navbar component.

You might also like