Visual Studio上でTypeScript JSXを使ってReact.js「ローカルにreact.jsのファイルを抱え込もう」

先ほどは、CDN上のReactを読み込みましたが、手元にreactのjsファイルを持ってくる場合。

bowerを使いました。（Visual Studio関係ない）

npm install bower -g

と入力してbowerを入れます。bowerはgitを使うみたいなので、gitをインストールしてPATHを通しておきます。

TypeScriptのプロジェクトを作ってパッケージマネージャーコンソールでプロジェクトのディレクトリに移動して以下のコマンドを打ち込んで必要なファイルを仕入れます。

tsd install react --save

bower install react

これでtypingsフォルダとbower_componentsフォルダが作られた、そこにd.tsファイルやjsファイルが追加されます。ソリューションエクスプローラですべてのファイルを表示するモードにして、typingsとbower_componentsフォルダをプロジェクトに含めます。

プロジェクトでTypeScriptのJSXのコンパイルを有効にして以下のようなapp.tsxを用意してお試し。

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

var reactElement = React.createElement('h1', { className: 'header' }, 'これはReactです');
ReactDOM.render(reactElement, document.getElementById('content'));

HTMLはこんな感じで

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
</head>
<body>
    <div id="content"></div>

    <script src="bower_components/react/react.min.js"></script>
    <script src="bower_components/react/react-dom.min.js"></script>
    <script src="bower_components/react/react-with-addons.min.js"></script>
    <script src="app.js"></script>
</body>
</html>