React My First Component


import React, { Component } from 'react';
import ReactDOM from 'react-dom';

interface AppProps {
    name: string;
interface AppState {
    words: string[];

class App extends Component<AppProps, AppState> {
    constructor() {
        this.state = {
            words: ['foo', 'bar']

    render() {
        const { name } = this.props;
        return (<h1>Hello {name}!</h1>);

const root = document.getElementById('root');
ReactDOM.render(<App name="Foo Bar" />, root);

When using TypeScript with React, once you've downloaded the React DefinitelyTyped type definitions (npm install --save @types/react), every component will require you to add type annotations.

You do this like so:

class App extends Component<AppProps, AppState> { }

where AppProps and AppState are interfaces (or type aliases) for your components' props and state respectively.