Parcel触って見た（React × typescript） #React

昨日、Parcel触ってみた（React編）を書いんたんですが、ちょうど昨日Parcelがtypescriptに対応したので、React × typescriptをParcelで書いて見ます。

まずはReactとtypescriptをインストールします。

# まだ入れてなければparcelもインストール
npm install -g parcel-bundler

npm install --save-dev typescript

npm isntall --save react react-dom @types/react @types/react-dom

次にtsconfig.jsonを準備します。

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react"
  }
}

そしてindex.html

index.html


<html>
  <body>
    <div id="app"></div>
    <script src="./assets/ts/index.tsx"></script>
  </body>
</html>

エントリーポイント

index.ts

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

ReactDOM.render(<Application />, document.getElementById('app'));

コンポーネント

Application.tsx

import * as React from 'react';

export interface HelloProps { name: string; }

class Application extends React.Component<HelloProps, {}> {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
      </div>
    );
  }  
}

export default Application;

そして実行。

parcel ./index.html

HMRをしたい場合はParcel触ってみた（React編）と同じように react-hot-loader の対応でOKです。

簡単すぎる。。