ReactJS - Basics of ES, Babel and npm

ReactJS is a popular JavaScript library used to build user interfaces, particularly single-page applications. To develop applications with React, it's essential to understand the tools and technologies that work alongside it. Three fundamental technologies you will encounter in React development are ECMAScript (ES), Babel, and npm.

In this article, we’ll dive into these three core concepts to help you understand their role in ReactJS development.

What is ECMAScript (ES)? 

ES is an abbreviation used for ECMAScript. It is a standard for different scripting languages such as JavaScript made by ECMA. ECMA is an abbreviation used for the European Computer Manufacturers Association. It is a standard organization based out of Switzerland which takes care of ES. ES11 (2020) was updated in June 2020 and its nomenclature is like the year in which the update was released then the name will be a year plus one such as ES10 (2019). 

In ECMA Script6 also called ES6 and ECMAScript 2015 various new features were added:

The features are listed below:

• The let keyword
• The const keyword
• Arrow functions
• Classes
• Modules
• The Rest Parameters
• The Spread Operator
• Destructuring Assignment
• The Object Destructuring Assignment
• Default values for Function Parameters
• Template Literals
• The for...of Loop

Key Features of ES6+

Some of the key features of ES6+ that are widely used in ReactJS development include:

• Arrow Functions: Provide a shorter syntax for writing functions and automatically bind this.

  const greet = (name) => `Hello, ${name}`;

• Classes: Offer a syntactic sugar over the existing prototype-based inheritance model.

  class Person {
      constructor(name) {
          this.name = name;
      }
  
      greet() {
          return `Hello, ${this.name}`;
      }
  }

• Modules: Allow you to import and export code between files, helping modularize your codebase.

  // file1.js
  export const greet = () => console.log('Hello');
  
  // file2.js
  import { greet } from './file1';
  greet();  // Output: Hello

• Destructuring: Allows you to unpack values from arrays or properties from objects.

  const person = { name: 'John', age: 30 };
  const { name, age } = person;

• Template Literals: Provide an easier way to work with strings.

  const name = 'React';
  console.log(`Hello, ${name}!`);  // Output: Hello, React!

• Promises and Async/Await: Help manage asynchronous operations in a cleaner way.

  const name = 'React';
  console.log(`Hello, ${name}!`);  // Output: Hello, React!

Why ES is Important in ReactJS?

React components and applications are written in modern JavaScript (ES6 and beyond). Features like destructuring, classes, and arrow functions are commonly used to create React components and manage state. A solid understanding of ES6+ syntax will make your ReactJS development experience smoother.

What is Babel? 

Babel is a JavaScript compiler that allows developers to use next-generation JavaScript (ES6 and beyond) by converting it into a version of JavaScript that is supported by all browsers (usually ES5). Since not all browsers support modern JavaScript features out of the box, Babel is essential in React development to ensure compatibility across different environments.

How Babel Works?

Babel takes your modern JavaScript code and transforms it into compatible ES5 code. For example, an arrow function written in ES6:

const greet = (name) => `Hello, ${name}`;

Gets compiled by Babel into ES5 syntax:

var greet = function(name) {
    return 'Hello, ' + name;
};

Babel also supports the JSX syntax used in React, converting JSX into regular JavaScript function calls.

Setting Up Babel

To set up Babel in your React project, follow these steps:

1. Install Babel: First, you need to install Babel and some necessary presets.

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

2. Create a Babel Configuration File: Add a .babelrc file in your project root and configure it like this:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3. Run Babel: You can now compile your code using Babel by running:

npx babel src --out-dir dist

This will transpile all the JavaScript and JSX code from the src directory into browser-compatible JavaScript in the dist directory.

What is npm? 

npm (Node Package Manager) is the default package manager for Node.js, and it plays an important role in ReactJS development. It is used to manage dependencies (libraries, frameworks, and tools) that you want to include in your project. React itself is distributed as an npm package, and npm makes it easy to manage project dependencies and scripts.

How npm Works?

npm allows you to install, update, and manage JavaScript libraries that your project depends on. These dependencies are listed in a package.json file, which helps keep track of all packages required by your project.

Example of a package.json file:

{
    "name": "react-app",
    "version": "1.0.0",
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "scripts": {
        "start": "webpack serve",
        "build": "webpack"
    }
}

npm Commands for React Development

Here are some useful npm commands for React development:

1. Initialize a Project: When starting a new project, you can initialize npm by creating a package.json file.

npm init

2. Install a Package: To install a package like React, use:

npm install react

3. Install Development Dependencies: For development tools like Babel or Webpack, you can add --save-dev to install them as development dependencies.

npm install --save-dev webpack babel-loader

4. Run a Script: You can define custom scripts in package.json and run them using:

npm run script-name

How These Tools Work Together in React?

In React development, ES6+, Babel, and npm work together to provide a seamless experience:

• ECMAScript: You write your React components using modern JavaScript features (ES6+).
• Babel: Babel compiles your ES6+ code and JSX into browser-compatible JavaScript. It ensures that even browsers that do not support ES6 can run your React application.
• npm: npm handles installing React, Babel, and other dependencies you need for your project. It also helps you run and manage your development environment using scripts and package management.

Here’s an example workflow:

1. You write a React component using modern JavaScript (ES6) and JSX.
2. Babel compiles this code into browser-compatible ES5.
3. npm manages the React, Babel, and Webpack dependencies and helps automate the build process through scripts like npm run build.