× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

React/Meteor Demo

Brandon Mason
Oct 09, 2014
<p>Here's a React demo written in CoffeeScript with a Meteor backend.  Go to the chat demo here:</p><p><a href="http://react-chat.meteor.com/">http://react-chat.meteor.com/</a></p><p>And type :debug in the message box.  You'll now see a debug console on the right that shows the current state of the component.  Type in the message box or send chats and you'll see it update.  This is done with just two lines of code in the render method:</p><pre><code class="language-coffeescript">r.pre {className: 'data-preview'}, r.code {}, JSON.stringify(@state, null, ' ')</code></pre><p>I find this approach really helpful to debug react components.  Their browser plugin is supposed to do this, but it doesn't always work for me.</p><p>Another easter egg is you can say :reset to clear all the chats.</p><p>The demo is a good example of using a centralized data model to facilitate synchronizing your views.  It also has a component composition heiarchy.  One of the nice things about the Meteor environment is it live reloads as you make changes to the source files.  So if you get the chat demo running on your computer you could play around with it and learn how the bits and pieces work, and change them and see what happens.</p><p>A couple things to note on your tour of the code:</p><ol><li>In <a href="https://github.com/bitmage/meteor-chat/blob/master/main.coffee#L10">main.coffee</a>: What view gets rendered is controlled by a simple if statement in the render function.</li><li>In <a href="https://github.com/bitmage/meteor-chat/blob/master/login.coffee#L12..L14">login.coffee</a>: setSessionName triggers the transition in step 1.  No need to wire up synchronizations, just change the data.</li><li>We're using a react-meteor mixin.  It's not magic, all it does is this.setState when the meteor models change.</li><li>Meteor proactively pushes data to the client, so we don't need to write any code to tell other browsers (other people chatting) to update with the new data, they just do!</li></ol><p>This is a different programming paradigm than most people are used to, and immensely simplifies apps that work with live data.  It's an extension of the same principles that drive React:</p><ol><li>Observe the state of the world and present it in the UI (up the stack)</li><li>Perform actions on state, models, server (down the stack)</li></ol><p>In the Flux documentation they say data only flows in one way.  This is true, but it's a circle not a straight line.  :-)</p><p>Code for the chat: <a href="https://github.com/bitmage/meteor-chat">https://github.com/bitmage/meteor-chat</a><br>Meteor setup: <a href="http://docs.meteor.com/">http://docs.meteor.com/</a><br>Slides for a related presentation: <a href="http://pres.tlsft.com/react">http://pres.tlsft.com/react</a></p><p>Let me know if you have further questions!</p><p>Best wishes,<br>Brandon</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus