The Role of Babel in React
What is Babel and why is it so wonderful?
When first learning the basics of React, I remember being shown a quick demo of sample JSX being converted into something that looked like vanilla JavaScript. In the prior weeks I had repetitively and painstakingly written code that looked like the following:
let div = document.createElement('div')
div.className = 'complaint-div'let h3 = document.createElement('h3')
h3.innerText = 'Vanilla JS is Tedious'let p = document.createElement('p')
p.innerText = 'Why are there so many steps to create elements?'div.appendChild(h3)
div.appendChild(p)
At this point, I didn’t really know what JSX or Babel was, I was just relieved that I could write what essentially looked like HTML (with some slight differences) inside of a JavaScript file.
From that point on, I used React happily with only a vague understanding of Babel as a compiler and JSX as a wacky JavaScript/HMTL hybrid. Given that I have some time on my hands, now seems like the perfect time to dig into exactly what Babel is and its role in React.
What is Babel
Babel’s use is not only rooted in React. Its main application is as a compiler to convert code written in ECMAScript2015+ into backwards-compatible JavaScript. While most popular browsers can support ECMAScript2015 ( or ES6), it’s always good practice to ensure that your code is compatible with older versions of JavaScript. ES6 saw the introduction of let, const, Arrow Functions, Classes, multi-line strings, and a host of other goodies. To illustrate, below we have an input of an ES6 arrow function which is converted to a plain, old ES5 JavaScript function.
As JavaScript continues to advance, Babel makes available syntax transformer plugins so users may employ the latest syntax in their code without having to wait for browser support.
JSX, React, and Babel
JSX was created as an extension to ECMAScript with the purpose of designing a more concise and easy-to-understand syntax for building DOM tree structures and attributes. With JSX, it is easy to define UI components in React. JSX should not be implemented directly by browsers, but instead requires a compiler to transform it into ECMAScript. This is where Babel comes in. Babel acts as this compiler allowing us to leverage all the benefits of JSX while building React components.
As alluded to earlier, the Babel documentation features a pretty cool sandbox where you may play with converting JSX into the ECMAScript read by the browser. While a little different than Vanilla JavaScript, it is easy to see parallels.
Create React App
create-react-app allows us to whip up a new, boilerplate React application using a single command. From there you can immediately begin building your project without worrying about configuration or installing core dependencies. Included in this is Babel which is packaged as a node module including all the files required for use. Essentially, using this command, you need not worry about installing Babel as everything is taken care of under the hood.
Installing Babel Without Create React App
In the event you are not creating your project with create-react-app, Babel can be installed in your React project with the following commands.
npm install --save-dev babel-coreIt is important to note that the --sav-dev flag indicates to save this module for the development version only. We will also install babel-loader and babel-preset-react.
npm install --sav-dev babel-loader babel-preset-reactOnce we have installed all the dependencies, we will need to configure Babel. This will require a configuration file. In the root directory of the project, create a .babelrc file. The following will go inside of the file.
{ presets: ['react'] }And with that, Babel has been added to your react project!
Closing Thoughts
Behind the scenes, Babel is a workhorse that ensures we can write concise and expressive React components using JSX. It also takes care of any backwards-compatibility issues that may arise from using new JavaScript syntax in less-modern browsers. In a way, Babel is like the bass guitar in a song: you may not always notice it when it’s there, but you definitely miss it when it’s gone.
