Three ways to use Babel with React

Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript.

What is Babel?

• JavaScript transpiler.
• Initially, the main focus of babel is to convert ECMAScript 2015+ (ES6+) code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.
• Nowadays, Babel is used to convert (transpile) JSX syntax , Typescript , Code Compression, and any syntaxs in proposal stage. For example, arrow function, which are specified in ES6 are converted into regular function declarations.
• Also, Babel provides polyfills to provide support for features that are missing entirely from JavaScript environments. For example, static methods like Array.from and built-ins like Promise are only available in ES6+, but they can be used in older environments if a Babel polyfill is.

There are 4 ways to run babel

1. @babel/cli
2. webpack babel-loader
3. @babel/core
4. @babel/register

@babel/register is often used in Node.js. It makes the babel run dynamically when the require code is executed. Since it’s not popular way to run babel in React, we are not going to deal with @babel/register way.

Create a sample project

Let’s Create sample project.

— Create a directory and package.json

• Let’s create a directory called test-babel-how.
• move to the directory.
• include package.json in the directory by running npm init -y.

mkdir test-babel-how
cd test-babel-how
npm init -y

— Install the necessary packages

• @babel/core : @babel/core package is necessary to execute babel.
• @babel/cli : a built-in CLI which can be used to compile files from the command line.
• @babel/plugin-transform-arrow-functions : compile ES2015 (ES6) arrow functions to ES5.
• @babel/plugin-transform-template-literals : compile ES2015 (ES6) template literals to ES5.
• @babel/preset-react : Babel preset for all React plugins.

npm i @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react

— Create a sample code

• create a src folder and create code.js in the src folder.

test-babel-how
|
 -- node_modules
 -- src
   |
    -- code.js
 -- package-lock.json
 -- package.json

• code.js

const element = <div>babel test</div>; // 1
const text = `element type is ${element.type}`; // 2
const add = (a,b)> a + b; // 3

We are going to:

1. Transpile JSX syntax using react preset.
2. Transpile template literal using template literal plugin.
3. Transpile arrrow function using arrow function plugin.

1. @babel/cli

— run the following command in the terminal

npx babel src/code.js // 1
--presets=@babel/preset-react // 2
--plugins=@babel/plugin-transform-template-literals, // 3
@babel/plugin-transform-arrow-functions

1. Babel command and tells where the code exists src/code.js.
2. We are using a preset @babel/preset-react.
3. We are using 2 plugins @babel/plugin-transform-template-literals & @babel/plugin-transform-arrow-functions.

— Following output in the terminal

 
const element = /*#__PURE__*/React.createElement("div", null, "babel test"
); // 1
const text = "element type is ".concat(element.type); // 2
const add = (a, b) > a + b; // 3

1. JSX syntax is converted to createElement function call.
2. template literal is converted to string with a concat method.
3. arrow function is converted to normal function.

2. webpack babel-loader

— install packages to use webpack

npm i webpack webpack-cli babel-loader

— create a babel.config.js file

const presets = ['@babel/preset-react'];
const plugins = [
    '@babel/plugin-transform-template-literals',
    '@babel/plugin-transform-arrow-functions'
];

module.exports = { presets, plugins };

• Instead of run presets & plugins in the terminal, we make a config file called babel.config.js to specify presets & plugins.

— create a webpackge.config.js file

const path = require('path');
module.exports = {
    entry: './src/code.js', // 1
    output: { // 2
        path: path.resolve(__dirname, 'dist'), 
        filename: 'code.bundle.js',
    },
    module: { // 3
        rules: [{ test: /\.js$/, use: 'babel-loader'}],
    },
    optimization: { minimizer: []} , // 4
}

1. specify a file to do a bundling using webpack.
2. save the result to dist/code.bundle.js file.
3. let babel-loader to handle JavaScript files.
4. webpack compresses JavaScript file by default for optimization. But, let’s not optimize (compressing JavaScript file) to see if output is as expected.

• we use configuration in babel.config.js file.

— run webpack

npx webpack

— dist/code.bundle.js is created with a following output:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
  
  // ...
  // ...  
/* 0 */
/***/ (function(module, exports) {

const element = /*#__PURE__*/React.createElement("div", null, "babel test"); // 1

const text = "element type is ".concat(element.type); // 2

const add = (a, b) > a + b; // 3

/***/ })
/******/ ]);

• // ... part is webpack’s run time code.
• we could find out that same output is generated.

3. use @babel/core directly

• @babel/core is an essential to execute babel and we use @babel/core indirectly using @babel/cli & babel-loader.

— create runBabel.js file

const babel = require('@babel/core'); // 1
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8'); // 2
const presets = ['@babel/preset-react']; // 3
const plugins = [
    '@babel/plugin-transform-template-literals',
    '@babel/plugin-transform-arrow-functions',
];
const { code } = babel.transformSync(source, { // 4
    filename,
    presets,
    plugins,
    configFile: false, // 5
});
console.log(code); // 6

1. get @babel/core module
2. get the file code.js to compile
3. set presets & plugins
4. execute babel using transformSync function
5. let not to use babel.config.js configuration file
6. print converted code

— run file

node runBabel.js

• check out the same output in the terminal.

const element = /*#__PURE__*/React.createElement("div", null, "babel test"
); // 1
const text = "element type is ".concat(element.type); // 2
const add = (a, b) > a + b; // 3

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop any custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com