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 : ) 

Comments

Post a Comment

Popular posts from this blog

Deep Dive Into Azure Global Infrastructure

Image
Have you ever wonder when you deploy an app into cloud how exactly it is hosted in cloud? Or maybe is it safe to host an app in cloud and how they maintain high availability?This post will clear  all your doubts  and free your mind. What is a Datacenter? Inside of a Datacenter Azure Datacenter is the smallest node or the exact physical location where our resources reside.But datacenters are not exposed to end users.These datacenters act exactly as the on premises servers.But since these datacenters are cloud datacenters you have extra capabilities which will help you grow with the customer base (Scale Up) or vice versa (Scale Down) for a lower cost than creating and maintaining own servers. Curious about Azure Regions ? Azure has more Regions than any other cloud provider.If you want the exact numbers there are 58 global regions and a region is a set of datacenters inside a latency defined perimeter.Most of the time we deal with these region when we deploy re
Read more

Bigger Picture Of Node Event Loops

Image
Even though you are a beginner for node js you all know that Node.js is single threaded.But we use Node.js for powerful backends and we can include concurrence functionality into a Node.js application using events and call backs.In simple terms 'Event Loop' is what permits Node.js to perform non blocking I/O operations.Node.js uses event in large scale and it is the reason behind the speed when comparing to other technologies in the same stack What exactly is 'Event Loop' ? Everything happens in Node.js platform is because of events.'Event Loop' mechanism is inside the library called 'Libuv'.Since there is only one thread both userland code (code of the user) and event loop run in that same thread.Every callback is handled by the so called mechanism 'Event Loop'.Every userland code running in a Node application is a callback.Event Loop is behind the huge success of Node.js development.As I mentioned earlier every Node application i
Read more