React + TypeScript + Webpackの最小構成 #React

※更新履歴

webpack2-rc & TS2.1 & @types対応
webpack2 stable & TS2.3 対応
React16-beta & TS2.4 対応

問題提起

React始めたいですよね！
でも今時、型チェックのない言語とか使いたくないですよね！

TypeScriptコンパイラもjsxに対応したし、Angular2でもTypeScriptが標準っぽいし、
とりあえずこれから始めるならTypeScriptでしょう。

ということで、主にReact初学者向けに最小構成を用意してみました。
間違っている点があればご指摘いただけると嬉しいです。

環境

NodeJS 8.2
React 16.0-beta
TypeScript 2.4
webpack 3.4

構成

今回の構成は以下です。

$ tree .
.
├── index.html
├── package.json
├── src
│   ├── Hello.tsx
│   └── Index.tsx
├── tsconfig.json
├── webpack.config.dev.js
└── webpack.config.prod.js

サンプルコードはこちら。
https://github.com/uryyyyyyy/react-redux-sample/tree/helloWorld

package.json

{
  "name": "react-typescript-redux",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack --colors --config ./webpack.config.dev.js",
    "build:prod": "webpack --config ./webpack.config.prod.js"
  },
  "devDependencies": {
    "@types/react": "15.0.39",
    "@types/react-dom": "15.5.1",
    "ts-loader": "2.3.2",
    "typescript": "2.4.2",
    "webpack": "3.4.1"
  },
  "dependencies": {
    "react": "16.0.0-beta.1",
    "react-dom": "16.0.0-beta.1"
  }
}

webpack
- JSのビルドツール。import/exportやrequire()をブラウザ用にバンドルしてくれたりする。
ts-loader
- webpackの中でts(tsx)ファイルをjsに変換してくれるツール
@types
- TypeScript用の型定義ファイル

npm run build とすれば、開発用にSourceMap付きでビルドされます。
npm run build:prod とすれば、プロダクション向けにminifyしてビルドされます。

webpack.config.dev.js


module.exports = {
  entry: './src/Index.tsx',
  output: {
    filename: './dist/bundle.js'
  },

  devtool: 'source-map',

  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {loader: 'ts-loader'}
        ]
      }
    ]
  }
};

行数多くないですね。
src/Index.tsx を起点として、.ts, .tsx, .jsファイルをビルドしてくれます。
あとソースマップも吐いてくれます。

（webpack.config.prod.jsはここでは省略しますが、本番向けのminify設定などが入っていて、sourcemapは外してあります。）

`@types`

型定義については、TypeScript2.0系から、npmパッケージとして型定義が提供されるようになりました。これにより、これまでのtsdやtypingsが不要になります。
バージョン管理もnpmに任せられて楽ですね。

tsconfig.json

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noUnusedLocals" : true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "lib": ["dom", "ES2017"],
    "module": "ES2015",
    "target": "es5",
    "jsx": "react"
  }
}

TypeScriptのコンパイルをするときに必要な設定ファイルです。
jsxを有効にするか、対象とするファイルはどれか、null Checkなどを厳密にするか、などを見てくれます。
細かいところは今回は割愛しますが、特にブラウザにおいてはES Modulesが主流なので、 "module": "ES2015" で動くようにしておきましょう。

長かったですが設定ファイルは以上です。

source

index.html

<!DOCTYPE html>
<html>
<head>
  <title>React minimal</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>

src/Index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Hello from "./Hello";

ReactDOM.render(<Hello content="hello world"/>, document.getElementById('app'));

ここでは、HelloというReact Componentを、idがappのDOMに配置するように書いています。
DOMに設置するときはReact-domを使います。（Reactはcoreと、それぞれの実行環境によってパッケージが分かれています。例えばReact-Nativeなどですね。）

src/Hello.tsx

import * as React from 'react';

export interface Props {
    content: string;
}

export default class MyComponent extends React.Component<Props, {}> {
    render() {
        return <div>{this.props.content}</div>
    }
}

単純な例です。
Prosが癖がありますが、上流コンポーネント（今回はIndex.tsx）から、contentフィールドにstring値が渡ってくるので、それを表示するだけの簡単なコンポーネントです。

Buildしてみる

まずは npm install
これでreactなどのパッケージと型定義ファイルがダウンロードされます。

そして、以下を入力。

$ npm run build
...

ts-loader: Using typescript@2.4.2 and ~~/react-redux-sample/tsconfig.json
Hash: 0cf7eff1bfee20083dba
Version: webpack 3.4.1
Time: 2541ms
               Asset    Size  Chunks                    Chunk Names
    ./dist/bundle.js  761 kB       0  [emitted]  [big]  main
./dist/bundle.js.map  906 kB       0  [emitted]         main
...

こんな感じになれば成功です。dist/bundle.js と、そのソースマップが吐かれます。
あとはindex.htmlを開くと、bundle.jsが読み込まれて、画面に「hello world」が表示されます。

consoleを開くと、source mapでtsのコードが追えることが確認できます。

まとめ

今からReact試すならTypeScriptですよね！
どんどんReactしていきましょう。