Flow type checker with React

Flow type checker with React

Adding Flow to a Project

  • To install the latest version of Flow into your project run the following command in the terminal from your project directory: 'yarn add --dev flow-bin' for yarn or 'npm install --save-dev flow-bin' for npm.
  • Add flow to the "scripts" section of your package.json to be able to use this from the terminal: { "scripts": { "flow": "flow", }, }.
  • To create a Flow configuration file that you will need to commit run following command: 'yarn run flow init' for yarn or 'npm run flow init' for npm.

Stripping Flow Syntax from the Compiled Code

If your project was set up using Create React App, congratulations! The Flow annotations are already being stripped by default so you don’t need to do anything else in this step.

If you manually configured Babel for your project, you will need to install a special preset for Flow: run 'yarn add --dev babel-preset-flow' for yarn or 'npm install --save-dev babel-preset-flow' for npm. Then add the flow preset to your Babel configuration. For example, if you configure Babel through .babelrc file, it could look like this: { "presets": [ "flow", "react" ] }.

Running Flow

To run Flow use the following commands: 'yarn flow' for yarn or 'npm run flow'.

Adding Flow Type Annotations

By default, Flow only checks the files that include this annotation: // @flow.

Flow type checker with React — Structure map

Clickable & Draggable!

Flow type checker with React — Related pages: