├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── Layout.html.jsx ├── Page.html.jsx ├── README.md └── routes.jsx /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | -------------------------------------------------------------------------------- /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | 1epba6161sp541hskm8y 8 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-platform 8 | mystor:routecore 9 | timbrandin:jsx-templating 10 | reactive-var 11 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.1.0.2 2 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | accounts-base@1.2.0 2 | autoupdate@1.2.1 3 | babel-compiler@5.4.7 4 | babel-runtime@0.1.0 5 | base64@1.0.3 6 | binary-heap@1.0.3 7 | blaze@2.1.2 8 | blaze-tools@1.0.3 9 | boilerplate-generator@1.0.3 10 | callback-hook@1.0.3 11 | check@1.0.5 12 | ddp@1.1.0 13 | deps@1.0.7 14 | ejson@1.0.6 15 | fastclick@1.0.3 16 | geojson-utils@1.0.3 17 | html-tools@1.0.4 18 | htmljs@1.0.4 19 | http@1.1.0 20 | id-map@1.0.3 21 | iron:core@0.3.4 22 | iron:dynamic-template@0.4.1 23 | jquery@1.11.3_2 24 | json@1.0.3 25 | jsx@0.1.0 26 | launch-screen@1.0.2 27 | livedata@1.0.13 28 | localstorage@1.0.3 29 | logging@1.0.7 30 | meteor@1.1.6 31 | meteor-platform@1.2.2 32 | meteorhacks:fast-render@1.0.1 33 | minifiers@1.1.5 34 | minimongo@1.0.8 35 | mobile-status-bar@1.0.3 36 | mongo@1.1.0 37 | mongo-livedata@1.0.8 38 | mystor:routecore@0.2.0 39 | observe-sequence@1.0.6 40 | ordered-dict@1.0.3 41 | random@1.0.3 42 | react-meteor-data@0.1.0 43 | reactive-dict@1.1.0 44 | reactive-var@1.0.5 45 | reload@1.1.3 46 | retry@1.0.3 47 | routepolicy@1.0.5 48 | service-configuration@1.0.4 49 | session@1.1.0 50 | spacebars@1.0.6 51 | spacebars-compiler@1.0.6 52 | templating@1.1.1 53 | timbrandin:jsx-templating@0.1.0 54 | tmeasday:page-js-ie-support@1.3.5 55 | tracker@1.0.7 56 | ui@1.0.6 57 | underscore@1.0.3 58 | url@1.0.4 59 | webapp@1.2.0 60 | webapp-hashing@1.0.3 61 | -------------------------------------------------------------------------------- /Layout.html.jsx: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /Page.html.jsx: -------------------------------------------------------------------------------- 1 | 7 | 8 | Template.Page.onCreated(function() { 9 | let component = this; 10 | component.username = new ReactiveVar('stubailo'); 11 | component.message = new ReactiveVar('Hey! Check these React packages!'); 12 | component.componentDidMount = function() { 13 | setTimeout(function() { 14 | component.username.set('timbrandin'); 15 | component.message.set('Wow! Can we get an SSR example?!'); 16 | }, 2000); 17 | 18 | setTimeout(function() { 19 | component.username.set('engelgabriel'); 20 | component.message.set(':+1:'); 21 | }, 4000); 22 | 23 | setTimeout(function() { 24 | component.username.set('AdamBrodzinski'); 25 | component.message.set(':+1:'); 26 | }, 6000); 27 | 28 | setTimeout(function() { 29 | component.username.set('stubailo'); 30 | component.message.set('Wait, what? Is this Blaze?'); 31 | }, 8000); 32 | 33 | setTimeout(function() { 34 | component.username.set('timbrandin'); 35 | component.message.set('No! It\'s actually React!'); 36 | }, 10000); 37 | 38 | setTimeout(function() { 39 | component.username.set('engelgabriel'); 40 | component.message.set(':+1:'); 41 | }, 12000); 42 | 43 | setTimeout(function() { 44 | component.username.set('stubailo'); 45 | component.message.set(':+1:'); 46 | }, 14000); 47 | }; 48 | }); 49 | 50 | Template.Page.helpers({ 51 | username: function() { 52 | return this.username.get(); 53 | }, 54 | message: function() { 55 | return this.message.get(); 56 | }, 57 | }); 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Example Isomorphic Meteor+React app (with SSR and RouteCore). 2 | 3 | > Try turning off JavaScript, it will still render the intial state of the app, as expected! [Here's a Chrome plugin to turn off JavaScript.](https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje) 4 | 5 | 6 | ## Demo 7 | http://jsx-templating.meteor.com 8 | 9 | ## More examples (Don't miss!) 10 | * [Example Isomorphic Meteor+React app (with SSR and FlowRouter)](https://github.com/timbrandin/hello-react-meteor). 11 | 12 | ## Notice 13 | 14 | * How fast it loads! 15 | * It works without any JavaScript! 16 | * Google and search engines loves it, ... easy to index! 17 | * Facebook and Social media can grab it's social tags, pictures and description easily! 18 | * Easily cachable, just setup Varnish or whatever in front of it and serve pages even faster. 19 | * And could therefor better handle bursts of heavy traffic. 20 | 21 | ## Features 22 | 23 | - [x] [Meteor](http://meteor.com) 24 | - [x] [React](https://facebook.github.io/react) 25 | - [x] [JSX Templates (```meteor add timbrandin:jsx-templates```)](https://atmospherejs.com/timbrandin/jsx-templating) 26 | - [x] [RouteCore](https://github.com/mystor/meteor-routecore) 27 | - [x] Template helpers 28 | - [x] Template onCreated 29 | - [x] ReactiveVar (```meteor add reactive-var```) 30 | - [ ] Template events 31 | - [ ] Template onRendered 32 | - [ ] Template onDestroyed 33 | -------------------------------------------------------------------------------- /routes.jsx: -------------------------------------------------------------------------------- 1 | /** @jsx React.DOM */ 2 | 3 | RouteCore.map(function() { 4 | this.route('/', function(ctx) { 5 | return ( 6 | 7 | ); 8 | }); 9 | }); 10 | --------------------------------------------------------------------------------