[added] Support for React 0.13.x

re add react to devDeps

remove old or depreciated API's

Remove getDOMNode classSet, joinClasses, CloneWithProps

Fix case on require()

typos, and syntax errors

update AMD, cjs package def

fix tests

Removed test dependence on root refs

[FIX] Docs, upgrade to react-router

Author: jquense

Gruntfile.js

@@ -136,7 +136,8 @@ module.exports = function (grunt) {
             almond: "../tools/vendor/almond"
           },
           packages: [
-            {	name: 'react', location: '../node_modules/react', main: './react' }
+            {	name: 'react', location: '../node_modules/react', main: './react' },
+            { name: 'classnames', location: '../node_modules/classnames', main: './index' }
           ],
           include: ["almond", "react-bootstrap"],
           exclude: ["react"],

docs/build.js

@@ -2,12 +2,22 @@
 
 var fs = require('fs');
 var path = require('path');
-var nodejsx = require('node-jsx').install();
+
+require('node-jsx').install();
+
+var React = require('react');
+var routes = require('./src/Routes');
+var Router = require('react-router');
+
 var Root = require('./src/Root');
 
 Root.getPages()
   .forEach(function (fileName) {
-    var RootHTML = Root.renderToString({initialPath: fileName});
 
-    fs.writeFileSync(path.join(__dirname, fileName), RootHTML);
+    Router.run(routes, '/' + fileName, function (Handler) {
+      var RootHTML = React.renderToString(React.createElement(Handler));
+
+      fs.writeFileSync(
+        path.join(__dirname, fileName), RootHTML);
+    })
   });

docs/client.js

@@ -1,9 +1,15 @@
 'use strict';
 
 var React = require('react');
-var Root = require('./src/Root');
+var Router = require('react-router');
+var routes = require('./src/Routes');
 
 // For React devtools
 window.React = React;
 
-React.render(React.createFactory(Root)(window.INITIAL_PROPS), document);
+Router.run(routes, Router.RefreshLocation, function (Handler) {
+  React.render(
+    React.createElement(Handler, window.INITIAL_PROPS), document);
+})
+
+

docs/server.js

@@ -2,25 +2,34 @@
 
 var express = require('express');
 
+
 var development = process.env.NODE_ENV !== 'production';
 var app = express();
 
 if (development) {
+  var React = require('react');
   var path = require('path');
   var url = require('url');
   var browserify = require('connect-browserify');
   var nodejsx = require('node-jsx').install();
-  var Root = require('./src/Root');
+
+  var routes = require('./src/Routes');
+  var Router = require('react-router');
 
   app = app
     .get('/assets/bundle.js', browserify('./client', {debug: true, watch: false}))
     .use('/assets', express.static(path.join(__dirname, 'assets')))
     .use('/vendor', express.static(path.join(__dirname, 'vendor')))
     .use(function renderApp(req, res) {
       var fileName = url.parse(req.url).pathname;
-      var RootHTML = Root.renderToString({initialPath: fileName});
 
-      res.send(RootHTML);
+      Router.run(routes, req.url, function (Handler) {
+        var RootHTML = React.renderToString(React.createElement(Handler));
+
+        res.send(RootHTML);
+      })
+
+      
     });
 } else {
   app = app

docs/src/NavMain.js

@@ -1,19 +1,20 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
+var Router = require('react-router');
 var Navbar = require('../../lib/Navbar');
 var Nav = require('../../lib/Nav');
 
+
 var InternalLink = Router.Link;
 
 var NAV_LINKS = {
   'getting-started': {
-    link: '/getting-started.html',
+    link: 'getting-started',
     title: 'Getting started'
   },
   'components': {
-    link: '/components.html',
+    link: 'components',
     title: 'Components'
   }
 };
@@ -24,7 +25,7 @@ var NavMain = React.createClass({
   },
 
   render: function () {
-    var brand = <InternalLink href="/" className="navbar-brand">React Bootstrap</InternalLink>;
+    var brand = <InternalLink to='home' className="navbar-brand">React Bootstrap</InternalLink>;
 
     return (
       <Navbar componentClass='header' brand={brand} staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
@@ -40,7 +41,7 @@ var NavMain = React.createClass({
 
     return (
         <li className={this.props.activePage === linkName ? 'active' : null} key={linkName}>
-          <InternalLink href={link.link}>{link.title}</InternalLink>
+          <InternalLink to={link.link}>{link.title}</InternalLink>
         </li>
       );
   }

docs/src/ReactPlayground.js

@@ -1,5 +1,5 @@
 var React = require('react');
-var classSet = require('react/lib/cx');
+var classSet = require('classnames');
 var CodeMirror = global.CodeMirror;
 var JSXTransformer = global.JSXTransformer;
 var Accordion = require('../../lib/Accordion');

docs/src/Root.js

@@ -1,30 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
-
-var HomePage = React.createFactory(require('./HomePage'));
-var GettingStartedPage = React.createFactory(require('./GettingStartedPage'));
-var ComponentsPage = React.createFactory(require('./ComponentsPage'));
-var NotFoundPage = React.createFactory(require('./NotFoundPage'));
-
-var Locations = Router.Locations;
-var Location = Router.Location;
-var NotFound = Router.NotFound;
-
-var PagesHolder = React.createClass({
-  render: function () {
-    return (
-        <Locations contextual>
-          <Location path="/" handler={HomePage} />
-          <Location path="/index.html" handler={HomePage} />
-          <Location path="/getting-started.html" handler={GettingStartedPage} />
-          <Location path="/components.html" handler={ComponentsPage} />
-          <NotFound handler={NotFoundPage} />
-        </Locations>
-      );
-  }
-});
+var Router = require('react-router');
 
 var Root = React.createClass({
   statics: {
@@ -110,9 +87,7 @@ var Root = React.createClass({
           <head dangerouslySetInnerHTML={head} />
 
           <body>
-            <Locations path={Root.getBaseUrl() + this.props.initialPath}>
-              <Location path={Root.getBaseUrl() + '*'} handler={React.createFactory(PagesHolder)} />
-            </Locations>
+            <Router.RouteHandler />
 
             <script dangerouslySetInnerHTML={browserInitScriptObj} />
             <script src="vendor/codemirror/codemirror.js" />
@@ -125,4 +100,5 @@ var Root = React.createClass({
   }
 });
 
+
 module.exports = Root;

docs/src/Routes.js

@@ -0,0 +1,21 @@
+var React = require('react');
+
+var Root = require('./Root');
+var HomePage = require('./HomePage');
+var GettingStartedPage = require('./GettingStartedPage');
+var ComponentsPage = require('./ComponentsPage');
+var NotFoundPage = require('./NotFoundPage');
+
+var Router = require('react-router');
+
+
+module.exports = (
+  <Router.Route name="app" path="/" handler={Root}>
+    <Router.DefaultRoute handler={HomePage}/>
+    <Router.NotFoundRoute handler={NotFoundPage} />
+
+    <Router.Route name='home' path="index.html" handler={HomePage} />
+    <Router.Route name='getting-started' path="getting-started.html" handler={GettingStartedPage} />
+    <Router.Route name='components' path="components.html" handler={ComponentsPage} />  
+  </Router.Route>
+)

ie8/index.html

@@ -7,7 +7,7 @@
     <title>React Bootstrap IE8 test page</title>
 
     <!-- Bootstrap -->
-    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
     <style>
       body {
         padding: 50px 100px;

ie8/package.json

@@ -3,12 +3,12 @@
     "browserify": "^4.1.11",
     "reactify": "^0.13.1",
     "envify": "^1.2.1",
-    "react": "^0.10.0",
+    "react": "^0.13.0",
     "http-server": "^0.6.1"
   },
   "scripts": {
     "postinstall": "npm run build",
     "start": "http-server -c-1",
-    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js"
+    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js --harmony"
   }
 }