Permalink
Browse files

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.
  • Loading branch information...
nambrot committed Mar 22, 2015
1 parent 2277952 commit c8052433cb8350a916bbe8fbc4decb81de0c0d03
@@ -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

@@ -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"))
@@ -0,0 +1,10 @@
React = require('react')

Index = React.createClass
displayName: "PostsIndex"
render: ->
<div>
<h3>Posts Index</h3>
</div>

module.exports = Index
@@ -0,0 +1,10 @@
React = require('react')

Show = React.createClass
displayName: "PostShow"
render: ->
<div>
<h3>Posts Show</h3>
</div>

module.exports = Show
@@ -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
@@ -16,6 +16,7 @@
"json-loader": "*"
},
"dependencies": {

"react": "*",
"react-router": "*"
}
}
@@ -52,7 +52,7 @@ article {
}
}

#content {
#content, #reactContent {
margin: 12px auto;
max-width: 600px;

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

</div>

</div>

0 comments on commit c805243

Please sign in to comment.