Merge pull request #144 from Microsoft/update-jsx-sample

Update jsx sample with current react version, modern types

Author: mhegazy

jsx/README.md

@@ -10,11 +10,11 @@ npm install
 
 ## Compile
 ```
-node node_modules/typescript/bin/tsc
+npm run build
 ```
 
 ## Start http server
 ```
-node node_modules/http-server/bin/http-server -o
+npm start
 ```
 

jsx/package.json

@@ -5,9 +5,8 @@
     "main": "app.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "postinstall": "node_modules/.bin/tsd install",
         "build": "node node_modules/typescript/bin/tsc",
-        "run": "node node_modules/http-server/bin/http-server -o"
+        "start": "node node_modules/http-server/bin/http-server -o"
     },
     "repository": {
         "type": "git",
@@ -29,11 +28,14 @@
     "devDependencies": {
         "typescript": "latest",
         "http-server": "0.8.0",
-        "tsd":  "latest"
+        "@types/jquery": "^2",
+        "@types/react-dom": "^15",
+        "@types/react": "^15"
     },
     "dependencies": {
         "jquery": "^2.1.4",
-        "react": "^0.13.3",
+        "react": "^15.6.1",
+        "react-dom": "^15.6.1",
         "requirejs": "^2.1.20"
     }
 }

jsx/require-config.js

@@ -1,6 +1,7 @@
 requirejs.config({
     paths: {
-        react: ['/node_modules/react/dist/react'],
-        jquery: ['/node_modules/jquery/dist/jquery']
+        "react": ['/node_modules/react/dist/react'],
+        "react-dom": ['/node_modules/react-dom/dist/react-dom'],
+        "jquery": ['/node_modules/jquery/dist/jquery']
     }
 });

jsx/src/app.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import * as $ from 'jquery';
 import {Greeter as Greetifier, GreeterProps as GreeterProps} from 'greeter';
 
@@ -16,6 +17,6 @@ $(() => {
         whomToGreet: 'world!',
     };
 
-    React.render(<Greetifier {...props} />, $('#output').get(0));
+    ReactDOM.render(<Greetifier {...props} greeting={getRandomGreeting} />, $('#output').get(0));
 });