환경

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

항목 만들기

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

tsx 만들기

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

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

import React from "react";

type Foo = {
    bar: string;
}

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

export default App;

정적 입력 생성

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

감상