If you are just getting started with React, I hope this article will be of some help to you. In React ecosystem, Babel and Webpack play a major role and we will see what they are.
So the question is what is Babel, Webpack and why we use them?
Before answering this question, we must ask ourselves why we introduced these technologies.
Some Facts that you should know
- React uses ES6 version of javascript.
- Not all Browsers understand ES6.
As we can see the problem clearly, we want our code to run across all browsers. Ta da!! Babel is here for the rescue.
Babel
Babel in simple term, is a compiler which converts your ES6 javascript to old ES5 javascript so that can be run across all browsers.
Webpack
So what problem does Webpack solves?
If you remember how we load javascript file in a traditional way?
<script src=”hello.js” />
Yes, by using the script tag that is if you want to include 4 javascript file you will have 4 script tag in html. But Webpack allows us to combine all javascript files into a single file. This is the new way of loading javascript files (bundles).
Webpack is a bundler which combines your javascript files, css files, etc. Webpack is powerful tool which can be configured as per your need.
Webpack and Babel as One.
Webpack can be configured as to pass every javascript file through babel-loader and bundling the output javascript file. In simple terms,
React(ES6) → Babel → ES5 → Webpack → javascript bundle.
Thank you for reading. I hope this article was helpful to you.