はじめに
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><htmllang="en"><head><metacharset="utf-8" /><title>TypeScript HTML App</title><linkrel="stylesheet"href="app.css"type="text/css" /></head><body><h1>TypeScript HTML App</h1><divid="content"></div><scriptsrc="bundle.js"></script></body></html>
実行すると以下のようにHello worldが表示されたら成功です。
