What is Babel? The Popular JavaScript Compiler

In the world of programming, we all know when it comes to producing code, we love to find numerous ways to simplify our job. Over time we've seen many different iterations of JavaScript. All of these iterations, along with old and new features being added constantly, needs a way to combine everything into merit code. This is where Babel comes in.

Babel is a JavaScript compiler. Its a toolchahin mainly used to convert ECMAScript 2015+ into a backwards compatible version of JavaScript in current and older browsers. It's the epitome of declarative code. It transforms code, polyfills features that's missing in your environment, performs source code transformations, offers many plug-ins, and contains many consolidation tools.

Babel is needed because it provides the privilege of letting us apply the newest and latest features JavaScript has to offer without a worry of whether it works in specific browsers or not. Babel also converts JSX syntax into JavaScript. Which also contributes to why babel plays such an important role with React being such a popular frontend entity.

What does babel do?

Below is a example of Babel working its magic..

// React 

function App() {


  return (
 <div>
  <NavBar />
  <Home />
    <h1>Hello World</h1>
      <label>username:</label>
      <input type="text" placeholder="username" />
      <label>password:</label>
      <input type="password" placeholder="password" />
</div>
  )
}

The code block below is what babel does with the code block above while working under the hood. It converts our JSX code into JavaScript

//Babel Compiler

"use strict";

function App() {
  return 

/*#__PURE__*/React.createElement("div", null, 
/*#__PURE__*/React.createElement(NavBar, null),
/*#__PURE__*/React.createElement(Home, null), 
/*#__PURE__*/React.createElement("h1", null, "Hello World"), 
/*#__PURE__*/React.createElement("label", null, "username:"), 
/*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "username"
  }), 
/*#__PURE__*/React.createElement("label", null, "password:"), 
/*#__PURE__*/React.createElement("input", {
    type: "password",
    placeholder: "password"
  }));
}

Some of the syntax above is what you may see or be used to when coding in regular JavaScript. When It comes to React JSX syntax, this is no more of your worries. Babel compiles everything allowing us to do less work and make our code very much Declarative.

Sources: https://babeljs.io/docs/en/ ,
https://www.geeksforgeeks.org/reactjs-introduction-to-babel/