Switched code to use the new external bootstrapper file (reactrunner.…

…jsx)

.gitignore

@@ -1,3 +1,4 @@
 Orc.ReactExample/App_Data/
 Orc.ReactExample/node_modules/
 packages/
+Orc.ReactExample/webpackcompile.txt

Orc.ReactExample/assets/JS/app.jsx

@@ -1,10 +1,16 @@
 // App entry point, from these references everything else should get pulled in by webpack if its needed
+
+// Stash the two biggies we use (React and ReactRouter) in global space
 global.React = require("react/addons");
 Router = require("react-router");
 global.Router = Router; 
 
 // Put our stores into global scope so everything has them
 global.ArticleStore = require("./stores/ArticleStore");
 
+var ReactRunner = require("./reactrunner.jsx");
+
+// Load our routes and stash them in SuperChargedReacts namespaced global object
 var Routes = require('./routes.jsx');
 
+

Orc.ReactExample/assets/JS/reactrunner.jsx

@@ -0,0 +1,89 @@
+/* 
+
+You MUST include this file in your bundle.
+
+This is the entry point to rendering your root React application/component.
+
+We recommend webpack for combining these file, we also recommend including React and React-Router in your bundle
+
+*/
+React = require("react/addons");
+Router = require("react-router");
+
+// Our global SuperChargedReact settings object
+global.SuperChargedReact = global.SuperChargedReact || {
+	// Setup defaults
+	routes: null,	// Your routes, you can set this later in your bundle via global.SuperChargedReact.routes = your_routes_here
+	routerOutput: null,
+	bootstrapper: function() {
+		// Default failsafe
+		console.error("No bootstrapper method defined!");
+	}
+};
+
+/*
+
+settings = An object built up in .net containing some of the data you might need to get React to play nice. At a minimum it will have the following
+
+settings = {
+	// Name of the component to render if not using ReactRouter
+	componentName: "string",	
+	
+	// The name of the HTML element to inject your components output into, only used client-side
+	containerId: "string"		
+	
+	// Any props object passed in, this will be the Model you passed in when calling Html.Render in your template
+	props : {},					
+	
+	// ## React Router goodies only
+
+	// Needed by ReactRouter to know which route to render
+	requestdUrl : "string",		
+}
+
+*/
+
+// One render function to rule them all...
+global.SuperChargedReact.bootstrapper = function( settings ) {   
+	if ( settings == null ) {
+		// console.log( "Settings", settings ); // Handy for debugging
+		console.error("Settings object is missing/empty for SuperChargedReact Render function");
+	}
+
+	// You can edit this to your hearts desire if you like or just leave it as it is and it will work out the box for ReactRouter and React components
+	if ( typeof window == "undefined" ) {
+
+		// #### Server-side rendering ####
+		if ( global.SuperChargedReact.routes != null  ) {
+			// If we have a routes object then we assume its a ReactRouter request, modify this if you are using a different Router you crazy cat
+			Router.run( global.SuperChargedReact.routes, settings.requestedUrl, function( Handler ) { 
+				// In this call back we render the right component for the given url to a string 
+				// and store it in our global variable so the host can pick it up and render it
+				global.SuperChargedReact.routerOutput = React.renderToString( React.createElement( Handler, settings.props ));
+			});
+		} else {
+			// Plane old React component request
+			// Render your requested component to a string and store it in our global variable so the host can pick it up and render it
+			global.SuperChargedReact.routerOutput = React.renderToString( React.createElement( settings.componentNameToRender, settings.props ));
+		}
+	} else {
+
+		// #### Client-side rendering ####
+		if ( global.SuperChargedReact.routes != null ) {
+			// If we have a routes object then we assume its a ReactRouter request, modify this if you are using a different Router you crazy cat
+			Router.run( global.SuperChargedReact.routes, Router.HistoryLocation, function( Handler ) { 
+				React.render(
+					React.createElement( Handler, settings.props ), 
+					document.getElementById( settings.containerId )
+				);
+			});
+		} else {
+			// Plane old React component request
+			// Render your requested component to a string and store it in our global variable so the host can pick it up and render it
+			React.render( 
+				React.createElement( settings.componentNameToRender, settings.props ), 
+				document.getElementById( settings.containerId )
+			);
+		}
+	}        
+} 

Orc.ReactExample/assets/JS/routes.jsx

@@ -8,9 +8,6 @@ var Link = Router.Link;
 var RouteHandler = Router.RouteHandler;
 
 var ArticleServerActions = require("./actions/ArticleServerActionCreators");
-
-var Constants = require("./Constants" );
-//var DOMHelpers = require("./utils/domHelpers");
 var ArticleFolderApp = require("./components/ArticleFolder.jsx").ArticleFolderApp;
 var ArticleApp = require("./components/Article.jsx").ArticleApp;
 
@@ -24,28 +21,12 @@ var App = React.createClass({
 		var handlerName = routes.reverse()[0].name;
 		var parentHandlerName = routes.reverse()[1].name;
 
-
-		// When we first load we need to "seed" the Flux store with our initial data that we send down in page from the server
-		if ( typeof window !== "undefined" ) { 
-		// in our browser
-
-			switch( handlerName ) {
-				case "articlesRoot":
-					ArticleServerActions.gotArticles( global._ReactNET_InitialData_JSON.model.articles );
-					case "article":
-					ArticleServerActions.GotFullDetails( global._ReactNET_InitialData_JSON.model );
-				break;
-			}
-		}
-		else
-		{
-			switch( handlerName ) {
-				case "articlesRoot":
-					ArticleServerActions.gotArticles(this.props.model.articles );
+  		switch( handlerName ) {
+			case "articlesRoot":
+				ArticleServerActions.gotArticles( this.props.model.articles );
 				case "article":
-					ArticleServerActions.GotFullDetails(this.props.model );
-				break;
-			}
+				ArticleServerActions.GotFullDetails( this.props.model );
+			break;
 		}
 	},
 
@@ -77,13 +58,11 @@ var PageNotFound = React.createClass({
 			<div>
 				<p>Page not found!</p>
 			</div>
-		);
+		); 
 	}
 });
 
-/* GLOBAL ROUTES OBJECT - The server side rendering will read this in hence it being global...I think */ 
-//removed this route as i don't think we need it
-//<Route name="confirmation" path="/confirmation" handler={NotBuiltYet} />
+/* GLOBAL ROUTES OBJECT - The server side rendering will read this in hence it being global */ 
 var reactRoutesConfig = (
 	<Route name="app" handler={App}>
 		<Route name="articlesRoot" path="/articles" handler={ArticleFolderApp} />
@@ -93,5 +72,5 @@ var reactRoutesConfig = (
 	</Route>
 );
 
-/* Belt and braces */
-global.reactRoutesConfig = reactRoutesConfig;
+/* Store our routes globally so our server-side stuff can get to it easily */
+global.SuperChargedReact.routes = reactRoutesConfig;