Babel in React

What is Babel ?

It’s a JavaScript compiler includes the ability of compiling JSX into JavaScript. It also able to do many powerful things.

Installing Babel

To use Babel we need to install Babel-Core which is the Babel’s npm module’s name. Here the command to install Babel will be differed from the way of installing react and react-dom. The command to install Babel is “npm install –save-dev babel-core“. This code enables Babel to used in development mode.

And further we can use some other bundles to used along with Babel, such as babel-loader and babel-preset-react. In order to work with Babel we have to create a config file for Babel. So in the root directory create a file named .bebelrc and inside that config file {preset: [‘react’]} must me include. Now we are done with Babel installation and ready to go with Babel.

Babel makes developer work easier by compiling simple advanced code to regular JS codes

Classes In Babel

By Running a simple ES6 class code through Babel we can get a constructor function plus little decorations.

Here we have Person function with standard constructor with safety checking.

Fat Arrows

It gives us the simple syntax for defining anonymous functions. For example we can write the following code

(x,y) => {return x + y}; and Babel will return us

(function (x, y) { return x + y; });

And if we want to call the function, we could do

(x, y) => {return x + y} (1,2); 
and Babel will return us the
(function (x, y) {
       return x + y;
})(1, 2);

So these are some examples on how Babel works and Babel can be used in advanced functions.