Design by Contract with Flow, React, and ESLint
Thu, Feb 18, 2016TLDR: Tired of undefined? PropTypes + Flow will give you superpowers.

Please… think of the Programmers
Component Users need to know the props for your component. Quickly.
That means propTypes above the fold: at the top of the file. Use ES7 property initializers for your ES6 classes.
Requiring propTypes with ESLint
eslint-plugin-react’s propTypes rule makes sure that props are documented.

Checking State
As of version 22, Flow understands the “shape” defined in getInitialState
and will field names and types-

Feedback loops
On the developer’s machine, you can setup feedback loops when files change. I show how to do this with onchange in the screencast.

Propagating Constraints with Flow
Flow understands propTypes
and can propagate the constraints throughout your codebase. This is insanely powerful.

Build Machine: The Buck Stops here
Doesn’t that beat runtime errors? Here’s the repo if you want to try it out!
Here’s a talk I gave at Boston ReactJS, it’s 10 minutes. (Opinions are my own, not my employers):