Flow
Explore how to integrate Flow as a static typechecker in React projects, including installation, configuration, and usage. Understand defining and applying type annotations for props, states, and function components to improve code reliability and readability.
Setting up Flow
In contrast to React PropTypes, Flow is a static typechecker for JavaScript, not just for React components. Flow is also developed in-house at Facebook and thus integrates smoothly with most React setups. Up to version Babel 6, it even came pre-installed as part of the babelpreset-react and could be used without further setup.
Installation
Since Babel 7, Flow has been ported to its own Babel preset. To install it, you can run:
npm install @babel/preset-flow
Or, to install via Yarn:
yarn add @babel/preset-flow
Setting Babel preset
In addition to the installation step, you also have to manually set the @babel/preset-flow as a preset in the Babel config. Presets allow us to remove non-JavaScript syntax—in this case, Flow syntax—during the build process so that we will not run into errors in the browser.
Installing Flow executable
Apart from the Babel Preset, the Flow executable needs to be installed via:
npm install flow-bin
Or, install it the following way using Yarn: ...