To get this React-Bootstrap, we can either use the CDN directly or from the following URL: https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.5/react-bootstrap.min.js . Open this URL and save it in your local directory for fast performance. When you download the file, please make sure to download the source-map (react-bootstrap.min.js.map) file along with it to make debugging much easier. Once you are done with the download, add that library in your app's js directory and include it in your page's head section as shown in the following code snippet. Your head section will look as follows:

<script type="text/javascript" src="js/react.min.js"></script> 
<script type="text/javascript" src="js/react-dom.min.js"></script> 
<script src="js/browser.min.js"></script> 
<script src="js/react-bootstrap.min.js"></script> 

Now, you may be wondering that since we have the Bootstrap file already and we are also adding the React-Bootstrap JS file, won't they conflict with each other? No, they will not. React-Bootstrap is compatible with the existing Bootstrap styles so we don't need to worry about any conflicts.

Now we are going to create the same Navbar component in React-Bootstrap.

Here, is the structure of the Navbar component in React-Bootstrap:

var Nav= ReactBootstrap.Nav;
var Navbar= ReactBootstrap.Navbar;
var NavItem= ReactBootstrap.NavItem;
var NavDropdown = ReactBootstrap.NavDropdown;
var MenuItem= ReactBootstrap.MenuItem;
var navbarReact =(
<Navbar>
    <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="#">Edit Profile</NavItem>
            <NavDropdown eventKey={3}  id="basic-
            nav-dropdown">
                <MenuItem eventKey={3.1}>View Tickets</MenuItem>
                <MenuItem eventKey={3.2}>New Ticket</MenuItem>
            </NavDropdown>
        </Nav>
    </Navbar.Collapse>
</Navbar>
); 

Here is the highlight of the preceding code (with the order changed from below the benefits section above it).

The <Navbar> tag is a container of the component and it splits into two sections: <Navbar.Header> and <Nav>.

For responsive behavior, we have added the <Navbar.Toggle/> tag, that controls expand and collapse, and wrapped the <Nav> into the <Navbar.Collapse> to show and hide the nav items.

For capturing the event, we have used eventKey={1}; when we select any menu item, a callback is fired which takes two arguments, (eventKey: any, event: object) => any

Let's check out the benefits of using React-Bootstrap.

As you can see in the preceding code, it looks cleaner than the Twitter Bootstrap component because we can import the individual component from React-Bootstrap rather than including the entire library.

For example, if I want to build a navbar with a Twitter Bootstrap then the code structure is:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
            data-toggle="collapse" data-target="#bs-example-navbar-
            collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">EIS</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-
        navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home <span class=
                "sr-only">(current)</span></a></li>
                <li><a href="#">Edit Profile</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control"
                    placeholder="Search">
                </div>
                <button type="submit" class="btn
                btn-default">Submit</button>
            </form>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Now it's easy for you to compare the code and I'm sure, you will also agree to use React-Bootstrap as it's very component specific, whereas in Twitter Bootstrap we need to maintain multiple elements with the correct order to get similar results.

By doing this, React-Bootstrap pulls only specific components that we want to include and helps to reduce your app bundle size significantly. React-Bootstrap provides certain benefits as follows:

Here, is the full code view of our Navbar component:

<div id="nav"></div>
<script type="text/babel">
var Nav= ReactBootstrap.Nav;
var Navbar= ReactBootstrap.Navbar;
var NavItem= ReactBootstrap.NavItem;
var NavDropdown = ReactBootstrap.NavDropdown;
var MenuItem= ReactBootstrap.MenuItem;
var navbarReact =(
    <Navbar>
        <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="#">Edit Profile</NavItem>
            <NavDropdown eventKey={3}  id="basic-
            nav-dropdown">
                <MenuItem eventKey={3.1}>View Tickets</MenuItem>
                <MenuItem eventKey={3.2}>New Ticket</MenuItem>
            </NavDropdown>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
    );
    ReactDOM.render(navbarReact,document.getElementById('nav')); 

Woohoo! Let's take a look at our first React-Bootstrap component in the browser. The following screenshot shows what the component will look like:

Now to check the Navbar, If you resize your browser window, you'll notice that Bootstrap displays the mobile header with the toggle button below 768 px screen size of the tablet in portrait mode. However, if you click the button to toggle the navigation, you can see the navigation for the mobile.

The following screenshot shows what the mobile navigation will look like:

So now we have a major understanding of React-Bootstrap and Bootstrap. React-Bootstrap has active development efforts in place in to keep it updated.