Trying to get the react-bootstrap example to work

Question

Trying to get the react-bootstrap example to work

1.5k views Asked by spodell At 20 December 2016 at 20:20

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>
   );
 }
}

Original Q&A

There are 1 answers

**Hugo Seleiro** · Answer 1 · 2016-12-21T12:00:21+00:00

I got it working like this. I create a component and name it top_bar.js.

import React, { Component } 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';

class NavBar extends Component {

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 NavBar;

Then in my app.js i call the component like this

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import NavBar from './top_bar';

export default class App extends Component {


render() {
    return (
        <div>
            <div>
                <NavBar/>
            </div>
        </div>
    );
}

}

Hope it helps !

Update

WebPack Config

module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015', 'stage-1']
  }
  }]
  },
 resolve: {
 extensions: ['', '.js', '.jsx']
 },
 devServer: {
 historyApiFallback: true,
 contentBase: './'
 }
 };

Package.json

{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel    support",
"main": "index.js",
"repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.2.1",
 "babel-loader": "^6.2.0",
 "babel-preset-es2015": "^6.1.18",
 "babel-preset-react": "^6.1.18",
 "chai": "^3.5.0",
 "chai-jquery": "^2.0.0",
 "jquery": "^2.2.1",
 "jsdom": "^8.1.0",
 "mocha": "^2.4.5",
 "react-addons-test-utils": "^0.14.7",
 "webpack": "^1.12.9",
 "webpack-dev-server": "^1.14.0"
 },
"dependencies": {
"2": "0.0.1",
"axios": "^0.15.2",
"babel-preset-stage-1": "^6.1.18",
"firebase": "^3.6.4",
"history": "^4.4.0",
"lodash": "^3.10.1",
"muicss": "^0.9.7",
"pug": "^2.0.0-beta6",
"react": "^0.14.3",
"react-bootstrap": "^0.30.7",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.8.1",
"redux": "^3.0.4",
"redux-devtools-extension": "^1.0.0",
"redux-thunk": "^2.1.0"
}
}

TechQA.

Trying to get the react-bootstrap example to work

There are 1 answers

Related Questions in REACT-BOOTSTRAP

Popular Questions

Popular Tags

Trending Questions