React source code.

buckyroberts · buckyroberts · commit 69204d4b00a4 · 2015-08-02T16:36:00.000-04:00
diff --git a/React/003_properties.html b/React/003_properties.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>thenewboston</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+</head>
+<body>
+
+    <div id="content"></div>
+
+    <script type="text/jsx">
+
+        var BuckysComponent = React.createClass({
+            render: function() {
+                return(
+                        <h2>{this.props.user} likes to eat {this.props.food}</h2>
+                );
+            }
+        });
+
+        React.render(
+                <div>
+                    <BuckysComponent user="Bucky" food="Bacon" />
+                    <BuckysComponent user="Sally" food="Tuna" />
+                    <BuckysComponent user="Emily" food="Beef" />
+                    <BuckysComponent user="Tony" food="Ham" />
+                </div>,
+                document.getElementById('content')
+        );
+
+    </script>
+
+</body>
+</html>
diff --git a/React/004_children.html b/React/004_children.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>thenewboston</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+</head>
+<body>
+
+    <div id="content"></div>
+
+    <script type="text/jsx">
+
+        var BuckysComponent = React.createClass({
+            render: function() {
+                return(
+                        <div>
+                            <h3>{this.props.user}</h3>
+                            <p>{this.props.children}</p>
+                        </div>
+                );
+            }
+        });
+
+        React.render(
+                <div>
+                    <BuckysComponent user="Bucky">This guy is awesome</BuckysComponent>
+                    <BuckysComponent user="Emily">She smells like mints</BuckysComponent>
+                </div>,
+                document.getElementById('content')
+        );
+
+    </script>
+
+</body>
+</html>
diff --git a/React/005_events.html b/React/005_events.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>thenewboston</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+</head>
+<body>
+
+    <div id="content"></div>
+
+    <script type="text/jsx">
+
+        var BuckysComponent = React.createClass({
+            doSomething: function() {
+                alert("The text displaying is: " + this.props.children);
+            },
+            render: function() {
+                return(
+                        <div>
+                            <h3>{this.props.user}</h3>
+                            <a onClick={this.doSomething} href="#" >Click me</a>
+                        </div>
+                );
+            }
+        });
+
+        React.render(
+                <div>
+                    <BuckysComponent user="Bucky">This guy is awesome</BuckysComponent>
+                    <BuckysComponent user="Emily">She smells like mints</BuckysComponent>
+                </div>,
+                document.getElementById('content')
+        );
+
+    </script>
+
+</body>
+</html>
