flowtypeでStateless Functions Componentsを使う

Stateless Functions Components(SFC)とは、インスタンスも状態も持たないただの関数である。
界隈的には、コンポーネントの組み立てには基本SFCを使うとのこと。
利点については、以下のスライドがくわしい。

Reactの最新動向とベストプラクティス // Speaker Deck

flowtypeで、SFCの型推論を利用するには、普通の関数に型を付けるのと同様にするのでよい。それで、コンポーネント使用時に型推論が効くようになる。
どうやら今年の2月には利用可能だったようだが、ドキュメントに反映されたのが6月だったので気づかなかった。

type Props = {
  name: string
};

const Hello = ({name}: Props) => (
  <div>Hello {name}</div>
);

ReactDOM.render(<Hello name="World"/>, mountNode);

これでPropsのチェックができる。
例えば、

<Hello/>

とPropsを渡さなかった場合、flowtypeが型エラーを起こす。

 20:           <Hello/>
               ^^^^^^^^ React element `Hello`
 10: const Hello = ({name}: Props) => (
                            ^^^^^ property `name`. Property not found in
 20:           <Hello/>
               ^^^^^^^^ props of React element `Hello`
```

基本的には、エディタのプラグインの支援でリアルタイムにチェックする。

![スクリーンショット 2016-09-24 15.39.18.png](https://qiita-image-store.s3.amazonaws.com/0/15319/6b9cc641-a7e9-21c5-fdfb-158075d7f663.png)

![スクリーンショット 2016-09-24 15.40.09.png](https://qiita-image-store.s3.amazonaws.com/0/15319/df69b57c-9905-8b6b-db8f-f38868cf7d10.png)

上記のスクリーンショットは、atomで`linter-flow`を使用時のもの。詳しい環境が知りたければを[Atomにflowtype環境をつくる - Qiita](http://qiita.com/akameco/items/a1319faa7c86b129c685)を参考にしてほしい。

## おわりに
それにしても、`Flow`の正式名称がよくわからない。
ロゴは`flow`、urlは`flowtype`、ドキュメントでは`Flow`、公式のtwitterは`flowtype`。
単に「フロウ」というとヒップホップ感が出てぱないので、やはり`flowtype`と呼ぶのがいいのだろうか。