meteor · dmihal · Aug 13, 2018
diff --git a/tools/cli/commands.js b/tools/cli/commands.js
@@ -742,6 +742,8 @@ main.registerCommand({
     skelName += "-bare";
   } else if (options.full) {
     skelName += "-full";
+  } else if (options.react) {
+    skelName += "-react";
   }
 
   files.cp_r(files.pathJoin(__dirnameConverted, '..', 'static-assets', skelName), appPath, {

diff --git a/tools/static-assets/README.md b/tools/static-assets/README.md
@@ -24,6 +24,10 @@ Similar to `skel`, `skel-full` is copied on `meteor create --full` command.
 
 Similar to `skel`, `skel-pack` is copied on `meteor create --package` command.
 
+## skel-react - Package Skeleton
+
+Similar to `skel`, `skel-react` is copied on `meteor create --react` command.
+
 ## server - Bundled App's Bootstrap
 
 The `server` folder is copied by Isobuild when the app is bundled (on

diff --git a/tools/static-assets/skel-react/.gitignore b/tools/static-assets/skel-react/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/tools/static-assets/skel-react/.meteor/.gitignore b/tools/static-assets/skel-react/.meteor/.gitignore
@@ -0,0 +1 @@
+local
diff --git a/tools/static-assets/skel-react/.meteor/packages b/tools/static-assets/skel-react/.meteor/packages
@@ -0,0 +1,21 @@
+# 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
+reactive-var            # Reactive variable for tracker
+
+standard-minifier-css   # CSS minifier run for production mode
+standard-minifier-js    # JS minifier run for production mode
+es5-shim                # ECMAScript 5 compatibility for older browsers
+ecmascript              # Enable ECMAScript2015+ syntax in app code
+shell-server            # Server-side component of the `meteor shell` command
+
+autopublish             # Publish all data to the clients (for prototyping)
+insecure                # Allow all DB writes from clients (for prototyping)
+static-html             # Define static page content in .html files
+react-meteor-data       # React higher-order component for reactively tracking Meteor data
diff --git a/tools/static-assets/skel-react/.meteor/platforms b/tools/static-assets/skel-react/.meteor/platforms
@@ -0,0 +1,2 @@
+server
+browser
diff --git a/tools/static-assets/skel-react/client/main.css b/tools/static-assets/skel-react/client/main.css
@@ -0,0 +1,4 @@
+body {
+  padding: 10px;
+  font-family: sans-serif;
+}
diff --git a/tools/static-assets/skel-react/client/main.html b/tools/static-assets/skel-react/client/main.html
@@ -0,0 +1,7 @@
+<head>
+  <title>~name~</title>
+</head>
+
+<body>
+  <div id="react-target"></div>
+</body>
diff --git a/tools/static-assets/skel-react/client/main.js b/tools/static-assets/skel-react/client/main.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Meteor } from 'meteor/meteor';
+import { render } from 'react-dom';
+import App from '/imports/ui/App'
+
+Meteor.startup(() => {
+  render(<App />, document.getElementById('react-target'));
+});
diff --git a/tools/static-assets/skel-react/imports/api/links.js b/tools/static-assets/skel-react/imports/api/links.js
@@ -0,0 +1,3 @@
+import { Mongo } from 'meteor/mongo';
+
+export default Links = new Mongo.Collection('links');
diff --git a/tools/static-assets/skel-react/imports/server/fixtures.js b/tools/static-assets/skel-react/imports/server/fixtures.js
@@ -0,0 +1,32 @@
+import { Meteor } from 'meteor/meteor';
+import Links from '../api/links';
+
+Meteor.startup(() => {
+  // if the Links collection is empty
+  if (Links.find().count() === 0) {
+    const data = [
+      {
+        title: 'Do the Tutorial',
+        url: 'https://www.meteor.com/try',
+        createdAt: new Date(),
+      },
+      {
+        title: 'Follow the Guide',
+        url: 'http://guide.meteor.com',
+        createdAt: new Date(),
+      },
+      {
+        title: 'Read the Docs',
+        url: 'https://docs.meteor.com',
+        createdAt: new Date(),
+      },
+      {
+        title: 'Discussions',
+        url: 'https://forums.meteor.com',
+        createdAt: new Date(),
+      },
+    ];
+
+    data.forEach(link => Links.insert(link));
+  }
+});
diff --git a/tools/static-assets/skel-react/imports/ui/App.js b/tools/static-assets/skel-react/imports/ui/App.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Hello from './Hello';
+import Info from './Info';
+
+const App = () => (
+  <div>
+    <h1>Welcome to Meteor!</h1>
+    <Hello />
+    <Info />
+  </div>
+);
+
+export default App;
diff --git a/tools/static-assets/skel-react/imports/ui/Hello.js b/tools/static-assets/skel-react/imports/ui/Hello.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+export default class Hello extends Component {
+  state = {
+    counter: 0,
+  }
+
+  render() {
+    const { counter } = this.state;
+
+    return (
+      <div>
+          <button onClick={() => this.setState({ counter: counter + 1 })}>Click Me</button>
+          <p>You've pressed the button {counter} times.</p>
+      </div>
+    );
+  }
+}
diff --git a/tools/static-assets/skel-react/imports/ui/Info.js b/tools/static-assets/skel-react/imports/ui/Info.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import Links from '../api/links';
+
+class Info extends Component {
+  render() {
+    const { links } = this.props;
+    return (
+      <div>
+        <h2>Learn Meteor!</h2>
+        <ul>
+          {links.map(link => (
+            <li key={link._id}>
+              <a href={link.url} target="_blank">{link.title}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default InfoContainer = withTracker(() => {
+  return {
+    links: Links.find().fetch(),
+  };
+})(Info);
diff --git a/tools/static-assets/skel-react/package.json b/tools/static-assets/skel-react/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "~name~",
+  "private": true,
+  "scripts": {
+    "start": "meteor run",
+    "test": "meteor test --once --driver-package meteortesting:mocha",
+    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
+    "visualize": "meteor --production --extra-packages bundle-visualizer"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.0.0-beta.55",
+    "meteor-node-stubs": "^0.4.1",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  },
+  "meteor": {
+    "mainModule": {
+      "client": "client/main.js",
+      "server": "server/main.js"
+    },
+    "testModule": "tests/main.js"
+  }
+}
diff --git a/tools/static-assets/skel-react/server/main.js b/tools/static-assets/skel-react/server/main.js
@@ -0,0 +1 @@
+import '/imports/server/fixtures';
diff --git a/tools/static-assets/skel-react/tests/main.js b/tools/static-assets/skel-react/tests/main.js
@@ -0,0 +1,20 @@
+import assert from "assert";
+
+describe("~name~", function () {
+  it("package.json has correct name", async function () {
+    const { name } = await import("../package.json");
+    assert.strictEqual(name, "~name~");
+  });
+
+  if (Meteor.isClient) {
+    it("client is not server", function () {
+      assert.strictEqual(Meteor.isServer, false);
+    });
+  }
+
+  if (Meteor.isServer) {
+    it("server is not client", function () {
+      assert.strictEqual(Meteor.isClient, false);
+    });
+  }
+});