ReactJS ES, NPM, and Babel Explained With Examples

Originally, Javascript (JS) did not have a method to define code within a module. Programmers could load a JS file only via a <script> tag. Multiple files shared the same memory space if they were loaded into the browser. 

This implied that there was a possibility that two JS files contained one top-level function run(). The file was loaded in the end containing the working function run().

This phenomenon was called ‘naming collision’. It occurred due to the lack of a module in JS. The concept of modules is different in different languages, but the basic idea is the same as that of namespaces in Java.

Modules enable code organization by splitting a codebase into reusable components. Each component then performs individual functions and can be combined or put together to form larger functionalities or an entire application.

ES is a short form used for ECMAScript, where ECMA further stands for European Computer Manufacturers Association. It is a standard organization headquartered in Switzerland and manages ES.

ES6 in React is basically a standard used for different scripting languages like (JavaScript).

Node Package Manager or npm is the standard package manager for Node.js. When you install NodeJS, npm comes with it as the default package manager. Programmers can be sure that there’s a package for almost everything in npm. It is such an extensive registry.

In fact, the free npm Registry has more than one million packages, making it the largest software registry in the world. What started as a means to download and manage dependencies of Node.js packages, has now become a tool for the JavaScript frontend. 

These days, ES modules are also stable and compatible with the NPM ecosystem and thus can be used easily.

Here’s what npm in React can do.

• It can manage the download of dependencies.

• It can install all dependencies.

• It can also install a single package.

• It can check packages for the latest version and install updates.

It can also manage versioning. This means you can specify any specific version of a package you need.

React Babel is a transpiler in JavaScript used to convert edge JavaScript into old ES5 JavaScript. The benefit of ES5 is that it can run on any browser, even on the old ones.

Transpilers are also called source-to-source compilers. These tools can read source code written in one programming language, and give you the equivalent code in another language of the same level.

Basically, transpiling is the process of converting one language into another. You can understand it like converting typescript into JavaScript or Sass into CSS.

Not every browser supports the latest JavaScript features. Babel does the converting job for you. It transpiles the latest JavaScript features such as ES6 into an understandable format.

Here’s what else babel can do for you.

• It can transform the syntax.

• It can polyfill the missing features in your target environment.

• It can transform source code.