Add React and ReactRouter

Basic Setup of the routing and the Index/Show Components. Basically,
for now we are trying to render the exact same thing but on the client
side. The next step will require the loading of the data.

Author: nambrot

README.md

@@ -15,8 +15,9 @@ I'll try to keep this as concise as possible in a step-by-step guide of how I ap
 
 Love the asset pipeline to death, but the lack of true models definitely gets noticable with larger amounts of client side code. We will be using Webpack to allow us to write modular code as well as use the great diversity of the NPM ecosystem.
 
+### 2. Setup basic React and Flux
 
-
+We are going to set the barebones of the Flux architecture without thinking too much about the server part, for now, we will just fetch everything on demand.
 
 ### Not Adressing
 

app/assets/javascripts/client_application.cjsx

@@ -1 +1,6 @@
-alert "I get loaded"
+React = require('react')
+Router = require('react-router')
+routes = require('routes')
+
+Router.run routes, Router.HistoryLocation, (Handler, state) ->
+  React.render(<Handler />, document.getElementById("reactContent"))

app/assets/javascripts/components/posts/index.cjsx

@@ -0,0 +1,10 @@
+React = require('react')
+
+Index = React.createClass
+  displayName: "PostsIndex"
+  render: ->
+    <div>
+      <h3>Posts Index</h3>
+    </div>
+
+module.exports = Index

app/assets/javascripts/components/posts/show.cjsx

@@ -0,0 +1,10 @@
+React = require('react')
+
+Show = React.createClass
+  displayName: "PostShow"
+  render: ->
+    <div>
+      <h3>Posts Show</h3>
+    </div>
+
+module.exports = Show

app/assets/javascripts/routes.cjsx

@@ -0,0 +1,22 @@
+React = require('react')
+Router = require('react-router')
+
+DefaultRoute = Router.DefaultRoute
+Route = Router.Route
+
+PostsIndex = require "components/posts/index"
+PostShow = require "components/posts/show"
+
+routes = (
+  <Route name="app" path="/">
+    <Route name="posts">
+      <Route name="post" path=":postId">
+        <DefaultRoute handler={PostShow} />
+      </Route>
+      <DefaultRoute handler={PostsIndex} />
+    </Route>
+    <DefaultRoute handler={PostsIndex} />
+  </Route>
+)
+
+module.exports = routes

app/assets/package.json

@@ -16,6 +16,7 @@
     "json-loader": "*"
   },
   "dependencies": {
-
+    "react": "*",
+    "react-router": "*"
   }
 }

app/assets/stylesheets/application.css.scss

@@ -52,7 +52,7 @@ article {
  }
 }
 
-#content {
+#content, #reactContent {
   margin: 12px auto;
   max-width: 600px;
 

app/views/layouts/application.html.erb

@@ -21,6 +21,9 @@
       <div id="content">
         <%= yield %>
       </div>
+      <div id="reactContent">
+
+      </div>
 
     </div>