Photo by fabio on Unsplash

React has been a widely used framework in the frontend community and the community is growing with each day and many of us started on our first react project using the create-react-app starter kit provided by the official React team.

As good as this starter kit is, it does not showcase how things are working behind the scenes. if you ever wondered how different plugins work with react and how your code is compiled & bundled together you have come to the right place.

In a web development world where speed and performance is everything. As a developer, you need to make sure you catching the errors early and writing scalable and maintainable code that follows certain coding standards and is easy to understand.

That’s why in this article we are gonna talk about the two most underrated things, Code Linting & Code formatting by setting up Eslint and Prettier.

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.

Prettier is a code formatter, that helps in following industry standard coding practices.

Photo by Christopher Gower on Unsplash

Have you ever wondered, How your React JSX code is running in a browser that only understands javascript? How your code is minified and bundled and shipped to the browser? Well If the answer to the above questions is YES, then you have come to the right place.

Table of Content

  • Set up the folder structure.
  • Installing Webpack & babel dependencies.
  • Setting up babel configurations.
  • Adding index.html and index.js
  • Setting up webpack configurations.
  • Adding React to…

Abhishek Gangwar

A Passionate front-end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store