How to Set Up Flow for React

Setup

You set up Flow for React the same way you set up Babel.

First, run the following script to install @babel/core, @babel/cli, and @babel/preset-flow:

npm install --save-dev @babel/core @babel/cli @babel/preset-flow

Next, a .babelrc file needs to be created at the root of the project. In the presets, @babel/preset-flow needs to be added as such:

{
  "presets": ["@babel/preset-flow"]
}

To compile all the files from one folder to another, use:

./node_modules/.bin/babel <SOURCE FOLDER> -d <TARGET FOLDER>

Here, the <SOURCE FOLDER> is the directory of the folder where all the files are stored before compiling, and the <TARGET FOLDER> is the directory where all the compiled files are to be moved.

Configuration file

The next step would be to write a .flowconfig file. This file contains all of the rules and configuration for Flow. It consists of 7 sections:

1. [include] tells Flow which files to include to check for changes and errors.
2. [ignore] tells Flow which files to ignore when checking for changes and errors.
3. [untyped] tells Flow which files to throw away and not check, and treat modules as any.
4. [libs] tells Flow which libraries to include when checking.
5. **[lints] tells Flow how to behave with different kinds of Lints, programming, or syntactic errors.
6. [options] contains a set of configurable rules from Flow’s options that tell it how to perform its checks.
7. [version] tells Flow its version requirements in the project.