はじめに

開発者はFlowとReactを併用することが多いため、Flowが一般的な、そして高度なReactパターンを効果的に型付けできることが重要です。このガイドでは、Flowを使用してより安全なReactアプリケーションを作成する方法について説明します。

このガイドでは、開発者がReactの基本を理解していることを前提に、すでに慣れ親しんだパターンの型を追加することに焦点を当てます。react-domをベースにした例を使用しますが、これらのパターンはすべてreact-nativeなどの他の環境でも機能します。

ReactでFlowを設定する

FlowとBabelは連携して動作するため、すでにBabelを使用しているReactユーザーがFlowを導入するのはそれほど難しくありません。FlowでBabelを設定する必要がある場合は、このガイドに記載の手順に従うことができます。

コンポーネント構文をチェックする

Flowでは、通常の関数コンポーネント／クラスコンポーネントを使用しないことを推奨する、Reactコンポーネントおよびフックを作成するための専用構文をサポートしています。ツーリングを設定するための最新の指示を使用して設定されていることを確認し、その後コンポーネント構文とフック構文ドキュメントを参照してください。

Reactランタイム

Flowは、React名前空間を明示的にインポートせずにJSXを使用するために必要な@babel/plugin-transform-react-jsxランタイムオプションをサポートしています。

新しい自動ランタイムを使用している場合は、Flowがjsxを自動インポートすることを認識できるように、.flowconfigで次の設定を使用します。

[options]
react.runtime=automatic