[React][TypeScript] Hello World的なもの(1)は、動きもなくてつまらないので、他でも作ってるボタンを押したら「こんにちは！」って表示するやつを作ってみた。

003

コンポーネントにする必要なさそうなんだけど、「ボタンをおして！」を表示しているコンポーネントを作る。(Label.tsx)

import * as React from 'react';

export interface LabelProps {
    text:string;
}

// ラベルのコンポーネント
export class Label extends React.Component<LabelProps, {}>  {
    render() {
        return <span>{this.props.text}</span>;
    }
}

React.Componentを継承してLabelコンポーネントを作る。React.Componentのテンプレートで指定する1番目の型がpopsの型で2番目の型がstateの型になる。

ボタンとラベルコンポーネントがあるルートになるAppコンポーネントを作る。(App.tsx)

import * as React from 'react';
import { Label } from "./Label";

interface AppState {
    message:string;
}

export class App extends React.Component<{}, AppState>  {
    constructor(props:any) {
        super(props);
        this.state = {
            message:"ボタンを押して！"
        };

        this.onClick = this.onClick.bind(this);
    }

    // ボタンを押した時の処理
    onClick(e:any) {
        this.setState({message:"こんにちは！"});
    }
    render() {
        return <div>
            <p><Label text={this.state.message} /></p>
            <p><button type="button" onClick={this.onClick}>Button</button></p>
            </div>;
    }
}

ボタンを押した時の処理でthis.setStateをして表示するメッセージを更新している。
これを表示するhtmlファイルを作る。(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
    <div id="root"></div>
    <script src="dist/app.js"></script>
</body>
</html>

htmlのrootにAppを割り当てるところを用いする。(index.tsx)

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from "./App";

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

ソース以外のビルド環境は[React][TypeScript] Hello World的なもの(1)で作ったのを使う。

(追記)
ソースを置いといた。