How to run reactbootstrap with babel?

Question

I am trying to run this sample in my Webpack/ReactJS setup. I also did:

npm react-bootstrap

This is my component:

import React from 'react'
const {
    Navbar,
    Nav,
    NavItem,
    NavDropdown,
    MenuItem
} = ReactBootstrap;

export class ModalTest extends React.Component {
    constructor() {
        super();

    }

    render() {
        return (
            <Navbar>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="#">React-Bootstrap</a>
                    </Navbar.Brand>
                </Navbar.Header>
                <Nav>
                    <NavItem eventKey={1} href="#">Link</NavItem>
                    <NavItem eventKey={2} href="#">Link</NavItem>
                    <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                        <MenuItem eventKey={3.1}>Action</MenuItem>
                        <MenuItem eventKey={3.2}>Another action</MenuItem>
                        <MenuItem eventKey={3.3}>Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey={3.3}>Separated link</MenuItem>
                    </NavDropdown>
                </Nav>
            </Navbar>
        );
    }
}

export default ModalTest

But when I run my project I get:

Uncaught ReferenceError: ReactBootstrap is not defined

How can I fix this or do I need more references?

Answer 1

You need to import your react-bootstrap components like

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

Answer 2

You have to import your react-bootstrap components like this.

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