basic code editor component

Barrie Hadfield · Barrie Hadfield · commit 663bfa1c40fd · 2017-02-06T10:06:03.000Z
diff --git a/source/_components.html.erb b/source/_components.html.erb
@@ -1,6 +1,28 @@
 <script type="text/ruby">
 
-class App < React::Component::Base
+class CodeEditor < React::Component::Base
+
+  render do
+    div.row do
+      div.col_md_6 { code_card }
+      div.col_md_6 { result_card }
+    end
+  end
+
+  def code_card
+    div.card_block do
+      p { "here" }
+    end
+  end
+
+  def result_card
+    div.card_block do
+      p { "there" }
+    end
+  end
+end
+
+class TestApp < React::Component::Base
   param :name
   before_mount { @timer = every(1) { force_update! } }
   render(DIV) do
diff --git a/source/index.html.md.erb b/source/index.html.md.erb
@@ -1,3 +1,5 @@
+<div data-reactrb-mount="CodeEditor"></div>
+
 ## Pure Ruby
 Hyperloop lets you build beautiful interactive user interfaces using the same Ruby language running your server side code. Hyperloop replaces JS code, JSX, HTML, templating languages, and complex frameworks with one simple system.
 
@@ -7,7 +9,7 @@ One language. One simple model. Under the hood the Hyperloop gems takes care of
 ## HyperReact = React + Ruby
 The power and simplicity of React with a great easy to use Ruby DSL. HyperReact frees you up to do what you do best - building great apps.
 
-HyperReact is a wrapper for the React.js library for creating user interfaces.  HyperReact provides all the goodness of React combined with the expressiveness of the Ruby language.   
+HyperReact is a wrapper for the React.js library for creating user interfaces.  HyperReact provides all the goodness of React combined with the expressiveness of the Ruby language.
 
 React was built to solve one problem: building large applications with data that changes over time.
 
diff --git a/source/layout.erb b/source/layout.erb
@@ -105,13 +105,15 @@
       (function(Opal) {
         var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice;
         Opal.add_stubs(['$puts']);
-        return self.$puts("Opal working")
+        return self.$puts("Opal ok")
       })(Opal);
     </script>
 
     <!-- <script   src="http://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script> -->
 
-    <script type="text/ruby">puts "Hyperloop Express working"</script>
+    <script type="text/ruby">puts "Hyperloop Express ok"</script>
+
+    <%= partial "_components" %>
 
   </body>
 </html>
