Basic structure of a react SDK and start of an implementation.

src/MatrixClientPeg.js

@@ -0,0 +1,15 @@
+// A thing that holds your Matrix Client
+var Matrix = require("matrix-js-sdk");
+
+var matrixClient = null;
+
+module.exports = {
+    get: function() {
+        return matrixClient;
+    },
+
+    replaceUsingUrl: function(hs_url) {
+        matrixClient = Matrix.createClient(hs_url);
+    }
+};
+

src/dispatcher.js

@@ -0,0 +1 @@
+module.exports = new require("flux").Dispatcher();

src/index.js

@@ -0,0 +1 @@
+module.exports.MatrixChat = require("./pages/MatrixChat");

src/molecules/HomeServerTextBox.js

@@ -0,0 +1,31 @@
+var React = require('react');
+
+var MatrixClientPeg = require("../MatrixClientPeg.js");
+
+module.exports = React.createClass({
+    getDefaultProps: function() {
+        return {
+            default_url: 'https://matrix.org/'
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            hs_url: this.props.default_url
+        }
+    },
+
+    hsChanged: function(ev) {
+        this.state.hs_url = ev.target.value;
+        MatrixClientPeg.replaceUsingUrl(this.state.hs_url);
+    },
+
+    render: function() {
+        return (
+            <div className="HomeServerTextBox">
+                Home Server URL:&nbsp;
+                <input type="text" value={this.state.hs_url} onChange={this.hsChanged} />
+            </div>
+        );
+    }
+});

src/molecules/Message.js

@@ -0,0 +1,12 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+        return (
+            <div>
+                {this.props.event.content.body}
+            </div>
+        );
+    },
+});
+

src/organisms/MessageSection.js

@@ -0,0 +1,26 @@
+var React = require('react');
+var Message = require('../molecules/Message');
+
+module.exports = React.createClass({
+    getInitialState: function() {
+        return {
+            messages: [ { foo: "bar"} ]
+        }
+    },
+
+    render: function() {
+        var messageItems = this.state.messages.map(function(ev) {
+            return (
+                <Message ev={ev} />
+            );
+        });
+        return (
+            <div>
+                <ul className="message-list" ref="messageList">
+                    {messageItems}
+                </ul>
+            </div>
+        );
+    },
+});
+

src/organisms/ThreadSection.js

@@ -0,0 +1,13 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+        return (
+            <div>
+                <ul>
+                </ul>
+            </div>
+        );
+    }
+});
+

src/pages/MatrixChat.js

@@ -0,0 +1,26 @@
+var React = require('react');
+
+var ThreadSection = require('../organisms/ThreadSection');
+var MessageSection = require('../organisms/MessageSection');
+
+var Login = require('../templates/Login');
+
+var mxCli = require("../MatrixClientPeg").get();
+
+module.exports = React.createClass({
+    render: function() {
+        if (mxCli && mxCli.credentials) {
+            return (
+                <div>
+                    <ThreadSection />
+                    <MessageSection />
+                </div>
+            );
+        } else {
+            return (
+                <Login />
+            );
+        }
+    }
+});
+

src/templates/Login.js

@@ -0,0 +1,38 @@
+var React = require('react');
+var MatrixClientPeg = require("../MatrixClientPeg");
+
+var HomeServerTextBox = require("../molecules/HomeServerTextBox");
+var Loader = require("react-loader");
+
+module.exports = React.createClass({
+    getInitialState: function() {
+        return {
+            step: 'choose_hs'
+        };
+    },
+
+    setStep: function(step) {
+        this.setState({ step: step });
+    },
+
+    onHSChosen: function(ev) {
+        this.setStep("fetch_stages");
+    },
+
+    render: function() {
+        switch (this.state.step) {
+            case 'choose_hs':
+                return (
+                    <div>
+                        <div>Please log in:</div>
+                        <HomeServerTextBox />
+                        <button onClick={this.onHSChosen}>Continue</button>
+                    </div>
+                );
+            case 'fetch_stages':
+                return (
+                    <Loader />
+                );
+        }
+    }
+});