├── .meteor ├── .gitignore ├── release ├── platforms ├── .finished-upgraders ├── .id ├── packages └── versions ├── example.css ├── example.html ├── README.md └── example.jsx /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.1.0.3 2 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /example.css: -------------------------------------------------------------------------------- 1 | /* CSS declarations go here */ 2 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | example 3 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FlowRouter and React example 2 | 3 | A simple example application demonstrating routing and subscriptions with React. 4 | 5 | ## License 6 | 7 | MIT 8 | -------------------------------------------------------------------------------- /.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/.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 | 1o5xwt15gnwdaz5age3 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 | insecure 9 | kadira:flow-router 10 | reactive-var 11 | kadira:react-layout 12 | react 13 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | autoupdate@1.2.1 2 | babel-compiler@5.6.15 3 | babel-runtime@0.1.3 4 | base64@1.0.3 5 | binary-heap@1.0.3 6 | blaze@2.1.2 7 | blaze-tools@1.0.3 8 | boilerplate-generator@1.0.3 9 | callback-hook@1.0.3 10 | check@1.0.5 11 | coffeescript@1.0.6 12 | cosmos:browserify@0.5.0 13 | ddp@1.1.0 14 | deps@1.0.7 15 | ejson@1.0.6 16 | fastclick@1.0.3 17 | geojson-utils@1.0.3 18 | html-tools@1.0.4 19 | htmljs@1.0.4 20 | http@1.1.0 21 | id-map@1.0.3 22 | insecure@1.0.3 23 | jquery@1.11.3_2 24 | json@1.0.3 25 | jsx@0.1.2 26 | kadira:flow-router@2.3.0 27 | kadira:react-layout@1.2.0 28 | launch-screen@1.0.2 29 | livedata@1.0.13 30 | logging@1.0.7 31 | meteor@1.1.6 32 | meteor-platform@1.2.2 33 | minifiers@1.1.5 34 | minimongo@1.0.8 35 | mobile-status-bar@1.0.3 36 | mongo@1.1.0 37 | observe-sequence@1.0.6 38 | ordered-dict@1.0.3 39 | random@1.0.3 40 | react@0.1.7 41 | react-meteor-data@0.1.5 42 | react-runtime@0.13.3_4 43 | react-runtime-dev@0.13.3_3 44 | react-runtime-prod@0.13.3_2 45 | reactive-dict@1.1.0 46 | reactive-var@1.0.5 47 | reload@1.1.3 48 | retry@1.0.3 49 | routepolicy@1.0.5 50 | session@1.1.0 51 | spacebars@1.0.6 52 | spacebars-compiler@1.0.6 53 | templating@1.1.1 54 | tracker@1.0.7 55 | ui@1.0.6 56 | underscore@1.0.3 57 | url@1.0.4 58 | webapp@1.2.0 59 | webapp-hashing@1.0.3 60 | -------------------------------------------------------------------------------- /example.jsx: -------------------------------------------------------------------------------- 1 | Posts = new Mongo.Collection('posts'); 2 | 3 | Layout = React.createClass({ 4 | render() { 5 | return ( 6 |
7 | post 1 8 | post 2 9 | post 3 10 | home 11 |
12 | {this.props.content} 13 |
14 | ); 15 | } 16 | }); 17 | 18 | Home = React.createClass({ 19 | render() { 20 | return ( 21 |
Home
22 | ); 23 | } 24 | }); 25 | 26 | Post = React.createClass({ 27 | propTypes: { 28 | slug: React.PropTypes.string.isRequired 29 | }, 30 | mixins: [ReactMeteorData], 31 | getMeteorData() { 32 | var subscription = Meteor.subscribe('post', this.props.slug); 33 | return { 34 | ready: subscription.ready(), 35 | post: Posts.findOne({ slug: this.props.slug }) 36 | }; 37 | }, 38 | render() { 39 | if (! this.data.ready) { 40 | return
Loading...
; 41 | } 42 | if (! this.data.post) { 43 | return
404: Not found
; 44 | } 45 | return
Post: {this.data.post.title}
; 46 | } 47 | }); 48 | 49 | FlowRouter.route('/', { 50 | action: function() { 51 | ReactLayout.render(Layout, { 52 | content: 53 | }); 54 | } 55 | }); 56 | 57 | FlowRouter.route('/post/:slug', { 58 | action: function(params) { 59 | ReactLayout.render(Layout, { 60 | content: 61 | }); 62 | } 63 | }); 64 | 65 | if (Meteor.isServer) { 66 | if (Posts.find().count() === 0) { 67 | Posts.insert({ slug: 'post-1', title: 'Post 1' }); 68 | Posts.insert({ slug: 'post-2', title: 'Post 2' }); 69 | Posts.insert({ slug: 'post-3', title: 'Post 3' }); 70 | } 71 | 72 | Meteor.publish('post', function(slug) { 73 | check(slug, String); 74 | return Posts.find({ slug: slug }); 75 | }); 76 | } 77 | --------------------------------------------------------------------------------