Start rendering messages with something more than the json

src/atoms/MessageTimestamp.js

@@ -0,0 +1,13 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+        var date = new Date(this.props.ts);
+        return (
+            <span className="mx_MessageTimestamp">
+                {date.toLocaleTimeString()}
+            </span>
+        );
+    },
+});
+

src/molecules/MTextTile.js

@@ -0,0 +1,13 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+        var content = this.props.mxEvent.getContent();
+        return (
+            <span className="mx_MTextTile">
+                {content.body}
+            </span>
+        );
+    },
+});
+

src/molecules/MessageTile.js

@@ -1,11 +1,27 @@
 var React = require('react');
 
+var MessageTimestamp = require('../atoms/MessageTimestamp');
+var SenderProfile = require('../molecules/SenderProfile');
+
+var UnknownMessageTile = require('../molecules/UnknownMessageTile');
+
+var tileTypes = {
+    'm.text': require('../molecules/MTextTile')
+};
+
 module.exports = React.createClass({
     render: function() {
-                //{this.props.mxEvent.getContent().body}
+        var content = this.props.mxEvent.getContent();
+        var msgtype = content.msgtype;
+        var TileType = UnknownMessageTile;
+        if (msgtype && tileTypes[msgtype]) {
+            TileType = tileTypes[msgtype];
+        }
         return (
             <div className="mx_MessageTile">
-                {JSON.stringify(this.props.mxEvent.getContent())}
+                <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                <SenderProfile memberName={this.props.mxEvent.getSender()} />:
+                <TileType mxEvent={this.props.mxEvent} />
             </div>
         );
     },

src/molecules/SenderProfile.js

@@ -0,0 +1,13 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+        var member = this.props.memberName;
+        return (
+            <span className="mx_SenderProfile">
+                {member}
+            </span>
+        );
+    },
+});
+

src/molecules/UnknownMessageTile.js

@@ -0,0 +1,11 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+        return (
+            <span className="mx_UnknownMessageTile">
+                ?
+            </span>
+        );
+    },
+});