title: Setting up react-bootstrap simple app
body: <p>I am setting up a getting-started app using react-bootstrap + requirejs + bower + php ( not nodejs). Very new to this spectrum of tools. so here is my app:</p>
  
  <p><strong>.bowerrc</strong></p>
  
  <pre><code>{
    "directory": "javascript/components/",
    "analytics": false,
    "timeout": 120000
  }
  </code></pre>
  
  <p><strong>bower.json</strong></p>
  
  <pre><code>{
    "name": "hello-react-bootstrap",
    "version": "1.0.0",
    "dependencies": {
      "requirejs": "*",
      "react": "~0.13.1",
      "react-bootstrap": "~0.20.0"
    }
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;title&gt;Hello World&lt;/title&gt;
  
  &lt;!-- Bootstrap Core CSS --&gt; 
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>    &lt;!-- Require Js --&gt;
      &lt;script data-main="javascript/setup.js" src="javascript/components/requirejs/require.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>javascript/setup.js</strong></p>
  
  <pre><code>requirejs.config({
      baseUrl: "javascript/components",
      paths: {
          "app": "../app",
          'classnames':'classnames/index',
          'jquery': 'https://code.jquery.com/jquery-2.1.3.min',
          'react':'react/react',
          'react-bootstrap':'react-bootstrap/react-bootstrap'
      }
  });
  
  require.config({
      urlArgs: "bust=" + (new Date()).getTime()
  })
  
  requirejs(["app/main"]);
  </code></pre>
  
  <p><strong>javascript/app/main.js</strong></p>
  
  <pre><code>//empty for now
  </code></pre>
  
  <p><strong>application structure</strong></p>
  
  <pre><code>── bower.json
  ├── index.html
  ├── javascript
  │   ├── app
  │   │   └── main.js
  │   ├── components
  │   │   ├── classnames
  │   │   ├── react
  │   │   ├── react-bootstrap
  │   │   └── requirejs
  │   └── setup.js
  └── styles
  </code></pre>
  
  <p>I tried sth like this:
  <strong>app/main.js</strong></p>
  
  <pre><code>define(['react-bootstrap'], function(ReactBootstrap){
      var React = require('react');
      var Button= ReactBootstrap.Button;
      React.render(Button,document.body)
  });
  </code></pre>
  
  <p>which gives me :
  <code>Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.</code></p>
  
  <p><strong>Edit</strong>
  Disregard my question following is working for me :</p>
  
  <p><strong>app/main.js</strong></p>
  
  <pre><code>define(['react-bootstrap'], function(ReactBootstrap){
      var React = require('react');  
      React.render(React.createElement(ReactBootstrap.Button,{bsStyle:'info'},'Hello World' ), document.body)
  });
  </code></pre>