Explain the use of Webpack and Babel in ReactJS?

1.	Explain the use of Webpack and Babel in ReactJS?
Answer» Webpack and Babel are the tools which run in the background to turn our React project into vanilla HTML, CSS, and JavaScript. It is necessary because that only can be PROCESSED by the browser. Webpack in BASICALLY a module builder. Webpack mainly runs during the development process. We have TAKEN the below diagram from https://webpack.js.org/ website. It is quite self-explanatory on what actually webpack does. As per the diagram, it takes your “js”, “sass” and other files and converts them to vanilla “js”, “css”, “jpg” and “png” files, which the web browser can understand. Now, when we create our app with create-react-app, webpack is included in it by the FACEBOOK team. If we are using something like SCSS in our project, it gets converted into vanilla CSS. Babel, on the other hand, is a JavaScript compiler that converts latest JavaScript like ES6, ES7 into plain old ES5 JavaScript that most browsers understand (even the old ones- like IE8). In React land its main use is to transform our JSX code into vanilla JavaScript. As per the Babel website https://babeljs.io/ , Here are the main use of Babel: Transform your syntax Polyfill the features that are MISSING in the target environment. Source code transformations (codemods) A simple example of what Babel does for an arrow function, which we introduced in ES6. // Babel Input: ES6 arrow function [5, 9, 7].map((i) => i + 1); // Babel Output: ES5 [5, 9, 7].map(function(i) { return i + 1; }); Below is how a simple React JSX line gets converted into the way it is actually used inside React with createElement.

Answer»

Webpack and Babel are the tools which run in the background to turn our React project into vanilla HTML, CSS, and JavaScript. It is necessary because that only can be PROCESSED by the browser.

Webpack in BASICALLY a module builder. Webpack mainly runs during the development process.

We have TAKEN the below diagram from https://webpack.js.org/ website. It is quite self-explanatory on what actually webpack does. As per the diagram, it takes your “js”, “sass” and other files and converts them to vanilla “js”, “css”, “jpg” and “png” files, which the web browser can understand.

Now, when we create our app with create-react-app, webpack is included in it by the FACEBOOK team. If we are using something like SCSS in our project, it gets converted into vanilla CSS.

Babel, on the other hand, is a JavaScript compiler that converts latest JavaScript like ES6, ES7 into plain old ES5 JavaScript that most browsers understand (even the old ones- like IE8).
In React land its main use is to transform our JSX code into vanilla JavaScript. As per the Babel website https://babeljs.io/ , Here are the main use of Babel:

Transform your syntax
Polyfill the features that are MISSING in the target environment.
Source code transformations (codemods)

A simple example of what Babel does for an arrow function, which we introduced in ES6.

// Babel Input: ES6 arrow function [5, 9, 7].map((i) => i + 1); // Babel Output: ES5 [5, 9, 7].map(function(i) { return i + 1; });

Below is how a simple React JSX line gets converted into the way it is actually used inside React with createElement.

Explain the use of Webpack and Babel in ReactJS?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment