example

Barrie Hadfield · Barrie Hadfield · commit 5c7f9f564d8e · 2017-03-25T12:17:02.000Z
diff --git a/README.md b/README.md
@@ -42,8 +42,8 @@ First add React, JQuery, `hyperloop.js` and `opal-compiler.js` to your HTML page
   <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 
   <!-- Opal and Hyperloop -->
-  <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/opal-compiler.min.js"></script>
-  <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/hyperloop.min.js"></script>
+  <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/opal-compiler.min.js"></script>
+  <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/hyperloop.min.js"></script>
 </head>
 ```
 
@@ -86,8 +86,8 @@ index.html:
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 
     <!-- Opal and Hyperloop -->
-    <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/opal-compiler.min.js"></script>
-    <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/hyperloop.min.js"></script>
+    <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/opal-compiler.min.js"></script>
+    <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/hyperloop.min.js"></script>
 
     <script type="text/ruby">
       class SayHello < Hyperloop::Component
diff --git a/index.html b/index.html
@@ -4,35 +4,30 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>Reactrb-Express Demo</title>
+    <title>Hyperloop JS Demo</title>
+
+    <!-- React and JQuery -->
+    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
+    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
-    <!--
-    <script src="https://rawgit.com/reactrb/reactrb-express/master/reactrb-express.js"></script>
-    -->
-    <script src="reactrb-express.min.js"></script>
 
-    <!-- ruby scripts can be fetched from the server or other remote source -->
-    <script type="text/ruby" src="clock.rb"></script>
+    <!-- Opal and Hyperloop -->
+    <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/opal-compiler.min.js"></script>
+    <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/hyperloop.min.js"></script>
 
-    <!-- or the ruby code can specified directly inline -->
     <script type="text/ruby">
-    Element['#clock'].render do
-      Clock format: 'The time is: %a, %e %b %Y %H:%M:%S %z'
+    class SimpleComponent < Hyperloop::Component
+      render(DIV) do
+        BUTTON { 'Push the button' }.on(:click) do
+         alert 'You did it!'
+        end
+      end
     end
     </script>
-
   </head>
-  <body>
-    <div id="clock"></div>
-    <!--
 
-    instead of using Element[...].render to attach a top level component, you
-    can specify the react component and parameters using data- tags:
-
-    <div data-reactrb-mount="Clock"
-         data-format="The time is: %a, %e %b %Y %H:%M:%S %z">
+  <body>
+    <div data-hyperloop-mount="SimpleComponent">
     </div>
-
-    -->
   </body>
 </html>
