21 |
23 | );
24 | },
25 | });
26 |
27 | module.exports = AboutPage;
28 |
--------------------------------------------------------------------------------
/src/components/CurrentVisitorsCount.jsx:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 | var React = R.React;
3 |
4 | var CurrentVisitorsCount = React.createClass({
5 | mixins: [R.Component.Mixin],
6 |
7 | statics: {
8 | getStylesheetRules() {
9 | return {
10 | 'components': {
11 | '.CurrentVisitorsCount': {
12 | },
13 | },
14 | };
15 | },
16 | },
17 |
18 | getFluxStoreSubscriptions(props) {
19 | return {
20 | 'uplink://counters': 'counters',
21 | };
22 | },
23 |
24 | render() {
25 | return (
26 | About page
22 |
27 | CurrentVisitorsCount: {this.state.counters ? this.state.counters.current : null}
28 |
29 | );
30 | },
31 | });
32 |
33 | module.exports = CurrentVisitorsCount;
34 |
--------------------------------------------------------------------------------
/src/components/HistoryLink.jsx:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 |
3 | var HistoryLink = R.History.createLinkClass({
4 | dispatcherName: 'memory',
5 | });
6 |
7 | module.exports = HistoryLink;
8 |
--------------------------------------------------------------------------------
/src/components/HomePage.jsx:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 | var React = R.React;
3 |
4 | var HomePage = React.createClass({
5 | mixins: [R.Component.Mixin],
6 |
7 | render() {
8 | return (
9 |
10 |
25 | );
26 | },
27 | });
28 |
29 | module.exports = HomePage;
30 |
--------------------------------------------------------------------------------
/src/components/NotFoundPage.jsx:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 | var React = R.React;
3 |
4 | var NotFoundPage = React.createClass({
5 | mixins: [R.Component.Mixin],
6 |
7 | propTypes: {
8 | splat: React.PropTypes.string.isRequired,
9 | },
10 |
11 | render() {
12 | return (
13 | Home page
11 | More information in the github repos: 12 |-
13 |
- 14 | 15 | github.com/elierotenberg/react-rails 16 | 17 | 18 |
- 19 | 20 | github.com/elierotenberg/react-rails-starterkit 21 | 22 | 23 |
14 |
17 | );
18 | },
19 | });
20 |
21 | module.exports = NotFoundPage;
22 |
--------------------------------------------------------------------------------
/src/components/Pages.jsx:
--------------------------------------------------------------------------------
1 | var AboutPage = require('./AboutPage');
2 | var CurrentVisitorsCount = require('./CurrentVisitorsCount');
3 | var HistoryLink = require('./HistoryLink');
4 | var HomePage = require('./HomePage');
5 | var NavigationRouter = require('../routers/NavigationRouter');
6 | var NotFoundPage = require('./NotFoundPage');
7 | var R = require('react-rails');
8 | var React = R.React;
9 | var TotalVisitorsCount = require('./TotalVisitorsCount');
10 |
11 | var styles = require('../styles');
12 |
13 | var navigationRouter = new NavigationRouter();
14 |
15 | var Pages = React.createClass({
16 | mixins: [R.Component.Mixin],
17 |
18 | statics: {
19 | getStylesheetRules() {
20 | return {
21 | 'components': {
22 | '.Pages': {
23 | width: '100%',
24 | },
25 | '.Pages-header': {
26 | backgroundColor: styles.swatch.TextGrey,
27 | height: 300,
28 | textAlign: 'center',
29 | },
30 | '.Pages-header h1': {
31 | color: styles.swatch.ReactBlue,
32 | fontFamily: styles.fonts.Helvetica,
33 | fontSize: 64,
34 | fontWeight: 400,
35 | margin: '0 auto',
36 | paddingTop: 60,
37 | width: styles.pageWidth,
38 | },
39 | '.Pages-header h2': {
40 | color: styles.swatch.TitleGrey,
41 | fontSize: 24,
42 | lineHeight: '33px',
43 | margin: '0 auto',
44 | textTransform: 'uppercase',
45 | width: styles.pageWidth,
46 | },
47 | '.Pages-ReactLogo': {
48 | display: 'inline-block',
49 | height: 25,
50 | marginBottom: -4,
51 | width: 25,
52 | },
53 | '.Pages-main': {
54 | margin: '20px auto',
55 | width: styles.pageWidth,
56 | },
57 | '.Pages-footer': {
58 | margin: '0 auto',
59 | width: styles.pageWidth,
60 | },
61 | '.Pages-links': {
62 | display: 'table',
63 | listStyleType: 'none',
64 | margin: 0,
65 | padding: 0,
66 | textAlign: 'center',
67 | width: '100%',
68 | },
69 | '.Pages-links > li': {
70 | display: 'table-cell',
71 | width: 100 / 3 + '%',
72 | },
73 | '.Pages-counters': {
74 | bottom: 0,
75 | padding: 20,
76 | position: 'fixed',
77 | right: 0,
78 | },
79 | },
80 | };
81 | },
82 | },
83 | getFluxStoreSubscriptions(props) {
84 | return {
85 | 'memory://History/pathname': 'pathname',
86 | };
87 | },
88 |
89 | fluxStoreDidUpdate() {
90 | var route = navigationRouter.match(this.state.pathname);
91 | document.querySelector('title').innerHTML = route.title;
92 | document.querySelector('meta[name=\'description\']')
93 | .setAttribute('description', route.description);
94 | },
95 |
96 | getCurrentPage() {
97 | var matchedRoute = navigationRouter.match(this.state.pathname);
98 | switch (matchedRoute.name) {
99 | case 'home': return Not found page
15 |Requested splat: {this.props.splat}
16 |
108 |
109 | A
111 |
112 |
113 | {this.getCurrentPage()}
114 |
115 |
122 |
126 |
127 | );
128 | },
129 | });
130 |
131 | module.exports = Pages;
132 |
--------------------------------------------------------------------------------
/src/components/Root.jsx:
--------------------------------------------------------------------------------
1 | var Pages = require('./Pages');
2 | var R = require('react-rails');
3 | var React = R.React;
4 |
5 | var styles = require('../styles');
6 |
7 | var Root = React.createClass({
8 | mixins: [R.Root.Mixin],
9 |
10 | statics: {
11 | getStylesheetRules() {
12 | return {
13 | 'components': {
14 | '.Root': {
15 | width: '100%',
16 | },
17 | 'html, body': {
18 | color: styles.swatch.TextGrey,
19 | fontFamily: styles.fonts.Helvetica,
20 | },
21 | 'a, a:hover, a:visited, a:active': {
22 | textDecoration: 'none',
23 | },
24 | 'a': {
25 | color: styles.swatch.LinkGrey,
26 | },
27 | 'a:hover': {
28 | color: styles.swatch.LinkHoverGrey,
29 | },
30 | 'a:active': {
31 | color: '#fff',
32 | },
33 | },
34 | };
35 | },
36 | },
37 |
38 | render() {
39 | return (
40 | React on Rails
110 |A 
React Framework for building Real-World WebApps
111 |
41 | {this.props.children ? this.props.children :
43 | );
44 | },
45 | });
46 |
47 | module.exports = Root;
48 |
--------------------------------------------------------------------------------
/src/components/TotalVisitorsCount.jsx:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 | var React = R.React;
3 |
4 | var TotalVisitorsCount = React.createClass({
5 | mixins: [R.Component.Mixin],
6 |
7 | getFluxStoreSubscriptions(props) {
8 | return {
9 | 'uplink://counters': 'counters',
10 | };
11 | },
12 |
13 | render() {
14 | return (
15 |
16 | TotalVisitorsCount: {this.state.counters ? this.state.counters.total : null}
17 |
18 | );
19 | },
20 | });
21 |
22 | module.exports = TotalVisitorsCount;
23 |
--------------------------------------------------------------------------------
/src/dispatchers/MemoryDispatcher.js:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 |
3 | function MemoryDispatcher(flux) {
4 | return new (R.Dispatcher.createDispatcher({
5 | displayName: 'MemoryDispatcher',
6 | actions: {
7 | //
19 | <%= vars.rootHtml %>
20 |
21 |
27 | <% if(vars.scripts) { %>
28 | <% _.each(vars.scripts, function(script) { %>
29 |
30 | <% }); %>
31 | <% } %>
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/render-server.js:
--------------------------------------------------------------------------------
1 | var App = require('./App');
2 | var R = require('react-rails');
3 |
4 | var config = require('../config');
5 | var cors = require('cors');
6 | var express = require('express');
7 |
8 | express()
9 | .use(cors())
10 | .use(express.static(__dirname + '/../static'))
11 | .use(new R.RenderServer(App).middleware)
12 | .listen(config.renderServer.port);
13 |
14 | var path = 'http://' + config.renderServer.hostname + ':' + config.renderServer.port;
15 | console.warn('Render Server listening on', path);
16 |
--------------------------------------------------------------------------------
/src/routers/NavigationRouter.js:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 | var _ = require('lodash-next');
3 |
4 | class NavigationRouter extends R.Router {
5 | constructor() {
6 | super();
7 |
8 | _.each({
9 | '/': {
10 | title: 'Home',
11 | description: 'Home page',
12 | name: 'home',
13 | },
14 | '/home': {
15 | title: 'Home',
16 | description: 'Home page',
17 | name: 'home',
18 | },
19 | '/about': {
20 | title: 'About',
21 | description: 'About page',
22 | name: 'about',
23 | },
24 | }, (val, route) => {
25 | this.route(route, () => _.extend(val, { props: {} }));
26 | });
27 |
28 | this.route('/*splat', (splat) => ({
29 | title: 'Not found',
30 | description: 'Not found',
31 | name: 'notfound',
32 | props: {
33 | splat: splat,
34 | },
35 | }));
36 |
37 | this.def(() => ({
38 | title: 'Not found',
39 | description: 'Not found',
40 | name: 'notfound',
41 | }));
42 | }
43 | }
44 |
45 | module.exports = NavigationRouter;
46 |
--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
1 | var _ = require('lodash-next');
2 | var spawn = require('child_process').spawn;
3 | var watch = require('node-watch');
4 |
5 | var childs = [];
6 |
7 | ['render-server', 'uplink-server'].forEach((name) => {
8 | function spawnWorker() {
9 | var child = spawn('node', [__dirname + '/' + name + '.js']);
10 |
11 | child.stdout.setEncoding('utf-8');
12 | child.stdout.on('data', (data) => {
13 | console.log(name, ':', data.slice(0, -1));
14 | });
15 |
16 | child.stderr.setEncoding('utf-8');
17 | child.stderr.on('data', (data) => {
18 | console.warn(name, ':', data.slice(0, -1));
19 | });
20 |
21 | child.on('close', (code) => {
22 | console.error(name, ':', 'exited with code', code);
23 | _.defer(spawnWorker);
24 | });
25 |
26 | childs.push(child);
27 | }
28 |
29 | spawnWorker();
30 | });
31 |
32 | watch(__dirname, _.debounce(function restart() {
33 | console.warn('Restarting children processes.');
34 | childs.forEach((child) => child.kill());
35 | }, 1000));
36 |
--------------------------------------------------------------------------------
/src/stores/MemoryStore.js:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 |
3 | var MemoryStore = R.Store.createMemoryStore();
4 |
5 | module.exports = MemoryStore;
6 |
--------------------------------------------------------------------------------
/src/stores/UplinkStore.js:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 |
3 | var UplinkStore = R.Store.createUplinkStore();
4 |
5 | module.exports = UplinkStore;
6 |
--------------------------------------------------------------------------------
/src/styles.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | swatch: {
3 | ReactBlue: '#61dafb',
4 | LinkGrey: '#aaa',
5 | LinkHoverGrey: '#fafafa',
6 | TextGrey: '#484848',
7 | TitleGrey: '#e9e9e9',
8 | },
9 | fonts: {
10 | Helvetica: '"Open Sans Condensed"', // Pretend this is actually Helvetica
11 | Roboto: '"Roboto"',
12 | },
13 | pageWidth: 980,
14 | };
15 |
--------------------------------------------------------------------------------
/src/uplink-server.js:
--------------------------------------------------------------------------------
1 | var UplinkServer = require('./UplinkServer');
2 |
3 | var co = require('co');
4 | var config = require('../config');
5 | var cors = require('cors');
6 | var express = require('express');
7 |
8 | co(function*() {
9 | return yield new UplinkServer().installHandlers(
10 | express()
11 | .use(cors()),
12 | config.uplinkServer.prefix
13 | );
14 | }).call(null, function(err, server) {
15 | if (err) {
16 | throw err;
17 | }
18 | server.listen(config.uplinkServer.port);
19 | var path = 'http://' + config.uplinkServer.hostname + ':' + config.uplinkServer.port;
20 | console.log('Uplink Server listening on', path);
21 | });
22 |
--------------------------------------------------------------------------------
/static/ReactLogo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tasks/createComponent.js:
--------------------------------------------------------------------------------
1 | var assert = require('assert');
2 | var fs = require('fs');
3 | var _ = require('lodash-next');
4 |
5 | module.exports = function createComponent(displayName, tagName) {
6 | tagName = tagName || 'div';
7 | assert(displayName && _.isString(displayName), 'displayName should be a String.');
8 | assert(/^[A-Z][a-zA-Z0-9]*$/.exec(displayName) !== null, 'displayName should match /^[A-Z][a-zA-Z0-9]*$/.');
9 | var tpl = _.template(fs.readFileSync(__dirname + '/createComponent.tpl'));
10 | fs.writeFileSync(__dirname + '/../src/components/' + displayName + '.jsx', tpl({ displayName: displayName, tagName: tagName }));
11 | };
12 |
--------------------------------------------------------------------------------
/tasks/createComponent.tpl:
--------------------------------------------------------------------------------
1 | var R = require('react-rails');
2 | var React = R.React;
3 | var _ = require('lodash');
4 | var co = require('co');
5 | var styles = require('../styles');
6 |
7 | var <%= displayName %> = React.createClass(/** @lends <%= displayName %>.prototype */{
8 | mixins: [R.Component.Mixin],
9 |
10 | propTypes: {
11 | },
12 |
13 | statics: {
14 | getStylesheetRules() {
15 | return {
16 | 'components': {
17 | '.<%= displayName %>': {
18 | },
19 | },
20 | };
21 | },
22 | },
23 |
24 | getFluxStoreSubscriptions(props) {
25 | return {
26 | };
27 | },
28 |
29 | render() {
30 | return (<<%= tagName %> className='<%= displayName %>'>
31 | >);
32 | },
33 | });
34 |
35 | module.exports = <%= displayName %>;
36 |
--------------------------------------------------------------------------------