I am trying to get the most basic responsive navbar working using the code from https://react-bootstrap.github.io/components.html#navbars
When I run the app, the dropdowns are vertically aligned (and a mess), and the dropdowns don't close when clicked.
Does anyone see anything obvious? Or could you point me to a ready to go repository (hopefully using ES6, jsx, and up-to-date dependencies).
package.json
{
"name": "react-bootstrap-example",
"version": "0.0.0",
"description": "React-Bootstrap example",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack -w"
},
"author": "",
"license": "",
"devDependencies": {
"babel": "^5.8.23",
"babel-core": "^5.8.23",
"babel-loader": "^5.3.2",
"bootstrap": "^3.3.7",
"css-loader": "^0.16.0",
"file-loader": "^0.8.4",
"less": "^2.5.1",
"less-loader": "^2.2.0",
"react-bootstrap": "^0.30.7",
"style-loader": "^0.12.3",
"webpack": "^1.12.0"
},
"dependencies": {
"react": "^0.13.3",
"react-dom": "^0.14.7"
}
}
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>React-Bootstrap Responsive Navbar</title>
</head>
<body>
<div id='app'></div>
<script src='public/bundle.js'></script>
</body>
</html>
wbpack.confg.babel.js
import webpack from 'webpack';
import path from 'path';
export default {
entry: './src/App.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: 'public/'
},
module: {
loaders: [
// Used for compiling ES2015 JavaScript
{ test: /\.js/, loader: 'babel' },
// Used for Bootstrap Less Source Files
{ test: /\.less/, loader: 'style!css!less' },
// Used for Bootstrap Less Source Files
{ test: /\.css/, loader: 'style!css' },
// Used for Bootstrap Glyphicon Fonts
{ test: /\.(woff2|woff|ttf|svg|eot)$/, loader: 'file' }
]
}
};
App.js
import React from 'react';
import 'bootstrap/less/bootstrap.less';
import HeaderNavigation from './HeaderNavigation';
React.render(
<div>
<HeaderNavigation />
</div>
, document.getElementById('app'));
HeaderNavigation.js
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import InputGroup from 'react-bootstrap/lib/InputGroup';
import FormControl from 'react-bootstrap/lib/FormControl';
import Button from 'react-bootstrap/lib/Button';
export default class HeaderNavigation extends React.Component {
render() {
let brand = <a href='#'>Project Name</a>;
return (
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<a href="#">React-Bootstrap</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<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>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
I got it working like this. I create a component and name it top_bar.js.
Then in my app.js i call the component like this
Hope it helps !
Update
WebPack Config
Package.json