Babel
For the purposes of this book, Babel serves two primary functions. First, it serves as a javascript compiler, compiling a more modern version of javascript called ECMAScript 2015 into an older version that browsers understand. Second, Babel serves as a JSX compiler, which is a simple javascript syntax expression that makes writing React components much easier.
To understand Babel and why it's necessary, it's important to understand the massive changes underway to the javascript language.
Background: ECMAScript 2015 - A Modern Javascript Standard
The javascript language (formally called ECMAScript) is evolving rapidly. The ECMAScript 2015 standard has added lots of modern features to bring Javascript into the modern age of programming languages. The EMCAScript 2015 standard adds long-needed features to javascript like classes, constants, template string (e.g. string interpolation), modules, and many other features. Learn more about the ES2015 standard on the excellent tutorial on Babel website.
The new version of javascript is a major improvement to the language, but the javascript you write ultimately has to be interpreted by each browser's javascript interpreter. Chrome, Safari, Firefox, and others all have their own javascript implementations, and even if they didn't we would still need to support old version of the javascript running in old browsers.
This is where Babel comes in.
Javascript Compiler
As the website says, Babel is a javascript compiler. What this means in practice is Babel takes javascript written in ES2015 syntax and compiles it down to a version of javascript understood by web browsers. This allows you to write javascript using the ES2015 syntax and features, and Babel deals with the complexity of compiling that code into a version of javascript that browsers understand.
JSX: A Syntax for Front-end Components
JSX is a syntax extension to javascript that is used to write React components. It provides syntactic sugar to save keystrokes, and in general just makes things easier. Babel provides a JSX compiler, which transforms the JSX syntax, which looks like similar to HTML, into plain javascript code.
Learn More
- Babel: Learn more about Babel
- JSX: Introducing JSX