installed react components MyDiv BtnA BtnB, Reflux Actions, and TheStore

brunch-config.js

@@ -38,7 +38,8 @@ exports.config = {
   plugins: {
     babel: {
       // Do not use ES6 compiler in vendor code
-      ignore: [/^(web\/static\/vendor)/]
+      //ignore: [/^(web\/static\/vendor)/]
+      ignore: [/^(web\/static\/vendor)|(bower_components)/]
     }
   },
   npm: {

web/static/js/Actions.js

@@ -0,0 +1,5 @@
+//import Reflux from "bower_components/reflux/dist/reflux";
+
+export default Reflux.createActions([
+  "swap"
+]);

web/static/js/MyDiv.js

@@ -0,0 +1,18 @@
+//import React from "bower_components/react/react";
+//import Reflux from "bower_components/reflux/dist/reflux";
+import BtnA from "./components/BtnA"
+import BtnB from "./components/BtnB"
+import Actions from "./Actions"
+import TheStore from "./stores/TheStore"
+
+
+export default React.createClass({
+    //mixins: [Reflux.connect(TheStore)],
+    render(){
+        return (
+            <div> This holds our buttons! <br />
+                <BtnA />  <BtnB />
+            </div>
+        )
+    }
+})

web/static/js/app.js

@@ -1,4 +1,12 @@
 import {Socket} from "phoenix"
+//import Reflux from "bower_components/reflux/dist/reflux"
+//import React from "bower_components/react/react";
+import MyDiv from "./MyDiv";
+
+React.render(
+  <MyDiv />,
+  document.getElementById("mydiv")
+);
 
 // let socket = new Socket("/ws")
 // socket.connect()

web/static/js/components/BtnA.js

@@ -0,0 +1,18 @@
+import Actions from "../Actions"
+import TheStore from "../stores/TheStore"
+
+export default React.createClass({
+    mixins: [Reflux.connect(TheStore)],
+    getInitialState(){
+        return {"name":"btna"};
+    },
+    handleClick(){
+      console.log(this.state.name,"clicked",this.state.test);
+      Actions.swap(this.state.test)
+    },
+    render(){
+        return (
+            <button  onClick={this.handleClick}> This is BtnA </button>
+        )
+    }
+})

web/static/js/components/BtnB.js

@@ -0,0 +1,18 @@
+import Actions from "../Actions"
+import TheStore from "../stores/TheStore"
+
+export default React.createClass({
+    mixins: [Reflux.connect(TheStore)],
+    getInitialState(){
+        return {"name":"btnb"};
+    },
+    handleClick(){
+        console.log(this.state.name,"clicked",this.state.test);
+        Actions.swap(this.state.test)
+    },
+    render(){
+        return (
+            <button onClick={this.handleClick}> This is BtnB </button>
+        )
+    }
+})

web/static/js/stores/TheStore.js

@@ -0,0 +1,18 @@
+//import Reflux from "bower_components/reflux/dist/reflux";
+import Actions from "../Actions";
+
+export default Reflux.createStore({
+  listenables: Actions,
+
+  init() {
+    this.test = true;
+  },
+  getInitialState(){
+    return this;
+  },
+  onSwap(x){
+    console.log("switch triggered in: ",x)
+    console.log("TheStore test is",this.test)
+    this.trigger({test: !x})
+  }
+})

web/templates/page/index.html.eex

@@ -1,39 +1,3 @@
-<div class="jumbotron">
-  <h2>Welcome to Phoenix!</h2>
-  <p class="lead">Most web frameworks make you choose between speed and a productive environment. <a href="http://phoenixframework.org">Phoenix</a> and <a href="http://elixir-lang.org">Elixir</a> give you both.</p>
-</div>
-
-<div class="row marketing">
-  <div class="col-lg-6">
-    <h4>Resources</h4>
-    <ul>
-      <li>
-        <a href="http://phoenixframework.org/docs/overview">Guides</a>
-      </li>
-      <li>
-        <a href="http://hexdocs.pm/phoenix">Docs</a>
-      </li>
-      <li>
-        <a href="https://github.com/phoenixframework/phoenix">Source</a>
-      </li>
-    </ul>
-  </div>
-
-  <div class="col-lg-6">
-    <h4>Help</h4>
-    <ul>
-      <li>
-        <a href="http://groups.google.com/group/phoenix-talk">Mailing list</a>
-      </li>
-      <li>
-        <a href="https://github.com/phoenixframework/phoenix/issues?state=open">Issues</a>
-      </li>
-      <li>
-        <a href="http://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on freenode IRC</a>
-      </li>
-      <li>
-        <a href="https://twitter.com/elixirphoenix">@elixirphoenix</a>
-      </li>
-    </ul>
-  </div>
+<div id="mydiv">
+our crap should go here
 </div>