Learn ES6 : Basic Introduction and Configuration

JavaScript is becoming more and more powerful every day. Nowadays, with JavaScript, you can develop almost any types of application. From desktop to web and even game and mobile apps. Also, you can applications that interact with a database with Nodejs. Besides, with new JavaScript Frameworks like Nuxtjs and Reduxjs you can develop amazing web applications. In contrast, you must know to learn ES6 basics.

What is ES6?

ES6 or EcmaScript is the future of JavaScript. In a nutshell, JavaScript was taken from ECMAScript. Nowadays, people bring updates to ECMAScript and those featured work in JavaScript as well.  Besides, we used to call the older version ES5 and ES6 is the 2015 version with a lot of brilliant features. So, In this step by step tutorials, we will cover all the features with examples. Also, we will talk about Webpack and package bundlers as well.

Why should I Learn ES6?

Well, if you come here to learn ES6, you probably have a good reason right! Most developers use the ES6 code in their project. Also, most software development companies require you to know ES6. Besides, the new features are amazing. It helps you write code in more efficient ways.  You can use Class, Modules, Array Functions and more cool features. It’s the next version of JavaScript, which delivers new language features. So, let’s learn the ES6 basics and configuration.

Learn ES6 Basics Introduction and Configuration

Some modern browsers support ES6 syntax now. Chrome 60+ almost support all ES6 features. But, as of writing this article, most browsers don’t support ES6 features. Therefore, if you want to write code for production, you must convert your code to old JavaScript. So, now we need a tool like Babeljs. If you don’t know what it is. It’s simple a JavaScript compiler. It takes the ES6 code and converts it to old JavaScript code.

Configure Babeljs

Let’s setup Babeljs and use it. Also, you can read the documentation if you want. But I will explain it with step by step ways.

Steps to Configure Babeljs

Firstly, you must have NPM installed on your system. If you don’t have it, just go to nodejs.org download and install it. It will not take more than 2 minutes.

Secondly, create a new folder for your ES6 learning anywhere in your system. Then, open terminal or CMD and run the following command to install Bablejs.

npm install --save-dev babel-cli babel-preset-env

That will install Bablejs and preset env.

Create a package.json file in your directory and paste the following code.

{
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
        "build": "babel src -d output"
    },
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.6.1",
    }
}

Everything should look familiar to you if you have ever used NPM. The script part registers the build command for NPM. It means you can run ‘ npm run build ‘ in your current directory and it will run the babel in the src folder and compile the files to the output directory.

Your project structure should look like this.

The final step is to create a .babelrc file and write the following code.

{
  "presets": ["env"]
}

In older versions of Babel, we used to write the presets value like es2015 or es2016. Now you don’t need to since you have preset-env and it will work just fine.

Now, create any file in the src directory and write ES6 code. Then, run the ‘ npm run build ‘ command in CMD.

I have a file called Persion.js in the src directory.

class User {
  constructor(name) {
    this.name = name;
  }
}

I wrote a simple class usage structure in ES6. When it compiles, it will look like this

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var User = function User(name) {
  _classCallCheck(this, User);

  this.name = name;
};

You don’t need to worry about how long it is and how hard it’s to read. Just read the ES6 version. Also, that’s super clean.

Conclusion

I think it’s enough about ES6 basics part. Besides, we are supposed to make clean and short tutorials. So, I hope they learn the ES6 basics part has been informative for you. If you have any questions, feel free to comment below.