4. How to setup Babel compiler?

What is Babel?

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into backwards-compatible JavaScript code that can be run by older JavaScript engines. It allows web developers to take advantage of the newest features of the language.

Setup Project using npm:

Here we will use npm init to setup a project. once npm init done we can check our package.json file and verify.

 npm init

What is the use of package.json?

It is used by the npm CLI (and yarn) to identify your project and understand how to handle the project's dependencies. It's the package. json file that enables npm to start your project, run scripts, install dependencies, publish to the NPM registry, and many other useful tasks.

Setting Up Babel:

Babel is taking from ES6 -> ES7 and compiling down into ES5.

When we setup a babel the html will be automatically converted into ES5 code.

Lets install babel cli into npm

 npm install --save-dev @babel/core @babel/cli

 lets create our first dependancy.

Try installing @babel/preset-react and @babel/preset-env explicitly

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-env 

Also, in the package.json file, you have referred to @babel/react instead of @babel/preset-react under babelOptions.

After running the above commands we can check packages.json file whether the dependencies attributes are created or not.

 {
  "name": "to_do_list",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6"
  }
}

 

 The babel-preset-react and babel-preset-env will have own libraries. you can find these in node_modules.

we have package-lock.json. 

This file should not be edited manually. just like node_modules.

This is an auto-generated file. we should not change this file.

lets create new folder inside our project folder in the name of "src".

All of our react code will be written "src" folder.

Create app.js under src folder.

src/app.js => This file will contain JSX

app.js:

//JSX - Javascript XML
let firstName = 'Sleepycoder';
let age = 31;
let template = (
    <div>
    <p key={firstName}>First Name: {firstName} </p>
    <p key={age}>Age: {age} </p>
    </div>
    );
let appRoot  = document.getElementById('root');
ReactDOM.render(template, appRoot);

 

public/scripts/app.js => This file will contain auto genrated JSX.

Run the following command 

npx babel src/app.js -o ./public/scripts/app.js --presets = @babel/preset-env, @babel/preset-react

When we run this command jsx will be generated in scripts/app.js as mentioned below.

public/scripts/app.js

"use strict";
//JSX - Javascript XML
var firstName = 'Sleepycoder';
var age = 31;
var template = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
  key: firstName
}, "First Name: ", firstName, " "), /*#__PURE__*/React.createElement("p", {
  key: age
}, "Age: ", age, " "));
var appRoot = document.getElementById('root');
ReactDOM.render(template, appRoot); 

And you can see the below output in the browser.

 In the next tutorial we will explore more on JSX and JSX expressions

Happy Coding!