Member-only story
22 Miraculous Tools for React Developers in 2019
Enhance and empower your React experience
React, as we know it, is a JavaScript library to build amazing user interfaces. However, not everyone is using the same tools or knows the great ones out there that help make the React development experience more fun and proactive.
If you haven’t used React, or have friends that might be interested in using it, what do you say when they ask you why they should use the library?
Besides telling them how great the library is (which should be the first thing), I also like to mention that the tools created by the open-source community help bring the experience to a whole new level of excitement.
Here are 22 tools you can use to build your React apps in 2019 (This list is not in order of their importance)
1. Webpack Bundle Analyzer
Ever wondered which packages or parts of your app are taking up all the space? Well, you can find out with the Webpack Bundle Analyzer. This package will help you identify output files that take up the most space.
It will create a live server and present you with an interactive treemap visualization of the contents of your bundles. With this in your toolkit, you’re able to see where the presented files are located, their gzip size, parsed size, and their parents/children.
The benefits? Well, you can optimize your React app based on what you see!
Here is a screenshot of what this looks like:
You can clearly see that the pdf packages take up the most space in the app. But it also takes the most space on the screen. That’s very useful.
However, the screenshot is minimal. You can also pass in useful options to see it in more detail, such as generateStatsFile: true, and also choose to generate a static HTML file that you can save somewhere outside of your development environment for later use.
