ReactJS | Introduction to Babel

Introduction to Babel
Babel is a very famous transpiler which basically allows us to use the future javascript in today’s browsers. In simple words, it can convert the latest version of javascript code into the one that the browser understands. The latest standard version which javascript follows is ES2017 which is not fully supported by all the browsers and hence we make use of a tool such as ‘babel’ so that we can convert it into the code that today’s browser understands.

What is transpiler?
It is a tool which is used to convert source code into another source code which is of the same level. That is why it is also known as a source-to-source compiler. Both the codes are equivalent in nature, considering the fact that one works with the specific version of the browser and one doesn’t.

Note: It is also good to note that a compiler is totally different from a transpiler as the transpiler convert source code into another source code at the same abstraction level, whereas the compiler converts code into a lower level code generally. Like in Java, the source code is converted to byteCode which is lower level and not equivalent.

Why do we need Babel?
The main reason we need babel is that it gives us the privilege to make use of the latest things javascript has to offer without worrying about whether it will work in the browser or not.

Simple Example
Before installing and making use of all the features of the Babel tool, let’s see a simple code of the latest standard version of ES2017 and see what happens to it when we pass it into babel engine.

Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

// sample new version javascript code
const fun = (x) => {x*2};
  
const a = () => {};
  
const b = (x) => x;
  
[1, 2, 3].map((n)=> n+1);

chevron_right


Some of the above code is not supported in some browers, so after transpiling through Babel we will get:

filter_none

edit
close

play_arrow

link
brightness_4
code

// after transpiling 
"use strict";
  
var fun = function fun(x) {
  x * 2;
};
  
var a = function a() {};
  
var b = function b(x) {
  return x;
};
  
[1, 2, 3].map(function (n) {
  return n + 1;
});

chevron_right


In the next article we will learn how to install Babel and will also see more examples of it.



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.