StoneCypher · January 3, 2018 18:15 · Jan 3, 2018 · Oct 18, 2017 · Oct 1, 2017 · Oct 1, 2017
diff --git a/headless_app.js b/headless_app.js
@@ -2,7 +2,7 @@
 import {Spinner} from './brainless_renderer.js';
 
 // this is a vanilla js app.  it knows nothing of react, other than 
-// to call `.render` on line 7 with relevant data and callbacks.
+// to call `.render` on line 9 with relevant data and callbacks.
 
 var App = function() {
 

diff --git a/brainless_renderer.js b/brainless_renderer.js
@@ -0,0 +1,12 @@
+
+// this is the react app.  it knows nothing of the vanilla app, other than that the information
+// will come in in props, and that it should call this hook when this button is pressed, or etc
+
+var Spinner = (props) => 
+  <div>
+    {this.props.data}
+    <button value="↑" onclick={this.props.hooks.inc}/>
+    <button value="↓" onclick={this.props.hooks.dec}/>
+  </div>;
+
+export {Spinner};
diff --git a/foo.jsx → headless_app.js b/foo.jsx → headless_app.js
@@ -1,4 +1,6 @@
 
+import {Spinner} from './brainless_renderer.js';
+
 // this is a vanilla js app.  it knows nothing of react, other than 
 // to call `.render` on line 7 with relevant data and callbacks.
 
@@ -18,17 +20,3 @@ var App = function() {
         repaint
     };
 }
-
-
-
-
-
-// this is the react app.  it knows nothing of the vanilla app, other than that the information
-// will come in in props, and that it should call this hook when this button is pressed, or etc
-
-var Spinner = (props) => 
-  <div>
-    {this.props.data}
-    <button value="↑" onclick={this.props.hooks.inc}/>
-    <button value="↓" onclick={this.props.hooks.dec}/>
-  </div>;
diff --git a/foo.jsx b/foo.jsx
@@ -29,6 +29,6 @@ var App = function() {
 var Spinner = (props) => 
   <div>
     {this.props.data}
-    <button value="^" onclick={this.props.hooks.inc}/>
-    <button value="v" onclick={this.props.hooks.dec}/>
+    <button value="↑" onclick={this.props.hooks.inc}/>
+    <button value="↓" onclick={this.props.hooks.dec}/>
   </div>;
diff --git a/foo.jsx b/foo.jsx
@@ -1,4 +1,7 @@
 
+// this is a vanilla js app.  it knows nothing of react, other than 
+// to call `.render` on line 7 with relevant data and callbacks.
+
 var App = function() {
 
     var repaint = () => ReactDOM.render(document.body, <Spinner data={counter} hooks={hooks}/>),
@@ -18,6 +21,11 @@ var App = function() {
 
 
 
+
+
+// this is the react app.  it knows nothing of the vanilla app, other than that the information
+// will come in in props, and that it should call this hook when this button is pressed, or etc
+
 var Spinner = (props) => 
   <div>
     {this.props.data}

diff --git a/foo.jsx b/foo.jsx
@@ -9,7 +9,7 @@ var App = function() {
         hooks   = {inc, dec};
 
     return {
-        value:   () => counter,
+        value: () => counter,
         inc,
         dec,
         repaint

diff --git a/foo.jsx b/foo.jsx
@@ -9,9 +9,9 @@ var App = function() {
         hooks   = {inc, dec};
 
     return {
-        inc:     inc,
-        dec:     dec,
         value:   () => counter,
+        inc,
+        dec,
         repaint
     };
 }

diff --git a/foo.jsx b/foo.jsx
@@ -1,7 +1,8 @@
 
 var App = function() {
 
-    var counter = 0,
+    var repaint = () => ReactDOM.render(document.body, <Spinner data={counter} hooks={hooks}/>),
+        counter = 0,
         inc     = () => { ++counter; repaint() },
         dec     = () => { --counter; repaint() },
 
@@ -11,7 +12,7 @@ var App = function() {
         inc:     inc,
         dec:     dec,
         value:   () => counter,
-        repaint: () => ReactDOM.render(document.body, <Spinner data={counter} hooks={hooks}/>)
+        repaint
     };
 }
 

diff --git a/foo.jsx b/foo.jsx
@@ -17,16 +17,9 @@ var App = function() {
 
 
 
-var Spinner = (props) => ({
-
-        render: function() {
-
-          return <div>
-            {this.props.data}
-            <button value="^" onclick={this.props.hooks.inc}/>
-            <button value="v" onclick={this.props.hooks.dec}/>
-          </div>;
-
-        }
-
-    });
+var Spinner = (props) => 
+  <div>
+    {this.props.data}
+    <button value="^" onclick={this.props.hooks.inc}/>
+    <button value="v" onclick={this.props.hooks.dec}/>
+  </div>;
diff --git a/foo.jsx b/foo.jsx
@@ -5,7 +5,7 @@ var App = function() {
         inc     = () => { ++counter; repaint() },
         dec     = () => { --counter; repaint() },
 
-        hooks   = {inc: inc, dec: dec};
+        hooks   = {inc, dec};
 
     return {
         inc:     inc,

diff --git a/foo.jsx b/foo.jsx
@@ -11,13 +11,13 @@ var App = function() {
         inc:     inc,
         dec:     dec,
         value:   () => counter,
-        repaint: () => React.render(document.body, <Spinner data={counter} hooks={hooks}/>)
+        repaint: () => ReactDOM.render(document.body, <Spinner data={counter} hooks={hooks}/>)
     };
 }
 
 
 
-var Spinner = React.createClass({
+var Spinner = (props) => ({
 
         render: function() {
 

diff --git a/foo.jsx b/foo.jsx
@@ -23,8 +23,8 @@ var Spinner = React.createClass({
 
           return <div>
             {this.props.data}
-            <button value="^" onclick={this.props.inc}/>
-            <button value="v" onclick={this.props.dec}/>
+            <button value="^" onclick={this.props.hooks.inc}/>
+            <button value="v" onclick={this.props.hooks.dec}/>
           </div>;
 
         }

diff --git a/foo.jsx b/foo.jsx
@@ -0,0 +1,32 @@
+
+var App = function() {
+
+    var counter = 0,
+        inc     = () => { ++counter; repaint() },
+        dec     = () => { --counter; repaint() },
+
+        hooks   = {inc: inc, dec: dec};
+
+    return {
+        inc:     inc,
+        dec:     dec,
+        value:   () => counter,
+        repaint: () => React.render(document.body, <Spinner data={counter} hooks={hooks}/>)
+    };
+}
+
+
+
+var Spinner = React.createClass({
+
+        render: function() {
+
+          return <div>
+            {this.props.data}
+            <button value="^" onclick={this.props.inc}/>
+            <button value="v" onclick={this.props.dec}/>
+          </div>;
+
+        }
+
+    });
No results found