Babel is a JavaScript compiler tool that can convert modern JS code into its older versions. It’s useful in many ways although as someone who’s relatively early on in their career you won’t need to use it daily.

Browsers

To understand what is Babel and how does it affect us as React developers we first need to have a very basic understanding of how the browsers work with JavaScript. Although JS first appeared in 1995, it’s still very much changing. The language is constantly evolving as it’s being updated with new features.

Sometimes those changes are happening faster than the browsers running the JS code can adapt to them. Some browsers simply do not understand the newer features of the JS and are unable to work with it.

For that reason, we need something called the transpiler. Transpiler takes the source code of one nature and converts it to an equivalent code written in a different programming language. So that the input and output code, although look different, are performing the same operations.

Babel

Babel is a JS compiler that is used to compile code between different versions of JavaScript. It’s mainly used with the ES6/ES2015 features.

const sum = (a, b) => {
    return a + b
}

const product = (a, b) => a * b;

const arr = [1,1,2,3,5,8]
const doubledArr = arr.map(n => n*2)

const templateString = `I have ${product(2, 4)} apples`

Would then become.

"use strict";

var sum = function sum(a, b) {
  return a + b;
};

var product = function product(a, b) {
  return a * b;
};

var arr = [1, 1, 2, 3, 5, 8];
var doubledArr = arr.map(function (n) {
  return n * 2;
});
var templateString = "I have ".concat(product(2, 4), " apples");

It’s important to note that Babel is highly customisable so the output really depends on how you configure it. It’s not an easy thing to understand for new engineers, however, as a React developer working on a personal project you will not need to worry much about it as all of this is already handled for you by the create-react-app.

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.