NPM + React + TypeScript with AMD modules

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

Amid · Accepted Answer · 2016-04-08 13:35:28Z

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.

edited Apr 8, 2016 at 13:35

answered Apr 8, 2016 at 13:30

Amid

22.5k6 gold badges63 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liero Over a year ago

I'm already using requirejs to load amd modules. isn't it weird to use systemjs as well?

Amid Over a year ago

I am sure you can use requirejs instead if you need to. I agree that merging two loaders together is bad idea. There a plenty tutorials out there on how to use typescript with requirejs. The idea is the same.

Collectives™ on Stack Overflow

NPM + React + TypeScript with AMD modules

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related