Scribd Logo
Upload

Welcome to Scribd!

  • Adding Navigation Bar To React App Using React-Bootstrap

    Uploaded by

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

    Original Title

    Adding Navigation Bar to React App Using react-bootstrap

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

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

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    120 views2 pages

    Adding Navigation Bar To React App Using React-Bootstrap

    Uploaded by

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

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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