Update ReactGrid sample to use newer server-side rendering APIs

samples/react/ReactGrid/ReactApp/boot-client.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import createBrowserHistory from 'history/lib/createBrowserHistory';
-import ReactApp from './components/ReactApp.jsx';
+import { browserHistory } from 'react-router';
+import { ReactApp } from './components/ReactApp.jsx';
 import 'bootstrap/dist/css/bootstrap.css';
 
 // In the browser, we render into a DOM node and hook up to the browser's history APIs
-var history = createBrowserHistory();
-ReactDOM.render(<ReactApp history={ history } />, document.getElementById('react-app'));
+ReactDOM.render(<ReactApp history={ browserHistory } />, document.getElementById('react-app'));

samples/react/ReactGrid/ReactApp/boot-server.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { match, RouterContext } from 'react-router';
+import createMemoryHistory from 'history/lib/createMemoryHistory';
+import { routes } from './components/ReactApp';
+React;
+
+export default function renderApp (params) {
+    return new Promise((resolve, reject) => {
+        // Match the incoming request against the list of client-side routes
+        match({ routes, location: params.location }, (error, redirectLocation, renderProps) => {
+            if (error) {
+                throw error;
+            }
+
+            // Build an instance of the application
+            const history = createMemoryHistory(params.url);
+            const app = <RouterContext {...renderProps} />;
+
+            // Render it as an HTML string which can be injected into the response
+            const html = renderToString(app); 
+            resolve({ html });
+        });
+    });
+}

samples/react/ReactGrid/ReactApp/components/ReactApp.jsx

@@ -3,14 +3,16 @@ import { Router, Route } from 'react-router';
 import { PeopleGrid } from './PeopleGrid.jsx';
 import { PersonEditor } from './PersonEditor.jsx';
 
-export default class ReactApp extends React.Component {
+export const routes = <Route>
+    <Route path="/" component={ PeopleGrid } />
+    <Route path="/:pageIndex" component={ PeopleGrid } />
+    <Route path="/edit/:personId" component={ PersonEditor } />    
+</Route>;
+
+export class ReactApp extends React.Component {
     render() {
         return (
-            <Router history={this.props.history}>
-                <Route path="/" component={PeopleGrid} />
-                <Route path="/:pageIndex" component={PeopleGrid} />
-                <Route path="/edit/:personId" component={PersonEditor} />
-            </Router>
+            <Router history={this.props.history} children={ routes } />
         );
     }
 }