かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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>

これで、ローカルに全部必要なファイルを抱え込んだプロジェクトができました。