ReactJS Tutorial

ReactJS ES, NPM, and Babel Explained With Examples

Table of Contents

  • Naming Collision and Modules
  • How do Modules Work?
  • What is ES in React?
  • What is npm in ReactJS?
  • Test your knowledge with a quick quiz!
  • What is Babel in React?
  • What is a Transpiler?
  • Why Use Babel in React?
  • Test your knowledge with a quick quiz!

Naming Collision and Modules

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.

How do Modules Work?

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.

What is ES in React?

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).

What is npm in ReactJS?

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.

Test your knowledge with a quick quiz!

What is NPM?


Select the correct answer

What is Babel in React?

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.

What is a Transpiler?

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.

Why Use Babel in React?

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.

Test your knowledge with a quick quiz!

Which is a source-to-source compiler?

Select the correct answer

Did you find this article helpful?