React Entourage

So, you’ve decided to use react.js in your new awesome project and now you’ve got a new problem — which state management approach to choose? Is it going to be Redux, Fluxible or Alt? As you work on a project, a ton of 3rd party tools, libraries and components are right there to help. Public Github data allows to look at the summary stats on this flourishing field of modern react-based applications.

Getting and Cleaning Data

The most common approach to build a web app nowadays is bundling a bunch of npm packages — react, redux, react-redux, etc. to be used in a browser environment with a help of tools like Gulp or Grunt. These packages are often listed in the “package.json” file, so I run the following query to select public Github repositories that depend on React. It is optimized to include package.json files that locate in the root folder of a repository only.

The resulting data table contains all the run-time(isDev=0) and design-time(isDev=1) dependencies for each repository that relies on “react”:

But these are raw data — some repositories could have been removed, others might contain meaningless code and so on. To filter it out, I run the script that obtains the number of stars, forks, watchers and size of each distinct repository from the list by using the public Github API and saves the result into a CSV file:

There are two types of projects in this list :

• Auxiliary tools, libraries, boilerplates and frameworks, like zab/jumpsuit:

A powerful and efficient Javascript framework that helps you build great apps. It is the fastest way to write scalable React/Redux with the least overhead.

• Applications that rely on react and probably on these tools, like Reactive Weather(pretty cool stuff).

The target of this research is the second type — applications. They could be separated by assuming that other projects do not depend on them:

Deriving the stats

The other day I came across a tweet that made fun of JS apps

here is the distribution of number of dependencies among react-based ones:

75% of projects have no more than 20 dependencies and 24 devDependencies, that’s not bad at all, though the nested dependencies may add up to 4096. Here are several outliers that could achieve this number.

Top 100 run-time dependencies. It seems that redux really holds the dominant position there. It’s also interesting that jquery is still in the game and even outperforms, in terms of number of usages, material-ui package. Good job jQuery, I will never be disappointed with you.

The same for design-time dependencies:

Finally, I saw a request for good samples of applications written in React, so I compiled the list of top 1000 projects arranged by the number of stars. I sure that it’s a good material for learning the ways React is used in the real-world.

That’s all dear reader, hope that the article was interesting to read. Stay tuned!