How to Use Babel with React

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 used

There are 4 ways to run babel

@babel/cli
webpack babel-loader
@babel/core
@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

First of all, Let’s create a 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
}

webpack.config.js

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 @bael/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

runBabel.js

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

Babel’s transpiling functionality is very necessary tool in today’s fast evolving JavaScript community. Hope you understand Babel little bit more :)

In this article, we went through 3 ways to run Babel. Thank you!

#react #javascript #nodejs #programming