What is Babel? popular javascript compiler

In the world of programming, we all know that when it comes to production code, we love to find many ways to make our job easier. Over time we’ve seen many different iterations of JavaScript. With all these iterations, as well as old and new features being added constantly, everything needs a way to combine it into qualifying code. This is where Babel comes in.

Babel is a JavaScript compiler. Its toolchain is primarily used to convert ECMAScript 2015+ to a backward compatible version of JavaScript in current and older browsers. This is the epitome of declarative code. It converts code, polyfills features that are missing in your environment, transforms source code, provides many plug-ins, and includes a number of aggregation tools.

Babel is needed because it gives us the privilege to implement the latest and latest features offered by JavaScript, without worrying about whether it works in specific browsers or not. Babel also converts JSX syntax to 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 an example with 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>
  )
}


enter fullscreen mode

exit fullscreen mode

The code block below is what babel does with the above code block when working under the hood. This converts our JSX code to 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"
  }));
}


enter fullscreen mode

exit fullscreen mode

Some of the syntax above is what you might see or use when coding in regular JavaScript. When it comes to React JSX syntax, this is not your concern. Babel compiles everything so we can do less work and make our code a lot more declarative.

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

Leave a Comment