Let's start with the App.js file; we'll render a simple RegionsInformationTable. We are extending a React class called PureComponent; we'll explain what this implies later. Your own components should have names starting with upper case to distinguish them from HTML names, which should go in lower case. Every component should have a .render() method that produces whatever HTML is needed; there are more methods you can use for this, as we'll see:

/* @flow */

import React from "react";
import { RegionsInformationTable } from "./components/regionsInformationTable";

class App extends React.PureComponent<{}> {
    render() {
        return <RegionsInformationTable />;
    }
}

export default App;

You may be asking yourself: why go to the bother of creating an <App> component that doesn't do anything but produce a <RegionsInformationTable> component? Why not use the latter directly? We'll get to the reason why in the upcoming sections; we'll want the <App> component to do more, such as defining routing, managing a store, and so on. So, even in this particular small example, it's overkill – it's a pattern we want to keep.

You'll also want to notice that we wrote React.PureComponent<{}>, and this was to let Flow know that our component doesn't need either properties or state. In later sections we'll look at more examples that require better type definitions.