かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Visual Studio上のTypeScript JSXでReactのHelloWorldしてみた

試行錯誤した結果です。

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>

実行して動作確認

実行すると以下のような感じにばっちり表示されました。

f:id:okazuki:20151226125414p:plain