3 Must-Install NPM Packages to Write High-Quality React Code

As a React developer, you spend your time writing JavaScript code. Programming isn't an easy task. Indeed, you're requested to write high-quality code and at the same time writing code without any bugs. For all my projects, I always install these NPM packages to make my React code better.

Type checking TypeScript

I've started programming with PHP, a very permissive programming language like JavaScript. It was an easy language to start with but a nightmare to maintain or program when your applications start growing.

I discover a new world with strongly typed languages like C/C++ or Java. One major advantage of strongly typed language is to catch errors earlier in the development process. In the end, you write better code with fewer bugs in your application.

Unfortunately, C/C++, Java or even PHP you cannot run in browsers. The current browsers support only the JavaScript programming language. But, the good news, there is an alternative to this with TypeScript, a strongly typed programming language that can transpile to JavaScript. So, 100% compatible with JavaScript and your browser can run it without any issue.

Recently, TypeScript grows in popularity among JS community. Now, almost all NPM packages provide support for TypeScript. In most NPM package documentation, you can find references on how to install and use with TypeScript.

So, now all my React projects are written in TypeScript and can't live without it.

JS linter ESLint

Another dependency I use in combination with TypeScript is ESLint, a JavaScript linter. But also compatible with TypeScript. A tool to catch errors, bugs and styling issues in your code.

ESLint comes up with tons of rules for JavaScript where your code needs to follow. For example, you can indicate ESLint to raise an error when there are tabs instead of spaces in the source code.

You can define all the rules one by one but it's extremely time-consuming to do it yourself. Thankfully, you can use some already configured rules for ESLint with ESLint config Airbnb, one of the most famous shared ESLint configs.

Code formatter Prettier

In ESLint, you can enforce your preference to a JS code style, but the options are limited. The best way to have a consistent look for your code is to use Prettier on top of ESLint.

Prettier parses your JavaScript code and reformat your code more nicely. It won't change the logic of your code but make your code more pleasant to read.

Now, your team and you have the same coding style. It makes the development experience much more pleasant to write code. For new developers in your codebase, they can also ramp up more quickly.

React Boilerplate with TypeScript, ESLint and Prettier

Hoping this article convinces you to use these tools. If you don't want to lose your time configuring them and learn how to use them, I've open-sourced my React Boilerplate on GitHub. The perfect template to start any React projects with Next JS and Tailwind CSS.

In the same principle, if you're currently building a SaaS, I've built a React SaaS Boilerplate Template