はじめに

Reactをやりはじめてimport なにがしみたいなモジュールを取り込むやり方に憧れて、そういう環境作れないかと試行錯誤した結果です。gruntとかは毎回準備するにはヘビーなので入れてません。

ということで備忘録開始。

1回だけやればいい作業

node.js関連

node.jsを入れます。

コンソールで以下のコマンドをたたいて必要なものを入れておきます。

node install -g tsd
node install -g browserify

プロジェクト作成単位にやる作業

プロジェクトの作成と設定

TypeScriptを使用したHTMLアプリケーションを作成します。app.tsは邪魔なので消しておきます。

プロジェクトのプロパティでTypeScriptビルドのTSXファイルでのJSXコンパイルを応答に変更して、モジュールシステムをCommonJSにしておきます。

ライブラリのインストール

パッケージマネージャーコンソールを開いて以下のコマンドを打ち込んで必要なライブラリを突っ込みます。

PM> cd プロジェクト名
PM> npm install react
PM> npm install react-dom

次にTypeScriptの型定義ファイルを突っ込みます。

PM> tsd install react
PM> tsd install react-dom

ビルドイベントの設定

TypeScriptがコンパイルした結果がそのままブラウザで読み込める形になってないのでbrowserifyを使って変換します。プロジェクトのプロパティのビルドイベントでビルド後のイベントのコマンドラインに以下の記述を追加します。

cd $(ProjectDir)
browserify scripts/app.js -o bundle.js

エントリポイントになるtsxの作成

scripts/app.tsxという名前で作っておきます。

その他tsxの作成

今回はHello worldを表示するだけのHelloWorldというコンポーネントをscripts/helloworld.tsxに作ります。

import * as React from 'react';

export class HelloWorld extends React.Component<{}, {}> {
    render() {
        return <h1>Hello world</h1>;
    }
}

app.tsxにこれを取り込んでレンダリングする処理を書きます。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as Components from './helloworld';

ReactDOM.render(<Components.HelloWorld />,
    document.getElementById('content'));

HTMLの編集

ビルドするとbundle.jsができてるはずなので、それを取り込みます。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>