Useful Tools For React Developers

Welcome back to D Guides folks.This post is valuable for newbies for react development.I am sharing about few tools you can use when developing react applications.It is important leaning tools like these same as understanding a framework like React.These tools will help us to maintain high code quality.

1. Prettier

Prettier is a tool which will format the code consistently according to the standards.First step to do is install prettier as a developer dependency.Why developer dependency is the next question hops into your mind.We don't need to have prettier as a dependency when we are deploying the application so that is why it is installed as a developer dependency.Then we need to install prettier plugin for vs code.VS Code is my first choice when doing web development.Then we are changing two things in preferences.First thing is enabling format on save.Other option we are enabling is require config.By that we ensure that prettier will run only on the projects prettier have been installed.Then create the config file named '.prettierrc' with an empty object(You can specify formatting rules inside that object) and save it inside the root directory.Following video is about installing and configuring prettier into a project

2. ESLint

Same like prettier first and foremost step to follow is installing ESLint as a developer dependency.But   this time we are installing two dependencies.Obviously one is ESLint and other one is ESLint-config-prettier.There is an overlap of functionalities of ESLint and Prettier which is a known fact.But ESLint focuses more into syntax errors when we have installed the second dependency we have mentioned.So ESLint will not bother about formatting errors.ESLint get executed right before we execute our application.But before that we need to create a configuration file called '.eslintrc.json'.In this configuration file extension is a must as it can be created as either a javascript file or a yaml file as well.For the configuration part refer the following video.

3. Git

Git is a version control system and here I am going to talk about 'gitignore' file.In this file we are mentioning the files or the directories we do not want to track and commit.First directory we add is no matter what the node modules directory.It is the largest directory we can find inside our project directory.Then there are few files and directories we normally add into gitignore file.

4. Parcel

Parcel is a  web application bundler which automatically includes React and ReactDOM from registry.It will bundle all the assets and only thing we have to do is point out the starting point in our case 'index.html'.For that we can specify a script to point the starting point in package.json file


All these tools will ease the stress and cut off your developing time by a phenominal amount of time.Please share if you know more tools will help React developers in the comment section below.Until next time be safe and maintain social distancing these days : )