Add first version of React starter app

zeroasterisk · Sep 14, 2015 · 4704aaa · 4704aaa
1 parent cf1cf7a
commit 4704aaa
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 0 deletions.
diff --git a/examples/react-starter/.meteor/.finished-upgraders b/examples/react-starter/.meteor/.finished-upgraders
@@ -0,0 +1,11 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
diff --git a/examples/react-starter/.meteor/.gitignore b/examples/react-starter/.meteor/.gitignore
@@ -0,0 +1 @@
+local
diff --git a/examples/react-starter/.meteor/packages b/examples/react-starter/.meteor/packages
@@ -0,0 +1,22 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-base             # Packages every Meteor app needs to have
+mobile-experience       # Packages for a great mobile UX
+mongo                   # The database Meteor supports right now
+session                 # Client-side reactive dictionary for your app
+jquery                  # Helpful client-side library
+tracker                 # Meteor's client-side reactive programming library
+
+standard-minifiers      # JS/CSS minifiers run for production mode
+es5-shim                # ECMAScript 5 compatibility for older browsers.
+ecmascript              # Enable ECMAScript2015+ syntax in app code
+
+autopublish             # Publish all data to the clients (for prototyping)
+insecure                # Allow all DB writes from clients (for prototyping)
+
+static-html             # Render static HTML content
+react                   # Everything you need to use React with Meteor
diff --git a/examples/react-starter/.meteor/platforms b/examples/react-starter/.meteor/platforms
@@ -0,0 +1,2 @@
+server
+browser
diff --git a/examples/react-starter/.meteor/release b/examples/react-starter/.meteor/release
@@ -0,0 +1 @@
+[email protected]
diff --git a/examples/react-starter/.meteor/versions b/examples/react-starter/.meteor/versions
@@ -0,0 +1,73 @@
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+cosmos:[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]_1
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]_6
+[email protected]_5
+[email protected]_4
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
diff --git a/examples/react-starter/index.html b/examples/react-starter/index.html
@@ -0,0 +1,11 @@
+<head>
+  <title>react-skel</title>
+</head>
+
+<body>
+  <h1>Welcome to Meteor and React!</h1>
+
+  <p><a href="https://www.meteor.com/tutorials/react">Try the tutorial!</a></p>
+
+  <div id="react-container"></div>
+</body>
diff --git a/examples/react-starter/index.jsx b/examples/react-starter/index.jsx
@@ -0,0 +1,65 @@
+// A collection that is synchronized across client and server with the
+// 'autopublish' package. To control where the data is accessible from, remove
+// 'autopublish' and use Meteor.publish and Meteor.subscribe
+Items = new Mongo.Collection("items");
+
+// A React component, defined in the normal way
+App = React.createClass({
+  mixins: [ReactMeteorData],
+
+  // Load data from collections inside this special method enabled by the
+  // ReactMeteorData mixin. The results are attached to this.data on the
+  // component
+  getMeteorData() {
+    return {
+      items: Items.find().fetch()
+    };
+  },
+
+  addItem() {
+    const nextIndex = Items.find().count() + 1;
+
+    // We can insert from the client because we have the 'insecure' package
+    // installed. Remove it and use Meteor methods for better security
+    Items.insert({
+      text: "Hello world! " + nextIndex
+    });
+  },
+
+  renderItems() {
+    return this.data.items.map((item) => {
+      return (
+        <li key={item._id}>
+          {item.text}
+        </li>
+      );
+    });
+  },
+
+  render() {
+    return (
+      <div>
+        <ul>
+          {this.renderItems()}
+        </ul>
+
+        <button onClick={this.addItem}>
+          Add item
+        </button>
+      </div>
+    )
+  }
+});
+
+if (Meteor.isClient) {
+  // Code here runs on the client only
+
+  Meteor.startup(() => {
+    // Make sure to render after startup so the DOM is ready
+    React.render(<App />, document.getElementById("react-container"));
+  });
+}
+
+if (Meteor.isServer) {
+  // Code inside here will run on the server only
+}
diff --git a/examples/react-starter/style.css b/examples/react-starter/style.css
@@ -0,0 +1 @@
+/* CSS declarations go here */