What is Babel

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Main functionalities:

• Transform syntax
• Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
• Source code transformations (codemods)

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

Online Transpiler

Link

JSX

Babel also transpiles JSX to React.createElement elements.

// jsx
export const Counter = (props) => (
  <div style={{ margin: '0 auto' }} >
    <h2>Counter: {props.counter}</h2>
    <button className='btn btn-default' onClick={props.increment}>
      Increment
    </button>
    {' '}
    <button className='btn btn-default' onClick={props.doubleAsync}>
      Double (Async)
    </button>
  </div>
)

export default Counter

// babel transpile
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var Counter = exports.Counter = function Counter(props) {
  return React.createElement(
    'div',
    { style: { margin: '0 auto' } },
    React.createElement(
      'h2',
      null,
      'Counter: ',
      props.counter
    ),
    React.createElement(
      'button',
      { className: 'btn btn-default', onClick: props.increment },
      'Increment'
    ),
    ' ',
    React.createElement(
      'button',
      { className: 'btn btn-default', onClick: props.doubleAsync },
      'Double (Async)'
    )
  );
};

exports.default = Counter;