NPM + React + TypeScript with AMD modules - reactjs

Question

I'm trying to setup dev environment for app written in typescript using react.
I alreally have existing typescript code that compiles to ES5 and AMD modules.
I would like to avoid any js transpilation in the browser. Please notice, that I don't need to use babel to transpile jsx, since typescript compiles tags into React.createElement in tsx files.
I've done the usual:
npm install react -save
npm install react-dom -save
npm install typescript -save-dev
npm install typings -save-dev
typings install react --ambient --save
typings install react-dom --ambient --save
now, I have two questions:
how to correctly import/require the react and react-dom in my tsx files which compiles to ES5/AMD?
currently I'm just doing this:
/// <reference path="../../typings/browser/ambient/react-dom/index.d.ts" />
/// <reference path="../../typings/browser/ambient/react/index.d.ts" />
export class MyComponent extends __React.Component<any, {}> {
public render() {
return (
<h1>MyCompoentnt</h1>
);
}
}
however the compilations fails with error TS2304: Cannot find name 'React'.
how to include react.js and react-dom.js in my app? I quess some transpilation or browserification will be needed. Or should I just and them to index.html?
<script src="scripts/react.js"></script>
<script src="scripts/react-dom.js"></script>
<script src="scripts/require.min.js" data-main="scripts/app"></script>
here is my package.json:
{
"name": "myhtmlapp",
"version": "1.0.0",
"description": "react test app",
"main": "index.js",
"dependencies": {
"jquery": "^2.2.3",
"react": "^15.0.0",
"react-dom": "^15.0.0"
},
"devDependencies": {
"browser-sync": "^2.11.2",
"typescript": "^1.8.9",
"typings": "^0.7.12"
},
"scripts": {
"watch:typescript": "tsc --p ./appscripts -w",
"watch:css": "browser-sync start --server --files .wwwroot/css/*.css",
"compile": "tsc --p ./appscripts",
"test": "echo \"Error: no test specified\" "
},
"keywords": [],
"author": "",
"license": "ISC"
}
here is entire app: https://onedrive.live.com/redir?resid=51A46BBA4E9EF07E!263323&authkey=!AKQ6FqjE2W2YVBo&ithint=file%2czip

Answer 1

I am pretty sure there a several ways to do this. Below I am posting my way of getting things you have mentioned play together:
To import react I use standard import, like this:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export class MyComponent extends React.Component<any, any>
{
//...
}
To 'inculde' react into the application I use systemjs as module loader (due to some reasons that goes beyong the question I cant use browserify, but pretty sure it can be used to do the same). You will need to install systemjs via npm. Then instruct it to know where to look for react. To do this put the following script in your index.html:
<script src="systemjs/dist/system.src.js"></script>
<script>
System.config({
baseURL: './lib',
paths: {
"react*": 'react/dist/react-with-addons'
}
});
System.defaultJSExtensions = true;
</script>
Where react/dist/react-with-addons is a path (without '.js' extension) to the dist of react-with-addons.js. And systemjs/dist/system.src.js - path to systemjs dist.
Hope this helps.