--- title: React+Typescript+Webpackを試してみた tags: TypeScript webpack JavaScript React author: shwld slide: false --- 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オプションを追加する ``` json:tsconfig.json { "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "outDir": "built", "rootDir": ".", "sourceMap": false, "jsx": "react" }, "exclude": [ "node_modules" ] } ``` webpack.configを設定する ``` js: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っぽいものを書いてみる ``` tsx:index.tsx /// /// import * as React from 'react' import * as ReactDOM from 'react-dom' var CommentBox = React.createClass({ render: function() { return (
Hello, world! I am a CommentBox.
); } }); ReactDOM.render( , document.getElementById('content') ); ``` index.htmlを簡単に作る ``` html:index.html Hello React
``` ## 実行 ``` webpack ``` ブラウザで`index.html`を開く React.jsいつか使いたい 参考とか http://ishikuro.hateblo.jp/entry/2015/09/01/124613 http://qiita.com/vvakame/items/38b953ab0f4de63cce8b