ReactJS Flux

App.js

'use strict';
var React              = require('react/addons');
var RouteHandler       = require('react-router').RouteHandler;
var DocumentTitle      = require('react-document-title');
var projectActions     = require('./actions/projectActions');
var ProjectStore       = require('./stores/projectStore');
var Header             = require('./components/header');
var Footer             = require('./components/footer');
var Bootstrap          = require('./libraries/bootstrap/');
var BootstrapTheme     = require('./libraries/bootstrap_theme.min/');


module.exports =  = React.createClass({

  render: function() {
    return (
      <span>
        <Header />      
        <div id="wrap">          
          <div id="main" className="container clear-top">
              <div className="row">
                <RouteHandler params={this.props.params}
                              query={this.props.query}
                />                
              </div>    
          </div>          
        </div>
        <Footer />
      </span>
    );
  }

});

Homepage.js

'use strict';
var React         = require('react/addons');
var Link          = require('react-router').Link;
var DocumentTitle = require('react-document-title');
var Projects      = require('../components/projectList');

module.exports = React.createClass({

  render: function() {
    return (
      <DocumentTitle title="Home">
        <section className="home-page">

          <div>
            <h1>Home</h1>
            <Projects />
          </div>

          <div>
           
          </div>

        </section>
      </DocumentTitle>
    );
  }

});

index.js

'use strict';

var React  	= require('react/addons');
var Router 	= require('react-router');
var Parse 	= require('parse').Parse;


Parse.initialize("APP_ID", "JAVASCRIPT_KEY");

var routes = require('./routes');

if ( process.env.NODE_ENV !== 'production' ) {
  // Enable React devtools
  window.React = React;
}

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
  React.render(<Handler params={state.params} query={state.query} />, document.getElementById('app'));
});

projectdetails.js

'use strict';

var React         						= require('react/addons');
var DocumentTitle 						= require('react-document-title');


module.exports  = React.createClass({

  render: function() {
  	console.log("project", this.props.params); //this prints {objectId:1234}
  	return (
  		<DocumentTitle title=""> 
	  		<div className="page-header">
				  <h1>Example page header <small></small></h1>
				</div>
			</DocumentTitle>
  	);
  }
});

projectList.js

'use strict';

var React         	= require('react/addons');
var Link          	= require('react-router').Link;
var Parse 					= require('parse').Parse;
var ParseReact 			= require('parse-react');


module.exports = React.createClass({
	mixins: [ParseReact.Mixin],

	observe: function(props, state) {
    return {
      projects: new Parse.Query('Project').ascending('createdAt')
    };
  },
  render: function() {
  	
  	var projects = this.data.projects.map(project => (
  		    
        	<tr key={project.objectId}>
        		<td><Link to='ProjectDetails' params={{projectId:project.objectId}}> {project.name}</Link></td>
        	</tr>
  	));

  	return (
      <div className={this.pendingQueries().length ? 'container project-list loading' : 'container project-list'}>
      	<table className="table table-striped">
      		<thead>
      		<tr>
      			<th>Project Name</th>
      		</tr>
      		</thead>
      		<tbody>
      			{projects}
      		</tbody>
        </table>
      </div>
    );
  }

});

routes.js

'use strict';

var React         	= require('react/addons');
var Router        	= require('react-router');
var Route         	= Router.Route;
var NotFoundRoute 	= Router.NotFoundRoute;
var DefaultRoute  	= Router.DefaultRoute;
var App           	= require('./app');
var HomePage      	= require('./pages/homepage');
var AddProjects 		= require('./pages/addprojects');
var ProjectDetails 	= require('./pages/projectdetails');
var Login    				= require('./pages/login');
// var NotFoundPage  = require('./pages/NotFoundPage');

module.exports = (
  <Route handler={App} path='/'>
    <Route name='Home' path='/' handler={HomePage} />
    <Route name='AddProject' path='/project/new' handler={AddProjects} />
    <Route name='ProjectDetails' path="/project/:projectId" handler={ProjectDetails} />
    <Route name='Login' path='/login' handler={Login} />
		<DefaultRoute handler={HomePage} />
  </Route>
);