file per class

class_view.rb

@@ -0,0 +1,15 @@
+class ClassView
+
+  include React::Component
+
+  required_param :sources, type: [Hash]
+
+  def render
+    div class: "sourceList" do
+      sources.each do |source|
+        SourceView author: source[:author], text: source[:text]
+      end
+    end
+  end
+
+end

debugger.rb

@@ -4,8 +4,11 @@ require 'opal-jquery'
 require "json"
 require 'opal-react'
 
-Document.ready? do  # Document.ready? is a opal-jquery method.  The block will run when doc is loaded
+require "class_view"
+require "register_view"
+require "source_view"
 
+Document.ready? do  # Document.ready? is a opal-jquery method.
   React.render( React.create_element( Debugger),  Element['#content']    )
 end
 
@@ -33,65 +36,3 @@ class Debugger
     end
   end
 end
-
-class ClassView
-
-  include React::Component
-
-  required_param :sources, type: [Hash]
-
-  def render
-    div class: "sourceList" do
-      sources.each do |source|
-        Source author: source[:author], text: source[:text]
-      end
-    end
-  end
-
-end
-
-class RegisterView
-
-  include React::Component
-  required_param :submit_source, type: Proc
-
-  define_state :author, :text
-
-  def render
-    div do
-      div do
-        "Author: ".span
-        input(type: :text, value: author, placeholder: "Your name", style: {width: "30%"}).
-          on(:change) { |e| author! e.target.value }
-      end
-      div do
-        div(style: {float: :left, width: "50%"}) do
-          textarea(value: text, placeholder: "Say something...", style: {width: "90%"}, rows: 10).
-            on(:change) { |e| text! e.target.value }
-        end
-        div(style: {float: :left, width: "50%"}) do
-          text
-        end
-      end
-      button { "Post" }.on(:click) { submit_source :author => (author! ""), :text => (text! "") }
-    end
-  end
-end
-
-class Source
-
-  include React::Component
-
-  required_param :author
-  required_param :text
-
-  def render
-    div class: "source" do
-      h2(class: "sourceAuthor") { author }
-      div do
-        text
-      end
-    end
-  end
-
-end

register_view.rb

@@ -0,0 +1,27 @@
+class RegisterView
+
+  include React::Component
+  required_param :submit_source, type: Proc
+
+  define_state :author, :text
+
+  def render
+    div do
+      div do
+        "Author: ".span
+        input(type: :text, value: author, placeholder: "Your name", style: {width: "30%"}).
+          on(:change) { |e| author! e.target.value }
+      end
+      div do
+        div(style: {float: :left, width: "50%"}) do
+          textarea(value: text, placeholder: "Say something...", style: {width: "90%"}, rows: 10).
+            on(:change) { |e| text! e.target.value }
+        end
+        div(style: {float: :left, width: "50%"}) do
+          text
+        end
+      end
+      button { "Post" }.on(:click) { submit_source :author => (author! ""), :text => (text! "") }
+    end
+  end
+end

source_view.rb

@@ -0,0 +1,17 @@
+class SourceView
+
+  include React::Component
+
+  required_param :author
+  required_param :text
+
+  def render
+    div class: "source" do
+      h2(class: "sourceAuthor") { author }
+      div do
+        text
+      end
+    end
+  end
+
+end