試行錯誤した結果です。
Reactは言わずと知れたFacebookが作ってるライブラリですが、最近Visual Studio 2015 Update 1でtsxというTypeScriptでJSXをサポートするみたいなものが出てきました。今回はこれを使って遊んでみたいと思います。
node.jsのインストール
NuGetから入る型定義ファイルが、どうもイマイチうまくいかなかったのでnode.jsを入れてtsdコマンドを使うために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型定義ファイルをプロジェクトに追加します。
ファイルの作成
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><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title><metacharset="utf-8" /></head><body><divid="content"></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script><scriptsrc="helloworld.js"></script></body></html>
実行して動作確認
実行すると以下のような感じにばっちり表示されました。
