React Babel

Posted on  by admin
  • 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:. 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.
  • 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.
  1. ES6 saw the introduction of let, const, Arrow Functions, Classes, multi-line strings, and a host of other goodies.
  2. To illustrate, below we have an input of an ES6 arrow function which is converted to a plain, old ES5 JavaScript function.
  3. 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.
  4. 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 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.
  • 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.
  • It 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. Once 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.

  • And with that, Babel has been added to your react project! 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.

React Babel is a very well known and well-implemented open-source transcompiler of JavaScript.

We use it mainly to convert the ECMA Script code into a version of JavaScript.

Also, that is backward compatibility that can be run by many versions of JavaScript too.

It is very popular among developers as a tool.

We can also use it for the new features of JavaScript as a programming language.

Developers can use Babel easily to convert their source code into the versions of JavaScript.

As a result, new browsers do not have any difficulty in the process. Babel can do many other powerful things and is worth exploring.

The npm module for Babel is babel-core.

And we will install babel-core in a way that is different from that we did React and React DOM.

So instead of using the command npm install –save babel-core, we will be using the command npm install –save-dev babel-core.

The reason for this is that we will only use Babel in a mode that is meant for development.

When that React application is shipped into production, no transformations are required.

Also, the –save-dev flag saves a module for npm for the purpose of the development version only.

  • Just like we can write –save as -S, we can write –save-dev as -D. We can also install two other modules related to Babel namely babel-loader and the babel-preset-react.

Presets can configure Babel. Here, these preset transpile almost all of the web technologies.

And these technologies are available to us that include css, jsx, js and so on.

Here we will see how to make use of two presets that are react and env.

Package.json or even cli can configure Babel. But we mostly prefer package.json to configure.

Presets basically are like modules that help us in the transpiring of one language to another. The next thing that we are going to do is add the above lines to our package.json file.

  • After that, it will simply let the React Babel know that these particular presets are used to transpile.

Now what we are going to do is configure the webpack for using it with Babel.

For this, we will be using the babel-loader. Webpack provides us with valuable hooks that process the files.

  • And for us developers, these new modules are extremely useful and easy to configure.
  • The rules are simple and specify what we should do when a particular file is encountered.
  • The text key specifies the file regex. And, we will use it to select all the files that have the extension .m and .js.

But, it’ll exclude folders such as node_module and bower_components.

This is because we don’t want to transpile the node_module files if we have specified the babel-loader already.

For making use of Babel with CSS, we will be using the style-loader and css loader of Babel.

The use key can also take an array that is composed of the objects or it might also be composed of strings.

As a result of our loaders that are loaded from last to first, first, our fill will go to the css loader.

As a result, it makes our css exclusive to one and only one component in which we import it.

The loader for CSS will resolve all the imports in the files of CSS.

After that, the style-loader will add these in the form of style tags on the head.

  • The presets and plugins of Babel are the details for configurations for Babel.
  • We use these for the purpose of transpiling of the code. Babel supports a number of plugins. We can also use it individually as well if the environment and code that we will execute are known.
  • The Babel CLI introduces us to a number of features. These features basically include methods and objects.
  • But we can’t use them for transpilation purposes.

Basically, Babel provides backward compatibility for all the features that are newly added to the JavaScript.

These are compatible with any browser that exists.