React+Typescript+Webpackを試してみた #JavaScript

angularjsしか使ったことがなかったのですが、reactが小回り効きそうでよさそうだったのでtypescriptと組み合わせての導入を試してみました。

javascript関連勉強中。

試した結果は以下のリポジトリに格納しています。
https://github.com/shwld/react-typescript-webpack

React

コンポーネント単位に実装を分離でき、再利用しやすい。
仮想DOMで差分のみを画面更新するのでパフォーマンスが出る。
みたいな認識。

Typescript

javascriptのスーパーセット。
javascriptをそのまま拡張子を置き換えても動き、
クラスやenum、ES6の構文などに対応した言語。
静的型付により、visual studio codeと組み合わせると型チェックがいい感じ。

Webpack

Webアプリに必要なコンポーネントの依存関係を解決して、配布用にまとめることができるツール。
typescriptのコンパイルなども行いつつ、依存関係を解決して一つのファイルにまとめるとかができたり、すごくいろいろできるみたい。

試しに使ってみる

npm init

Typescriptをインストールする

1.6.0でreactのjsxに対応したらしいのでバージョンに注意
インストールするとtscコマンドが使えるようになる

npm install typescript -g
tsc -v
> message TS6029: Version 1.7.5

tsconfig.jsonを作成する
(コンパイル設定などを記述するファイル)

tsc --init

型定義ファイルを管理する`dtsm`をインストールする

dtsmは日本製の型定義ファイル管理ツールで、npmのように管理できるので使いやすい

npm install dtsm -g

dtsm.jsonを作成する
(型定義のバージョン情報などを保持するファイル)

dtsm init

Webpackをインストールする

npm install webpack -g

webpackでtypescriptをコンパイルするためのloaderをインストールする

npm install ts-loader --save

Reactをインストールする

npm install react react-dom --save

ReactのTypescript型定義ファイルをインストールする

dtsm install react react-dom superagent --save

tsconfig.jsonにjsxオプションを追加する

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "outDir": "built",
        "rootDir": ".",
        "sourceMap": false,
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ]
}

webpack.configを設定する

webpack.config.js

module.exports = {
  entry: [
    './index.tsx'
  ],
  output: {
    path: 'built',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.tsx', '.ts', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.ts(x?)$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

index.tsxにreactっぽいものを書いてみる

index.tsx

/// <reference path="typings/react/react.d.ts" />
/// <reference path="typings/react/react-dom.d.ts" />
import * as React from 'react'
import * as ReactDOM from 'react-dom'
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

index.htmlを簡単に作る

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="built/bundle.js"></script>
  </body>
</html>

実行

webpack

ブラウザでindex.htmlを開く

React.jsいつか使いたい

参考とか
http://ishikuro.hateblo.jp/entry/2015/09/01/124613
http://qiita.com/vvakame/items/38b953ab0f4de63cce8b

React+Typescript+Webpackを試してみた