The basic structure of a React+Flux application (see other examples)
- /src/actions/AppActions.js - Action creators (Flux)
- /src/components/Application.js - The top-level React component
- /src/constants/ActionTypes.js - Action types (Flux)
- /src/core/Dispatcher.js - Dispatcher (Flux)
- /src/stores/AppStore.js - The primary store (Flux)
- /src/stores/Store.js - Base class for stores (Flux)
- /src/app.js - Client-side startup script
- /src/server.js - Server-side startup script
// src/components/Application.js
var React = require('react');
var Application = React.createClass({
propTypes: {
path: React.PropTypes.string.isRequired,
onSetTitle: React.PropTypes.func.isRequired
},
render() {
var page = AppStore.getPage(this.props.path);
this.props.onSetTitle(page.title);
return (
<div className="container">
<h1>{page.title}</h1>
<div>{page.content}</div>
</div>
);
}
});
module.exports = Application;// src/app.js
var React = require('react');
var Application = React.createFactory(require('./components/Application));
Dispatcher.register((payload) => {
var action = payload.action;
if (action.actionType === ActionTypes.CHANGE_LOCATION) {
window.history.pushState({}, document.title, action.path);
application.setProps({path: action.path});
}
});
var path = window.location.pathname + window.location.search + window.location.hash;
var application = React.createElement(require('./components/Application'), {
path: path,
onSetTitle: (title) => document.title = title
}));
application = React.render(application, document.body);