Geek Tech


5 packages to level up your React code

5 packages to level up your React code

Geek Tech's photo
Geek Tech
·Mar 4, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • Howdy Geeks! 👋
  • 1️⃣ ES Lint
  • 2️⃣ Prettier
  • 3️⃣ Framer Motion
  • 4️⃣ Formik
  • 5️⃣ Docz
  • Thanks for reading!

Howdy Geeks! 👋

As a React developer, your work is to build high-quality JavaScript code. Programming is a difficult task. Indeed, you are expected to produce high-quality code while also ensuring that it is bug-free.

When it comes to developer productivity and enjoyment, packages are essential. Why waste time reinventing the wheel when you can save time by doing so? There's a good chance that someone has already used a package to solve the problem you're having.

So, here are 5 packages you must install to level up your React code

1️⃣ ES Lint

ESLint generates a slew of JavaScript rules that your code must adhere to. When there are tabs instead of spaces in the source code, for example, you can tell ESLint to trigger an error.

You can define all of the rules one by one, but this is highly time consuming. Thankfully, ESLint config Airbnb, one of the most well-known shared ESLint configs, allows you to use some pre-configured ESLint rules.

2️⃣ Prettier

You can force a JS code style preference in ESLint, but the alternatives are restricted. Using Prettier on top of ESLint is the best method to ensure that your code has a consistent appearance.

Prettier cleans up your JavaScript code by parsing it and reformatting it. It will not change the logic of your code, but it will make it easier to read. Your team and you now now code in the same way. Writing code becomes a far more pleasurable process as a result. New developers can also ramp up more quickly in your codebase.

3️⃣ Framer Motion

Framer Motion is a production-ready motion library for React. The motions and animations are powered by the Framer library. The package includes spring animations, scroll animations, CSS variables and so much more!

Framer Motion offers more advanced listeners and also extends the basic set of React event listeners. When animating between two separate components, Framer Motion will take care of everything in between. A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams.

4️⃣ Formik

Formik is the world's most popular open source form library for React and React Native. Formik takes care of the repetitive and annoying stuff — keeping track of values/errors/visited fields, orchestrating validation, and handling submission — so you don’t have to. This means you spend less time wiring up state and change handlers and more time focusing on your business logic.

No fancy subscriptions or observables under the hood, just plain React state and props. By staying within the core React framework and away from magic, Formik makes debugging, testing, and reasoning about your forms a breeze. If you know React, and you know a bit about forms, you know Formik!

5️⃣ Docz

When it comes to software development, one of the most critical and time-consuming procedures is code documentation. Docz makes it simple to create and distribute beautiful interactive code documentation.

Docz uses Gatsby and Gatsby theme shadowing to let you to easily construct live-reloading, SEO-friendly, production-ready documentation sites with MDX and adjust the look, feel, and behaviour as needed.

Thanks for reading!

Thank you for reading! Follow us on Twitter for more tech blogs.

Until next time, Abhiraj

Share this