Help us understand the problem. What is going on with this article?

React+Typescript+Webpackを試してみた

More than 3 years have passed since last update.

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

shwld
主に開発で得られた知見を記録していきます。 記載された内容は、所属する企業や団体の公式見解ではありません。
https://shwld.net
mof-mof
「つくって人をしあわせにする」をビジョンにAIチャットボットや開発チームレンタル等のサービスを提供している渋谷のIT企業です
https://www.mof-mof.co.jp/about
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away