TypeScriptでReact 2

TypeScriptでReactアプリを作成します。

環境

$ yarn --version
1.12.3
$ create-react-app --version
2.1.8

プロジェクト作成

create-react-appを使用して作成。

$ create-react-app calc-tsx-app --typescript
$ cd calc-tsx-app
$ rm .\src\*

tsx作成

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App bar="Hello!" />, document.getElementById('root'));

src/App.tsx

import React from "react";

type Foo = {
    bar: string;
}

class App extends React.Component<Foo, {}> {
    render() {
        return <span>{this.props.bar}</span>
    }
}

export default App;

静的なinput作成

src/App.tsx

import React from "react";

type Foo = {
    bar: string;
}

interface expression {
    n: number;
    x: number;
    y: number;
}

class App extends React.Component<Foo, {}> {
    expressions: expression[] = [
        { n: 1, x: 0, y: 1 },
        { n: 2, x: 2, y: 3 },
        { n: 3, x: 4, y: 5 },
    ];

    constructor(props: any) {
        super(props);
        this.state = {
            list: this.expressions
        };
    }

    render() {
        return this.expressions.map((d, i) =>
            <div key={d.n}>
                <input type="number" value={d.x} />
                <span>+</span>
                <input type="number" value={d.y} />
                <span>=</span>
                <input type="number" value={d.x + d.y} />
            </div>
        )
    }
}

export default App;

yarn start

動的なinputは次回。

感想

• interfaceとtype aliasはどちらを使う？
• map()内でkeyを設定する場合、親のdivに設定すべきか、あるいは、子のinputに設定すべきか？
• コンポーネントを抽出すべき？

以上