add sanbox notes

zbyte64 · zbyte64 · commit d85b5b6924aa · 2014-07-13T21:19:22.000-07:00
diff --git a/basic.html b/basic.html
@@ -0,0 +1,27 @@
+<html>
+    <head>
+        <title>Hello World</title>
+        <link href="lib/bootstrap.css" rel="stylesheet" />
+        <script src="lib/react.js"></script>
+        <script src="lib/JSXTransformer.js"></script>
+        <script type="text/jsx" id="defineRenderSource">
+          /** @jsx React.DOM */
+          var UberTag = React.createClass({
+              render: function() {
+                  return <h3>{this.props.children}</h3>;
+              }
+          });
+
+          React.renderComponent(
+            <UberTag>Hello World</UberTag>,
+            document.getElementById('defineRender')
+          );
+        </script>
+
+    </head>
+    <body>
+        <section class="container">
+            <div class="result" id="defineRender"></div>
+        </section>
+    </body>
+</html>
diff --git a/lesson1.html b/lesson1.html
@@ -16,11 +16,6 @@
         <script type="text/plain" id="jsxTanslatedSyntaxSource">
           React.DOM.tagname(properties, children)
         </script>
-        <script type="text/plain" id="defineTagSource">
-          /** @jsx React.DOM */
-          var UberTag = React.createClass({});
-          var uberInstance = <UberTag/>;
-        </script>
         <script type="text/jsx" id="defineRenderSource">
           /** @jsx React.DOM */
           var UberTag = React.createClass({
@@ -84,6 +79,16 @@
         </script>
     </head>
     <body>
+        <section class="container">
+            <h1>Your Sanbox</h1>
+            <div class="row">
+                <div class="col-sm-12">
+                <p>
+                    Most of the code on the pages is live editable. An explanation for how the code viewer works is at the end of lesson 2. "basic.html" has been created for you so that you can experiment in creating your own components in an environment that is already setup.
+                </p>
+                </div>
+            </div>
+        </section>
         <section class="container">
             <h1>Application as a hierarchy of components</h1>
             <div class="row">
diff --git a/outline.txt b/outline.txt
diff --git a/readme.rst b/readme.rst
@@ -0,0 +1,9 @@
+Crash Course for React.js
+=========================
+
+# Clone or download this respository
+# Open lesson1.html in your browser
+# Enjoy
+
+
+Got ideas for improvements? Fork me.
