In this post we will create a bar chart component with React and use it to display an array of objects with x and y properties. We will use react-vis library to do this.
This is what our finished bar chart will look like.
<img src="./images/Screen-Shot-2018-06-20-at-20.59.30-300x196.png" alt="bar chart">
React-vis is an open source library for displaying all kinds of visual representations of data. It can do very many things including complex graphs with complex datasets. When you open up the documentation, it can be a bit overwhelming and hard to find how to exactly create a basic bar chart. So we will create just a basic bar chart that will do the job and you can tweak it more if you need to.
I am using yarn for managing packages. You can download yarn from here <a href="https://yarnpkg.com/en/docs/install">https://yarnpkg.com/en/docs/install</a> . If you prefer npm instead, just substitute the yarn commands with corresponding npm commands.
We will create an example project from scratch to play around with react-vis. I decided to use create-react-app for this and in the matter of fact the react-vis documentation also offers instructions how to do this (<a href="https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project">https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project</a>). If you’d like to use your existing project, you can just skip the create-react-app part and run “yarn add react-vis” in your project directory.
First, if you haven’t done so already, we install create-react-app “npm install -g create-react-app”.
Then we create our project and install react-vis to it.
<pre><code class="language-terminal">create-react-app my-barchart-app
cd my-barchart-app
yarn add react-vis
</code></pre>
Now we are ready for some charts! Let’s create a new file and name it MyBarChart.js. Then import React and add the following code to it.
<pre><code class="language-jsx">// MyBarChart.js
import React from "react";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return &#x3C;div>barchart!&#x3C;/div>;
 }
}

export default MyBarChart;
</code></pre>
Ok so we have a component that renders div with text “barchart!”. We also defined some variables in the render method. data-variable will represent the dataset we want to render, it will be passed to the component as props. chartWidth and chartHeight will be used to set the width and height of the chart. chartDomain will be used to set the yDomain-prop of the bar chart. yDomain is an array with two numbers. First number will indicate the value of the lowest point on the y-axis (bottom of the chart) and the second number will indicate the value of the highest point on the y-axis (top of the chart). We will use 0 for the first number, so that the y-axis starts from 0, and chartHeight for the second value.
Next up let’s import the MyBarChart component to our app and render it. Our App-component should look something like this.
<pre><code class="language-jsx">// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
class App extends Component {
 render() {
 return (
 &#x3C;div className="App">
         &#x3C;MyBarChart />
      {" "}
 &#x3C;/div>
 );
 }
}
export default App;
</code></pre>
Ok cool, we have our component rendering “barchart!”. Let’s actually add the bar chart now!
We are going to use XYPlot component provided by react-vis. It will act as a wrapper for all the other components we are going to use for the bar chart.
React-vis uses different Series components for displaying a chart. For bar chart we will use BarSeries components and as we want our bars to be vertical, we’ll use VerticalBarSeries component. If we wanted horizontal bars we’d use (surprise) HorizontalBarSeries.
VerticalBarSeries component will draw the rectangles (=bars). In minimum it only requires a data-prop to be passed to it. The data object should be an array containing objects for each bar.
The objects should have x- and y-keys. I created an example dataset that we will use. We will create a data.json file to our src folder and copy paste the json data shown below.
<pre><code class="language-json">[
 { "y": 100, "x": "Jan" },
 { "y": 112, "x": "Feb" },
 { "y": 230, "x": "Mar" },
 { "y": 268, "x": "Apr" },
 { "y": 300, "x": "May" },
 { "y": 310, "x": "Jun" },
 { "y": 315, "x": "Jul" },
 { "y": 340, "x": "Aug" },
 { "y": 388, "x": "Sep" },
 { "y": 404, "x": "Oct" },
 { "y": 442, "x": "Nov" },
 { "y": 447, "x": "Dec" }
]
</code></pre>
Now we can import this data in our App-component and pass it to the MyBarChart-component.  After this our App-component and MyBarChart-component should look like this.
<pre><code class="language-jsx">// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
import data from "./data.json";

class App extends Component {
 render() {
 return (
 &#x3C;div className="App">
         &#x3C;MyBarChart data={data} />
      {" "}
 &#x3C;/div>
 );
 }
}

export default App;
</code></pre>
<pre><code class="language-jsx">// MyBarChart.js
import React from "react";
import { XYPlot, VerticalBarSeries } from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 &#x3C;XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 &#x3C;VerticalBarSeries data={data} />
            {" "}
 &#x3C;/XYPlot>
 );
 }
}

export default MyBarChart;
</code></pre>
Now when you save your files and view the app on browser, you should see some nicely rendered bars.
Ok that’s cool, but we want to also show the x- and y-axis. For this react-vis provides XAxis- and YAxis-components. They are just placed inside the XYPlot component and boom we have x- and y-axis on our chart.
Our bar chart is starting to look good. One more thing we can do is to display the value of each bar on top of the bar. React-vis comes with LabelSeries component that enables us to display labels for each datapoint. In order for LabelSeries to work with our data, we need to add label-key to our data and pass it to the LabelSeries component.
By default LabelSeries will automatically calculate the position for the label based on the position of the datapoint on the chart. For example if we are near the right hand side of the chart, the label will be displayed left from the datapoint or if we are near the bottom of the chart the label will be displayed on top of the datapoint.
For our chart, we don’t want the automatic positioning but we want the label to always be on top of the datapoint and horizontally centered. To achieve this we use LabelSeries props labelAnchorX and labelAnchorY. labelAnchorX value will be “middle” and labelAnchorY value will be “text-after-edge”. More info for about other values for these props can be found from the docs <a href="https://uber.github.io/react-vis/documentation/series-reference/label-series">https://uber.github.io/react-vis/documentation/series-reference/label-series</a> .
This is what our finished MyBarChart-component should look like.
<pre><code class="language-jsx">// MyBarChart.js
import React from "react";
import {
 XYPlot,
 XAxis, // Shows the values on x axis
 YAxis, // Shows the values on y axis
 VerticalBarSeries,
 LabelSeries,
} from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 &#x3C;XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 &#x3C;XAxis />
                 &#x3C;YAxis />
                 &#x3C;VerticalBarSeries data={data} />
                 &#x3C;LabelSeries
 data={data.map((obj) => {
 return { ...obj, label: obj.y.toString() };
 })}
 labelAnchorX="middle"
 labelAnchorY="text-after-edge"
 />
             
 &#x3C;/XYPlot>
 );
 }
}

export default MyBarChart;
</code></pre>
<h2>Conclusion</h2>
Creating charts with React and react-vis is pretty straight forward once you know your way around the react-vis components. There is a lot more you can do with react-vis and if you work with or are interested about data visualisation, for sure go ahead and check out the <a href="https://uber.github.io/react-vis/documentation/welcome-to-react-vis">documentation</a> for more complex examples.
You can find the complete source code for this tutorial from GitHub: <a href="https://github.com/tumetus/react-vis-bar-chart">https://github.com/tumetus/react-vis-bar-chart</a>
Charts are great way to visualise data. If you wish to learn more about different kind of charts, I recommend you check out <a href="https://jscharting.com/blog/bar-and-column-charts/">this</a> blog post.

In this post we will create a bar chart component with React and use it to display an array of objects with x and y properties. We will use react-vis library to do this.

This is what our finished bar chart will look like.

![bar chart](/blog-posts/how-to-create-a-bar-chart-with-react/images/Screen-Shot-2018-06-20-at-20.59.30-300x196.png)

React-vis is an open source library for displaying all kinds of visual representations of data. It can do very many things including complex graphs with complex datasets. When you open up the documentation, it can be a bit overwhelming and hard to find how to exactly create a basic bar chart. So we will create just a basic bar chart that will do the job and you can tweak it more if you need to.

_I am using yarn for managing packages. You can download yarn from here [https://yarnpkg.com/en/docs/install](https://yarnpkg.com/en/docs/install)_ _. If you prefer npm instead, just substitute the yarn commands with corresponding npm commands._

We will create an example project from scratch to play around with react-vis. I decided to use create-react-app for this and in the matter of fact the react-vis documentation also offers instructions how to do this ([https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project](https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project)). If you’d like to use your existing project, you can just skip the create-react-app part and run “_yarn add react-vis_” in your project directory.

First, if you haven’t done so already, we install create-react-app “_npm install -g create-react-app_”.

Then we create our project and install react-vis to it.

```terminal
create-react-app my-barchart-app
cd my-barchart-app
yarn add react-vis
```

Now we are ready for some charts! Let’s create a new file and name it MyBarChart.js. Then import React and add the following code to it.

```jsx
// MyBarChart.js
import React from "react";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return <div>barchart!</div>;
 }
}

export default MyBarChart;
```

Ok so we have a component that renders div with text “barchart!”. We also defined some variables in the render method. _data_-variable will represent the dataset we want to render, it will be passed to the component as props. _chartWidth_ and _chartHeight_ will be used to set the width and height of the chart. _chartDomain_ will be used to set the yDomain-prop of the bar chart. yDomain is an array with two numbers. First number will indicate the value of the lowest point on the y-axis (bottom of the chart) and the second number will indicate the value of the highest point on the y-axis (top of the chart). We will use 0 for the first number, so that the y-axis starts from 0, and chartHeight for the second value.

Next up let’s import the MyBarChart component to our app and render it. Our App-component should look something like this.

```jsx
// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
class App extends Component {
 render() {
 return (
 <div className="App">
         <MyBarChart />
      {" "}
 </div>
 );
 }
}
export default App;
```

Ok cool, we have our component rendering “barchart!”. Let’s actually add the bar chart now!

We are going to use XYPlot component provided by react-vis. It will act as a wrapper for all the other components we are going to use for the bar chart.

React-vis uses different Series components for displaying a chart. For bar chart we will use BarSeries components and as we want our bars to be vertical, we’ll use VerticalBarSeries component. If we wanted horizontal bars we’d use (surprise) HorizontalBarSeries.

VerticalBarSeries component will draw the rectangles (=bars). In minimum it only requires a data-prop to be passed to it. The data object should be an array containing objects for each bar.

The objects should have x- and y-keys. I created an example dataset that we will use. We will create a data.json file to our src folder and copy paste the json data shown below.

```json
[
 { "y": 100, "x": "Jan" },
 { "y": 112, "x": "Feb" },
 { "y": 230, "x": "Mar" },
 { "y": 268, "x": "Apr" },
 { "y": 300, "x": "May" },
 { "y": 310, "x": "Jun" },
 { "y": 315, "x": "Jul" },
 { "y": 340, "x": "Aug" },
 { "y": 388, "x": "Sep" },
 { "y": 404, "x": "Oct" },
 { "y": 442, "x": "Nov" },
 { "y": 447, "x": "Dec" }
]
```

Now we can import this data in our App-component and pass it to the MyBarChart-component.  After this our App-component and MyBarChart-component should look like this.

```jsx
// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
import data from "./data.json";

class App extends Component {
 render() {
 return (
 <div className="App">
         <MyBarChart data={data} />
      {" "}
 </div>
 );
 }
}

export default App;
```

```jsx
// MyBarChart.js
import React from "react";
import { XYPlot, VerticalBarSeries } from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 <XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 <VerticalBarSeries data={data} />
            {" "}
 </XYPlot>
 );
 }
}

export default MyBarChart;
```

Now when you save your files and view the app on browser, you should see some nicely rendered bars.

Ok that’s cool, but we want to also show the x- and y-axis. For this react-vis provides XAxis- and YAxis-components. They are just placed inside the XYPlot component and boom we have x- and y-axis on our chart.

Our bar chart is starting to look good. One more thing we can do is to display the value of each bar on top of the bar. React-vis comes with LabelSeries component that enables us to display labels for each datapoint. In order for LabelSeries to work with our data, we need to add label-key to our data and pass it to the LabelSeries component.

By default LabelSeries will automatically calculate the position for the label based on the position of the datapoint on the chart. For example if we are near the right hand side of the chart, the label will be displayed left from the datapoint or if we are near the bottom of the chart the label will be displayed on top of the datapoint.

For our chart, we don’t want the automatic positioning but we want the label to always be on top of the datapoint and horizontally centered. To achieve this we use LabelSeries props labelAnchorX and labelAnchorY. labelAnchorX value will be “middle” and labelAnchorY value will be “text-after-edge”. More info for about other values for these props can be found from the docs [https://uber.github.io/react-vis/documentation/series-reference/label-series](https://uber.github.io/react-vis/documentation/series-reference/label-series) .

This is what our finished MyBarChart-component should look like.

```jsx
// MyBarChart.js
import React from "react";
import {
 XYPlot,
 XAxis, // Shows the values on x axis
 YAxis, // Shows the values on y axis
 VerticalBarSeries,
 LabelSeries,
} from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 <XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 <XAxis />
                 <YAxis />
                 <VerticalBarSeries data={data} />
                 <LabelSeries
 data={data.map((obj) => {
 return { ...obj, label: obj.y.toString() };
 })}
 labelAnchorX="middle"
 labelAnchorY="text-after-edge"
 />
             
 </XYPlot>
 );
 }
}

export default MyBarChart;
```

## Conclusion

Creating charts with React and react-vis is pretty straight forward once you know your way around the react-vis components. There is a lot more you can do with react-vis and if you work with or are interested about data visualisation, for sure go ahead and check out the [documentation](https://uber.github.io/react-vis/documentation/welcome-to-react-vis) for more complex examples.

_You can find the complete source code for this tutorial from GitHub: [https://github.com/tumetus/react-vis-bar-chart](https://github.com/tumetus/react-vis-bar-chart)_

Charts are great way to visualise data. If you wish to learn more about different kind of charts, I recommend you check out [this](https://jscharting.com/blog/bar-and-column-charts/) blog post.

Learn how to create a bar chart with React using react-vis.

How to create a bar chart with React

Have you ever gotten a great coding idea or wanted to just quickly prototype some component or feature? I know I have.
But most often I find my self configuring the development environment way too long before I get a single line of code written.
For React projects create-react-app is a good option for kickstarting your project. Although it is a good option it still takes time to create you project and install all the dependencies. Not to mention when the time comes that I want to share for example a single component with a colleague or friend it is a bit tedious to either send a zip file or upload the whole project to Github.
<h2>Enter Codesandbox.io</h2>
I was excited to find out about <a href="http://codesandbox.io">codesandbox.io</a> that solves many of the problems described above. Codesandbox.io is an online code editor built for web application development. It takes away the configuration that is required before you are able to start writing code. It makes it that you don't even need a laptop to code!
<img src="./images/Screen-Shot-2018-06-26-at-8.10.50-1024x358.png" alt="codesandbox.io sandbox options">
Projects are called sandboxes and currently you can create a sandbox with one of the following setups:
<ul>
<li>Vanilla jS</li>
<li>React</li>
<li>Vue</li>
<li>Angular</li>
<li>Preact</li>
<li>Svelte</li>
<li>React TypeScript</li>
<li>Dojo 2</li>
<li>CxJS</li>
</ul>
Codesandbox.io also allows you to import projects directly from Github. Now that's pretty cool!
Basically when you create for example a React sandbox, you get all the configuration and dependency management out of the box and can start to write code right away. You can also add any npm dependencies to your sandbox.
<img src="./images/Screen-Shot-2018-06-27-at-14.01.42.png" alt="sandbox editor view">
Sandboxes can be exported either as a zip file download or you can connect your Github account and push commits and create pull requests directly from codesandbox.io. You can also share your sandbox by just sharing a link to it and anyone can view it and fork it if they wish to make modifications.
Codesandbox.io offers also a "lightweight" version of their editor that is used for embedding sandboxes to other websites.
Codesandbox.io is free to use. Free version comes with some limitations and they offer paid version through the <a href="https://codesandbox.io/patron">patron page</a>. Currently the free plan has following limitations:
<img src="./images/Screen-Shot-2018-06-27-at-13.44.12-300x216.png" alt="codesandbox.io plans">
<h2>Conclusion</h2>
When it comes to quickly prototyping a feature or sharing a component codesandbox.io is the tool to use for me. I have found it also great when learning a new technology e.g. React because it lowers the learning curve since I don't have to do anything extra to start programming. I was a bit sceptical first about the user experience and thought that it would be laggy compared to traditional local development environment. I was happy to be proven wrong.


Have you ever gotten a great coding idea or wanted to just quickly prototype some component or feature? I know I have.

But most often I find my self configuring the development environment way too long before I get a single line of code written.

For React projects create-react-app is a good option for kickstarting your project. Although it is a good option it still takes time to create you project and install all the dependencies. Not to mention when the time comes that I want to share for example a single component with a colleague or friend it is a bit tedious to either send a zip file or upload the whole project to Github.

## Enter Codesandbox.io

I was excited to find out about [codesandbox.io](http://codesandbox.io) that solves many of the problems described above. Codesandbox.io is an online code editor built for web application development. It takes away the configuration that is required before you are able to start writing code. It makes it that you don't even need a laptop to code!

![codesandbox.io sandbox options](/blog-posts/online-code-editor-every-web-developer-should-know-about/images/Screen-Shot-2018-06-26-at-8.10.50-1024x358.png)

Projects are called sandboxes and currently you can create a sandbox with one of the following setups:

- Vanilla jS
- React
- Vue
- Angular
- Preact
- Svelte
- React TypeScript
- Dojo 2
- CxJS

Codesandbox.io also allows you to import projects directly from Github. Now that's pretty cool!

Basically when you create for example a React sandbox, you get all the configuration and dependency management out of the box and can start to write code right away. You can also add any npm dependencies to your sandbox.

![sandbox editor view](/blog-posts/online-code-editor-every-web-developer-should-know-about/images/Screen-Shot-2018-06-27-at-14.01.42.png)

Sandboxes can be exported either as a zip file download or you can connect your Github account and push commits and create pull requests directly from codesandbox.io. You can also share your sandbox by just sharing a link to it and anyone can view it and fork it if they wish to make modifications.

Codesandbox.io offers also a "lightweight" version of their editor that is used for embedding sandboxes to other websites.

Codesandbox.io is free to use. Free version comes with some limitations and they offer paid version through the [patron page](https://codesandbox.io/patron). Currently the free plan has following limitations:

![codesandbox.io plans](/blog-posts/online-code-editor-every-web-developer-should-know-about/images/Screen-Shot-2018-06-27-at-13.44.12-300x216.png)

## Conclusion

When it comes to quickly prototyping a feature or sharing a component codesandbox.io is the tool to use for me. I have found it also great when learning a new technology e.g. React because it lowers the learning curve since I don't have to do anything extra to start programming. I was a bit sceptical first about the user experience and thought that it would be laggy compared to traditional local development environment. I was happy to be proven wrong.


When it comes to quickly prototyping a feature or sharing a component online code editor called ... is the tool for me! I have also found it great when...

Online code editor every web developer should know about

<img src="./images/flow-1200x630-1.png" alt="Flow image">
My first touch for Flow was a while back. I needed to add some kind of type checking for an existing React project and I decided to go with Flow (pun intended). Here are some of my experiences as first time Flow user.
<h2>What is Flow?</h2>
From the official <a href="https://flow.org/en/docs/getting-started/">Flow docs</a>:
Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.
Flow checks your code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way.
Because Flow understands JavaScript so well, it doesn’t need many of these types. You should only ever have to do a minimal amount of work to describe your code to Flow and it will infer the rest. A lot of the time, Flow can understand your code without any types at all.
<h2>Deciding to go with Flow</h2>
I researched my options which were Flow and <a href="https://www.typescriptlang.org/">Microsoft's TypeScript</a>. I decided to go with Flow since I didn't want to move my code to new (.ts) files which I would have had to do with TypeScript. Also since Flow analyses your existing code even without any type annotations, it would be able to check my code and find errors from it right away. As far as I know, correct me if I'm wrong, TypeScript doesn't do this. Overall I got the picture that both are good choices and you really don't go wrong using either one.
<h2>Installation</h2>
Installation was quite straight forward and easy to do with the help of <a href="https://flow.org/en/docs/install/">Flow installation instructions</a>. First step was setting up a compiler for stripping out Flow types. Since I was already using Babel in the project it was as easy as adding "flow" to Babel presets configuration and installing babel-preset-flow as dev dependency with yarn.
After this I just needed to install flow-bin as dev dependency with yarn and I was good to go. I ran "yarn run flow" and got 0 errors, yay!
<h2>Usage</h2>
Ok 0 errors wasn't really a surprise. Since Flow monitors only files tagged as Flow files, I needed to add "// @flow" to the files I wanted to be checked by Flow. I started with one file and right away Flow found errors from it. I'm not sure if this is a sign of Flow's goodness or sign of how bad my code was 🙈 I decided that it was Flow's goodness (+ in my defence the file was quite large).
So I started by tagging one file and fixed the errors that Flow pointed out. Errors and inconsistencies weren't the only thing Flow was complaining about. It was of course pointing out the missing type annotations given that I had none in place. So I added those too, which was quite easy by just reading about them from the <a href="https://flow.org/en/docs/types/">docs</a>, and after a while I got 0 errors in my Flow terminal again!
I did this to few other files and after a while I got bunch of my files using Flow. I also started to already see the power of the type annotations when I was importing functions to components and I could see for example what the function was expecting as a parameter and what type of variables they were. And if I accidentally passed say string as a parameter for a function that was expecting number as a parameter, Flow instantly pointed this out and I was able to catch a potential bug before it had a chance to do any damage.
<h2>Conclusion</h2>
This was my first touch to Flow. For this project I decided to go with Flow ( 🥁 ) but I am sure to try TypeScript out too. Flow was easy to install and I really liked the fact that by just adding "// @flow" to a file I could get it checked for errors and improve the code right away. I realise that this was just a scratch to the surface but I am excited to learn more about Flow and how to start utilising it's full potential on my JavaScript projects.


![Flow image](/blog-posts/my-first-time-using-flow-for-static-type-checking/images/flow-1200x630-1.png)

My first touch for Flow was a while back. I needed to add some kind of type checking for an existing React project and I decided to go with Flow (pun intended). Here are some of my experiences as first time Flow user.

## What is Flow?

From the official [Flow docs](https://flow.org/en/docs/getting-started/):

_Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale._

_Flow checks your code for errors through **static type annotations**. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way._

_Because Flow understands JavaScript so well, it doesn’t need many of these types. You should only ever have to do a minimal amount of work to describe your code to Flow and it will infer the rest. A lot of the time, Flow can understand your code without any types at all._

## Deciding to go with Flow

I researched my options which were Flow and [Microsoft's TypeScript](https://www.typescriptlang.org/). I decided to go with Flow since I didn't want to move my code to new (.ts) files which I would have had to do with TypeScript. Also since Flow analyses your existing code even without any type annotations, it would be able to check my code and find errors from it right away. As far as I know, correct me if I'm wrong, TypeScript doesn't do this. Overall I got the picture that both are good choices and you really don't go wrong using either one.

## Installation

Installation was quite straight forward and easy to do with the help of [Flow installation instructions](https://flow.org/en/docs/install/). First step was setting up a compiler for stripping out Flow types. Since I was already using Babel in the project it was as easy as adding "flow" to Babel presets configuration and installing babel-preset-flow as dev dependency with yarn.

After this I just needed to install flow-bin as dev dependency with yarn and I was good to go. I ran "yarn run flow" and got 0 errors, yay!

## Usage

Ok 0 errors wasn't really a surprise. Since Flow monitors only files tagged as Flow files, I needed to add "// @flow" to the files I wanted to be checked by Flow. I started with one file and right away Flow found errors from it. I'm not sure if this is a sign of Flow's goodness or sign of how bad my code was 🙈 I decided that it was Flow's goodness (+ in my defence the file was quite large).

So I started by tagging one file and fixed the errors that Flow pointed out. Errors and inconsistencies weren't the only thing Flow was complaining about. It was of course pointing out the missing type annotations given that I had none in place. So I added those too, which was quite easy by just reading about them from the [docs](https://flow.org/en/docs/types/), and after a while I got 0 errors in my Flow terminal again!

I did this to few other files and after a while I got bunch of my files using Flow. I also started to already see the power of the type annotations when I was importing functions to components and I could see for example what the function was expecting as a parameter and what type of variables they were. And if I accidentally passed say string as a parameter for a function that was expecting number as a parameter, Flow instantly pointed this out and I was able to catch a potential bug before it had a chance to do any damage.

## Conclusion

This was my first touch to Flow. For this project I decided to go with Flow ( 🥁 ) but I am sure to try TypeScript out too. Flow was easy to install and I really liked the fact that by just adding "// @flow" to a file I could get it checked for errors and improve the code right away. I realise that this was just a scratch to the surface but I am excited to learn more about Flow and how to start utilising it's full potential on my JavaScript projects.


This was my first time using Flow type checking in a javascript project. Here are some of my experiences of it.