Merge pull request #2 from Xitstrategies/master

Break out world to demonstrate multiple files loading

README.md

@@ -2,3 +2,7 @@
 
 Clone this repo and run `npm install` then simply open `index.html`.
 
+Click World to see the onClick event fire.
+
+Noteworthy npm package is steal-jsx
+also please remember that you need to put the "!" after any non js files.

index.js

@@ -1,9 +1,11 @@
-import React from "react";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import World from './world.jsx';
 
 let HelloMessage = React.createClass({
-  render: function() {
-    return <div>Hello {this.props.name}!</div>;
+  render() {
+    return <div>{this.props.name}<World />!</div>;
   }
 });
 
-React.render(<HelloMessage name="World" />, document.getElementById("app"));
+ReactDOM.render(<HelloMessage name="Hello " />, document.getElementById('app'));

package.json

@@ -9,13 +9,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "react": "^0.13.3",
-    "steal": "^0.10.5"
+    "react": "^0.14.8",
+    "react-dom": "^0.14.8",
+    "steal": "^0.15.3"
   },
   "system": {
     "transpiler": "babel",
     "babelOptions": {
       "blacklist": []
     }
+  },
+  "devDependencies": {
+    "babel-core": "^6.7.4",
+    "steal-jsx": "0.0.0"
   }
 }

world.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default class World extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            count: 0,
+            message: 'World'
+        };
+    }
+    clicked() {
+        const count = this.state.count + 1;
+        this.setState({message: `World Clicked ${count}`,count});
+    }
+    render() {
+        const style = {
+            display: 'inline-block'
+        };
+        return <div style={style} onClick={()=>this.clicked()}>{this.state.message}</div>;
+    }
+}