昨日、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です。
簡単すぎる。。