React js with browser and download error

Question

I created a Rails application and installed react-rails . I also installed browserify-rails to help me manage external reaction packages.

All of my setup works well, but when I try to use the react-bootstrap batch component of the package, I get a firebug error that seems to block the execution of all other js. The error is being read:

Unopened invariant violation: addComponentAsRefTo (...): only ReactOwner can have links ....

I tried many possible solutions, but no luck. I do not understand why I get the error and why this only happens on certain components, such as <Modal />. If I use the usual html modal, there are no errors. Here is my setup:

package.json

{
  "name": "my_project",
  "devDependencies": {
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.1.1",
    "reactify": "^1.1.1"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.3",
    "react-dom": "^15.3.2"
  }
}

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require react
//= require react_ujs
//= require components
//= require_tree .

var React = window.React = global.React = require('react');
var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom');

application.rb

...
config.browserify_rails.commandline_options = "-t reactify --extension=\".js.jsx\""
...

components.js

// Setup app into global name space for server rendering
var app = window.app = global.app = {};

var MyComponent = require('./components/my_component');
app.MyComponent = MyComponent;

my_component.js.jsx

var Modal = require('react-bootstrap').Modal;
var MyComponent = React.createClass({
  render() {
    return (
      <Modal show={true}><h1>I'm working</h1></Modal>
    )
  }
});
module.exports = MyComponent;

I am very new to reacting and therefore I am not sure if this error has anything to do with my setup or if it is something else?

Answer 1

<Element></Element>, . , , not HTML - .

, :

<Modal show={true}><h1>I'm working</h1></Modal>

h1 to Modal. , , Modal.X Modal. , :

       <Modal
          show={this.state.show}
          onHide={close}
          container={this}
          aria-labelledby="contained-modal-title"
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title">Contained Modal</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={close}>Close</Button>
          </Modal.Footer>
        </Modal>

Answer 2

. , React npm. React ( react-bootstrap ).

, :

React ReactDOM application.js ( , ):

var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');

:

//= require react

React :

var React = require('react');
var Modal = require('react-bootstrap').Modal;
var MyComponent = React.createClass({});
module.exports = MyComponent;

, , .