[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5,"_52":53},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","ZevenFang","page",1,"limit",20,"total","id","27285","avatar_url","https://avatars2.githubusercontent.com/u/11134329?v=3","githubUsername","create_at","2017-03-04 15:53:23.982","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":16,"_47":48,"_25":49,"_50":51},"23518","author_id","tab","share","content","# react-meteor\r\n![build](https://travis-ci.org/ZevenFang/react-meteor.svg?branch=master)\r\n\r\nMeteor Reactivity for your React application :).\r\n\r\n## What is it for ?\r\n\r\nThe purpose of this library is :\r\n* to set up and maintain a ddp connection with a ddp server, freeing the developer from having to do it on their own.\r\n* be fully compatible with react and help react developers.\r\n* **to match with [Meteor documentation](http://docs.meteor.com/) used with React.**\r\n\r\n## Install\r\n\r\n npm i --save react-web-meteor\r\n\r\n## Example usage\r\n\r\n```javascript\r\n\r\nimport React, { Component } from 'react';\r\nimport Meteor, { createContainer } from 'react-web-meteor';\r\n\r\nMeteor.connect('ws://192.168.X.X:3000/websocket');//do this only once\r\n\r\nclass Todo extends Component {\r\n renderRow(todo) {\r\n return (\r\n {todo.title}\r\n );\r\n }\r\n render() {\r\n const { settings, todosReady, todos } = this.props;\r\n return(\r\n

\r\n

{settings.title}

\r\n {!todosReady && Not ready}\r\n

{todos.map(v=>this.renderRow(v))}

\r\n

\r\n )\r\n }\r\n}\r\n\r\nexport default createContainer(params=>{\r\n const handle = Meteor.subscribe('todos');\r\n Meteor.subscribe('settings');\r\n return {\r\n todosReady: handle.ready(),\r\n settings: Meteor.collection('settings').findOne()\r\n };\r\n}, Todo)\r\n```\r\n\r\n# Connect your components\r\n\r\n[Since Meteor 1.3, createContainer is the recommended way to populate your React Components](http://guide.meteor.com/v1.3/react.html#using-createContainer).\r\n\r\n## createContainer\r\n\r\n Very similar to getMeteorData but your separate container components from presentational components.\r\n\r\n### Example\r\n\r\n```javascript\r\nimport Meteor, { createContainer } from 'react-web-meteor';\r\n\r\n\r\nclass Orders extends Component {\r\n render() {\r\n const { pendingOrders } = this.props;\r\n\r\n //...\r\n );\r\n }\r\n}\r\n\r\nexport default createContainer(params=>{\r\n return {\r\n pendingOrders: Meteor.collection('orders').find({status: \"pending\"}),\r\n };\r\n}, Orders)\r\n```\r\n\r\n# Reactive variables\r\n\r\nThese variables can be used inside getMeteorData or createContainer. They will be populated into your component if they change.\r\n\r\n* [Meteor.subscribe()](http://docs.meteor.com/#/full/meteor_subscribe)\r\n* Meteor.collection(collectionName, options)\r\n * [.find(selector, options)](http://docs.meteor.com/#/full/find)\r\n * [.findOne(selector, options)](http://docs.meteor.com/#/full/findone)\r\n* [Meteor.user()](http://docs.meteor.com/#/full/meteor_user)\r\n* [Meteor.userId()](http://docs.meteor.com/#/full/meteor_userid)\r\n* [Meteor.status()](http://docs.meteor.com/#/full/meteor_status)\r\n* [Meteor.loggingIn()](http://docs.meteor.com/#/full/meteor_loggingin)\r\n* [ReactiveDict()](https://atmospherejs.com/meteor/reactive-dict)\r\n\r\n# Additionals collection methods\r\n\r\nThese methods (except update) work offline. That means that elements are correctly updated offline, and when you reconnect to ddp, Meteor calls are taken care of.\r\n\r\n* Meteor.collection(collectionName, options)\r\n * [.insert(doc, callback)](http://docs.meteor.com/#/full/insert)\r\n * [.update(id, modifier, [options], [callback])](http://docs.meteor.com/#/full/update)\r\n * [.remove(id, callback(err, countRemoved))](http://docs.meteor.com/#/full/remove)\r\n\r\n# API\r\n\r\n## Meteor Collections\r\n\r\n### Meteor.subscribe\r\n[Meteor.subscribe()](http://docs.meteor.com/#/full/meteor_subscribe) returns an handle. If the component which called subscribe is unmounted, the subscription is automatically canceled.\r\n\r\n### Meteor.collection(collectionName, options)\r\nYou need pass the `cursoredFind` option when you get your collection if you want to use cursor-like method:\r\n\r\n```‍‍‍javascript\r\nMeteor.collection(\"collectionName\", { cursoredFind: true })\r\n```\r\n\r\nOr you can simply use `find()` to get an array of documents. The option default to false for backward compatibility. Cursor methods are available to share code more easily between a react app and a standard Meteor app.\r\n\r\n\r\n## Meteor DDP connection\r\n\r\n### Meteor.connect(endpoint, options)\r\n\r\nConnect to a DDP server. You only have to do this once in your app.\r\n\r\n*Arguments*\r\n\r\n- `url` **string** *required*\r\n- `options` **object** Available options are :\r\n - autoConnect **boolean** [true] whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.\r\n - autoReconnect **boolean** [true] whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.\r\n - reconnectInterval **number** [10000] the interval in ms between reconnection attempts.\r\n\r\n### Meteor.disconnect()\r\n\r\nDisconnect from the DDP server.\r\n\r\n## Meteor methods\r\n\r\n* [Meteor.call](http://docs.meteor.com/#/full/meteor_call)\r\n* [Meteor.loginWithPassword](http://docs.meteor.com/#/full/meteor_loginwithpassword) (Please note that user is auto-resigned in - like in Meteor Web applications.)\r\n* [Meteor.logout](http://docs.meteor.com/#/full/meteor_logout)\r\n* [Meteor.logoutOtherClients](http://docs.meteor.com/#/full/meteor_logoutotherclients)\r\n\r\n## Availables packages\r\n\r\n### Convenience packages\r\nExample `import { composeWithTracker } from 'react-web-meteor';``\r\n\r\n* EJSON\r\n* Tracker\r\n* composeWithTracker: If you want to use [react-komposer](https://github.com/kadirahq/react-komposer), you can use react-web-meteor compatible composeWithTracker\r\n* Accounts (see below)\r\n\r\n### ReactiveDict\r\n\r\nSee [documentation](https://atmospherejs.com/meteor/reactive-dict).\r\n\r\n\r\n### Meteor.Accounts\r\n\r\n`import { Accounts } from 'react-web-meteor';``\r\n\r\n* [Accounts.createUser](http://docs.meteor.com/#/full/accounts_createuser)\r\n* [Accounts.changePassword](http://docs.meteor.com/#/full/accounts_forgotpassword)\r\n* [Accounts.forgotPassword](http://docs.meteor.com/#/full/accounts_changepassword)\r\n* [Accounts.resetPassword](http://docs.meteor.com/#/full/accounts_resetpassword)\r\n* [Accounts.onLogin](http://docs.meteor.com/#/full/accounts_onlogin)\r\n* [Accounts.onLoginFailure](http://docs.meteor.com/#/full/accounts_onloginfailure)\r\n\r\n### Meteor.ddp\r\n\r\nOnce connected to the ddp server, you can access every method available in [ddp.js](https://github.com/mondora/ddp.js/).\r\n* Meteor.ddp.on('connected')\r\n* Meteor.ddp.on('added')\r\n* Meteor.ddp.on('changed')\r\n* ...\r\n\r\n# Author\r\n\r\n* Zeven ([@ZevenFang](https://github.com/zevenfang))\r\n\r\n# Want to help ?\r\n\r\nPull Requests and issues reported are welcome! :)","title","React、Meteor 用户的福音，使用 Meteor 构建先进的 Web 项目","last_reply_at","2017-03-05 01:38:30.047","good","top","visit_count",3483,"2017-03-04 15:54:45.837","author",{"_13":14,"_22":23},"publicConfig",{"_54":55},"apiBaseUrl","https://api.cnodejs.org"]