Building a Modern React.js app with Flow

Building a Modern React.js App with Flow

Photo by Andras Vas on Unsplash

As a Javascript dev, React has been an integral part of my learning experience. I started learning and writing Javascript in October of 2017, primarily in the context of Rails. Needless to say, there was a lot of jQuery involved and the experience was not particularly pleasant. My work with React actually started in React Native, but this article will strictly be for React web. Most of the concepts are applicable, but the presentation semantics will change in Native (the HTML elements must be switched for React Native <View>s <Text>s, <FlatList>, etc.)

What are we building

Today we will be building a Todo List. This article is meant to illustrate the setup of a React app with Babel/Webpack and Flow for type checking. In later articles, we’ll implement Redux for state management, and finally persist user todos to Firebase using Redux Saga.

The finished repo for part one is here: React Todo — Step One

In this article we will primarily focus on using Flow types for Components. Some knowledge of React is assumed.

Disclaimer: I will not be going in-depth into configuring webpack. I mostly use a boilerplate configuration from React-Redux Boilerplate, which is a fantastic starting point for production-ready React apps, but not intended for beginners. If you are interested in learning more about Webpack configuration, here is a great re