使用带有 `npm` 的 `react-bootstrap`

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 simple-webapp@0.0.1 No description
npm WARN package.json simple-webapp@0.0.1 No repository field.
npm WARN package.json simple-webapp@0.0.1 No README data
 
> fsevents@0.3.6 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
qwest@1.7.0 node_modules/qwest

react-bootstrap@0.13.3 node_modules/react-bootstrap

react-router@0.13.3 node_modules/react-router
├── object-assign@2.1.1
└── qs@2.4.1

gulp@3.8.11 node_modules/gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.10
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.1
├── tildify@1.1.0 (os-homedir@1.0.0)
├── v8flags@2.0.7 (user-home@1.1.1)
├── semver@4.3.6
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── gulp-util@3.0.5 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, beeper@1.1.0, lodash._reinterpolate@3.0.0, object-assign@2.1.1, replace-ext@0.0.1, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.6.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11)
├── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.2, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)

bootstrap@3.3.5 node_modules/bootstrap

react@0.13.2 node_modules/react
└── envify@3.4.0 (through@2.3.7, jstransform@10.1.0)

syrup@0.1.14 node_modules/syrup
├── minimist@1.1.0
├── q@1.0.1
├── run-sequence@1.0.2 (chalk@1.0.0)
├── jshint-stylish@1.0.0 (text-table@0.2.0, string-length@1.0.0, chalk@0.5.1, log-symbols@1.0.2)
├── vinyl-source-stream@1.1.0 (vinyl@0.4.6, through2@0.6.5)
├── gulp-plumber@1.0.0 (through2@0.6.5)
├── gulp-replace@0.5.3 (istextorbinary@1.0.2, replacestream@2.0.0, through2@0.6.3)
├── gulp-sourcemaps@1.5.1 (graceful-fs@3.0.8, convert-source-map@1.1.1, strip-bom@1.0.0, vinyl@0.4.6, through2@0.6.5)
├── vinyl-buffer@1.0.0 (through2@0.6.5, bl@0.9.4)
├── del@0.1.3 (is-path-cwd@1.0.0, each-async@1.1.1, is-path-in-cwd@1.0.0, globby@0.1.1, rimraf@2.4.0)
├── gulp-if@1.2.5 (through2@0.6.5, gulp-match@0.2.1, ternary-stream@1.2.3)
├── express@4.10.1 (merge-descriptors@0.0.2, utils-merge@1.0.0, cookie@0.1.2, fresh@0.2.4, escape-html@1.0.1, range-parser@1.0.2, cookie-signature@1.0.5, finalhandler@0.3.2, vary@1.0.0, media-typer@0.3.0, methods@1.1.0, parseurl@1.3.0, serve-static@1.7.2, content-disposition@0.5.0, path-to-regexp@0.1.3, depd@1.0.1, qs@2.3.2, on-finished@2.1.1, debug@2.1.3, etag@1.5.1, proxy-addr@1.0.8, send@0.10.1, accepts@1.1.4, type-is@1.5.7)
├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, vinyl@0.4.6, chalk@0.5.1, lodash.template@2.4.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11, lodash@2.4.2)
├── watchify@2.4.0 (through2@0.5.1, chokidar@0.12.6)
├── gulp-uglify@1.1.0 (deepmerge@0.2.10, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, uglify-js@2.4.16)
├── gulp-cache-breaker@0.0.3 (gulp-replace@0.4.0, checksum@0.1.1, request@2.58.0)
├── stringify@3.1.0 (through@2.3.7, stream-spec@0.3.5, html-minifier@0.6.9)
├── browserify@9.0.3 (https-browserify@0.0.0, tty-browserify@0.0.0, builtins@0.0.7, constants-browserify@0.0.1, process@0.10.1, path-browserify@0.0.0, os-browserify@0.1.2, isarray@0.0.1, inherits@2.0.1, commondir@0.0.1, string_decoder@0.10.31, stream-browserify@1.0.0, defined@0.0.0, has@1.0.0, shell-quote@0.0.1, subarg@1.0.0, domain-browser@1.1.4, xtend@3.0.0, shallow-copy@0.0.1, duplexer2@0.0.2, deep-equal@1.0.0, querystring-es3@0.2.1, assert@1.3.0, punycode@1.2.4, util@0.10.3, through2@1.1.1, events@1.0.2, timers-browserify@1.4.1, concat-stream@1.4.10, parents@1.0.1, console-browserify@1.1.0, vm-browserify@0.0.4, http-browserify@1.7.0, readable-stream@1.1.13, shasum@1.0.1, url@0.10.3, resolve@1.1.6, browser-resolve@1.9.0, labeled-stream-splicer@1.0.2, buffer@3.2.2, glob@4.5.3, JSONStream@0.10.0, deps-sort@1.3.9, syntax-error@1.1.4, browser-pack@4.0.4, crypto-browserify@3.9.14, insert-module-globals@6.5.0, browserify-zlib@0.1.4, module-deps@3.8.1)
├── griddle@0.1.2 (sane@0.8.1, handlebars@2.0.0)
├── gulp-react@3.0.1 (object-assign@2.1.1, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, react-tools@0.13.3)
├── gulp-jshint@1.9.0 (minimatch@1.0.0, through2@0.6.5, lodash@2.4.2, rcloader@0.1.4, jshint@2.8.0)
├── gulp-autoprefixer@1.0.1 (object-assign@1.0.0, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, autoprefixer-core@3.1.2)
├── babelify@6.0.1 (through@2.3.4, lodash@3.9.3, babel-core@5.5.8)
└── gulp-less@1.3.6 (convert-source-map@0.4.1, lodash.defaults@2.4.1, through2@0.5.1, vinyl-sourcemaps-apply@0.1.4, less@1.7.5)

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