試行錯誤した結果です。

Reactは言わずと知れたFacebookが作ってるライブラリですが、最近Visual Studio 2015 Update 1でtsxというTypeScriptでJSXをサポートするみたいなものが出てきました。今回はこれを使って遊んでみたいと思います。

node.jsのインストール

NuGetから入る型定義ファイルが、どうもイマイチうまくいかなかったのでnode.jsを入れてtsdコマンドを使うためにNode.jsを入れます。

Node.js

上記リンクから最新版を入れましょう。入れたら以下のコマンドを打ち込んでtsdを入れておきます。

npm install tsd -g

TypeScriptのプロジェクトの作成

TypeScript を使用した HTML アプリケーションを新規作成します。名前はReactHelloWorldにします。

以下のファイルをさくっと消します。

app.css
app.ts
index.html

プロジェクトの設定

プロジェクトのプロパティを開いて、TypeScriptビルドを開いて以下の項目を変更します。

TSXファイルでのJSXコンパイルを「応答」に変更
モジュールシステムを「CommonJS」に変更

型定義ファイルの取得

パッケージマネージャーコンソールを起動してプロジェクトフォルダに移動してtsd install react-globalと打ち込んで型定義ファイルを取得します。

PM> cd .\ReactHelloWorld
PM> tsd install react-global --save

 - react    / react-global                         
   -> react > react                                
   -> react > react-dom                            
   -> react > react-addons-create-fragment         
   -> react > react-addons-css-transition-group    
   -> react > react-addons-transition-group        
   -> react > react-addons-linked-state-mixin      
   -> react > react-addons-perf                    
   -> react > react-addons-pure-render-mixin       
   -> react > react-addons-test-utils              
   -> react > react-addons-update                  

>> running install..

>> written 11 files:

    - react/react-addons-create-fragment.d.ts
    - react/react-addons-css-transition-group.d.ts
    - react/react-addons-linked-state-mixin.d.ts
    - react/react-addons-perf.d.ts
    - react/react-addons-pure-render-mixin.d.ts
    - react/react-addons-test-utils.d.ts
    - react/react-addons-transition-group.d.ts
    - react/react-addons-update.d.ts
    - react/react-dom.d.ts
    - react/react-global.d.ts
    - react/react.d.ts

型定義ファイルをプロジェクトに追加します。

f:id:okazuki:20151226124604p:plain

ファイルの作成

TypeScript JSXファイルをhelloworld.tsxという名前で作成します。そして、tsd.d.tsをドラッグしてreferenceタグを追加します。

そして、以下のようなHello worldを追加します。

/// <reference path="typings/tsd.d.ts" />

interface HelloWorldProps {
    name: string;
    age: number;
}

class HelloWorldComponent extends React.Component<HelloWorldProps, any> {
    render() {
        return <div>Name: {this.props.name}, Age: {this.props.age}</div>;
    }
}

ReactDOM.render(
    <HelloWorldComponent name="okazuki" age={34} />,
    document.getElementById("content"));

次に、index.htmlを作成して以下のような感じにします。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   <meta charset="utf-8" />
</head>
<body>
    <div id="content"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <script src="helloworld.js"></script>
</body>
</html>