Using `react-bootstrap` with `npm`

Question

I want to create a project using npm, and want to use react-bootstrap inside it. I have package.json with the following dependencies.

{
  "name": "simple-webapp",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "build": "gulp build",
    "watch": "gulp watch --color",
    "test": "echo \"This project doesn't have any tests.\" && exit 0"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "3.8.11",
    "qwest": "^1.5.12",
    "react": "0.13.2",
    "syrup": "0.1.14",
    "bootstrap": "3.3.5",
    "react-bootstrap": "0.13.3",
    "react-router": "0.13.3"
  }
}

When I run npm install I get:

npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
 
> [email protected] install /Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/node_modules/syrup/node_modules/watchify/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

  SOLINK_MODULE(target) Release/.node
  SOLINK_MODULE(target) Release/.node: Finished
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
  SOLINK_MODULE(target) Release/fse.node: Finished
[email protected] node_modules/qwest

[email protected] node_modules/react-bootstrap

[email protected] node_modules/react-router
├── [email protected]
└── [email protected]

[email protected] node_modules/gulp
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/bootstrap

[email protected] node_modules/react
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/syrup
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

Is it successfully installed? Inside my app/main.jsx I have a button:

<Button bsStyle="success" bsSize="small" onClick={someCallback}>
Something
</Button>

When I run npm run build, I get:

/Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/app/main.js
  line 27  col 33  'Button' is not defined.
  line 27  col 88  'someCallback' is not defined.

Where I am doing it wrong?

Answer 1

Looks like the install worked. What's causing your errors is that you did not require react-bootstrap so Button is undefined. The other error is just that you forgot to add this (has to be onClick={this.someCallback} where someCallback needs to be in your React Component.

To import react-browserifies Button you need to add

var Button = require('react-bootstrap').Button

to your app.jsx file