JSPM + TypeScript + React

Posted on   |   In

基础项目配置

原文地址:
https://hansrwindhoff.wordpress.com/2015/10/28/jspm-typescript-reactjs-in-es2015-es6/

  1. node.js
  2. typescript -g
  3. typings -g
  4. lite-server
  5. concurrently

Create a folder, change into it.

npm init (choose the defaults)

npm install jspm –save-dev

jspm init

Follow the prompts and choose the defaults, except when asked for which transpiler, choose typescript.

jspm install react react-dom

typings install react react-dom –ambient –save

Create an index.html file and add these lines, wordpress will not let me insert html as raw text here so you could copy it from the source files here .

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jspm reactjs and ts</title>
    <script type="text/javascript" src="jspm_packages/system.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script type="text/javascript">
        System.import('app/main');
    </script>
</head>

<body>
    <div id="targetreact"></div>
</body>

</html>

Create a folder called ‘app’ and change into it; create a file called main.tsx, this is the jsx typescript file type.
Typescript can transpile jsx expressions and also statically type these. Wow!!! …insert these lines, get them as text from here:

/// <reference path="./../typings/browser.d.ts" />
import * as React from 'react';
import * as ReactDOM  from 'react-dom';

interface MyFirstProps {
  name: string;
  zip: number;
}
class MyFirst extends React.Component<MyFirstProps,{}>{
  render (){
    return <div> Hello {this.props.name} {this.props.zip}
    <div>steps to get this going: <br/>
    sudo npm i tsd typescript serve -g<br/>
    npm init<br/>
    npm i jspm --save-dev<br/>
    <br/>
    jspm init (choose typescript as transpiler)<br/>
    jspm install react react-dom<br/>

    <br/>
    tsd init<br/>
    tsd install react react-dom --save<br/>

    <br/>
    create : index.html app/main.tsx tsconfig.json<br/>
    transpile main.tsx<br/>
    serve and open localhost:3000<br/>
    <br/>

    </div></div>
  }
}
ReactDOM.render(<MyFirst name="hans" zip={424242} /> , document.getElementById("targetreact"));

Create a file called tsconfig.json (under app folder), this is the file that configures the typescript compiler, enter this json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "jsx": "react",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

package.json scripts:

{
  "name": "react-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w --jsx react -p app",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0"
  },
  "jspm": {
    "dependencies": {
      "react": "npm:react@^0.14.7",
      "react-dom": "npm:react-dom@^0.14.7"
    },
    "devDependencies": {
      "typescript": "npm:typescript@^1.6.2"
    }
  }
}