¿En qué se diferencia la sintaxis de ReactJS ES6 en comparación con ES5?

En este artículo, aprenderemos cuál es la diferencia exacta entre las sintaxis de ES6 y ES5 en ReactJs. Tanto ES6 como ES5 son lenguajes de secuencias de comandos Javascript en la industria del desarrollo. ECMA Script o ES es un lenguaje de secuencias de comandos de marca registrada creado por ECMA International. La Asociación Europea de Fabricación de Computadoras o ECMA se utiliza para secuencias de comandos del lado del cliente para la web mundial. ES5 se lanzó en 2009 y ES6 en 2015. ES5 fue bueno pero extenso. El nuevo ES6 es una importante actualización y mejora de ES5 en términos de optimización y legibilidad del código, en otras palabras, la sintaxis de ES-6 ayuda a una persona a que el código largo y tedioso sea un poco más corto y fácil de entender y comprender fácilmente.

ES5:

• La forma completa de ES5 es ECMA Script 5 y se desarrolló en 2009.
• Los tipos de datos permitidos aquí son número, string, nulo, booleano, indefinido y símbolo.
• ES5 usa el módulo require para importar cualquier módulo miembro en nuestro archivo de script.

Sintaxis:

var React = require('react'); // ES5

• En ES5 solo podemos usar var para definir una variable en el ámbito global.
• Es5 exporta cualquier componente como un módulo utilizando la palabra clave module.exports .

Sintaxis:

module.exports = Component; // ES5

• ES5 usa la palabra clave function junto con la palabra clave return para definir una función.

Sintaxis:

// ES5
var sum = function(x, y) {
    return x + y;
};

• ES5 usa la API createReactClass() o React.createClass() para crear una clase de componente de reacción y define un estado de componente de reacción mediante el método getInitialState() .
• La manipulación de objetos es lenta para el procesamiento.
• ES5 carece de nuevas funciones para su rendimiento, por lo que es comparativamente bajo, lo que lo hace menos legible (con el tiempo).
• ES5 tiene un gran apoyo de la comunidad ya que se ha utilizado durante mucho tiempo.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Ejemplo 1: Usar la sintaxis ES5 de React

Dentro del archivo index.js

var React = require("react"); // ES5
var ReactDOM = require("react-dom"); // ES5
var createReactClass = require("create-react-class"); // ES5
 
// ES5 Syntax
var CountComp = createReactClass({
  getInitialState: function () {
    return {
      counter: 0,
    };
  },
  Increase: function () {
    this.setState({
      counter: this.state.counter + 1,
    });
  },
  Decrease: function () {
    this.setState({
      counter: this.state.counter - 1,
    });
  },
  render: function () {
    return (
      <div>
        <button onClick={this.Increase}>
          Count increase
        </button>
        <h1> {this.state.counter} </h1>
        <button onClick={this.Decrease}>
          Count decrease
        </button>
      </div>
    );
  },
});
 
// ES5 Syntax
var Component = createReactClass({
  render: function () {
    return (
      <div>
        <CountComp />
      </div>
    );
  },
});
 
ReactDOM.render(<Component />,
    document.getElementById("root"));

Producción:

ES6:

• La forma completa de ES6 es ECMA Script 6 y se publicó en 2015.
• Los tipos de datos permitidos aquí son número, string, nulo, booleano, indefinido y símbolo.
• ES6 usa el módulo de importación para importar cualquier módulo miembro en nuestro archivo de script.

Sintaxis:

import React from 'react'; // ES6

• En ES6 también podemos usar let y const para definir una variable localmente.
• Es5 exporta cualquier componente como módulo utilizando la palabra clave predeterminada de exportación .

Sintaxis:

export default Component; // ES6

• En ES6 no necesitamos usar una palabra clave de función para definir una función. El uso de la función Flecha en ES6 lo hace más compacto. Estas son una función que se describe mediante la sintaxis ‘=>’.

Sintaxis:

var sum = (x,y)=>{ return x+y };// ES6

• ES6 usa la clase ES6 que extiende React.Component y define un estado de componente de reacción usando this.state en el constructor().
• La manipulación de objetos es rápida debido a la destrucción de objetos. Este proceso fortalece el patrón de unión al permitir su coincidencia con el patrón.
• ES6 proporciona un alto rendimiento debido a las funciones avanzadas que se le han agregado y la optimización del código.
• ES6 tiene menos soporte comunitario que ES5, ya que es una actualización reciente de ES5 y no todos los navegadores lo admiten.

Ejemplo 2: Usando la sintaxis ES6 de React

Dentro del índice . archivo js

import React from "react"; // ES6
import ReactDOM from "react-dom"; // ES6
 
let CountComp = (Compprop) =>
  class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        counter: 0,
      };
      this.Increase = this.Increase.bind(this);
      this.Decrease = this.Decrease.bind(this);
    } // ES6 Syntax
 
    // ES6 Syntax
    Increase() {
      this.setState({
        counter: this.state.counter + 1,
      });
    }
    Decrease() {
      this.setState({
        counter: this.state.counter - 1,
      });
    }
    render() {
      return (
        <div>
          <Compprop
            {...this.state}
            increase={this.Increase}
            decrease={this.Decrease}
          />
        </div>
      );
    }
  };
 
// ES6 Syntax
const Button = (props) => {
  return (
    <div>
      <button onClick={props.increase}>
        Count increase
      </button>
      <h1> {props.counter} </h1>
      <button onClick={props.decrease}>
        Count decrease
      </button>
    </div>
  );
};
 
// ES6 Syntax
let CompClick = CountComp(Button);
 
const Component = () => {
  return (
    <div>
      <CompClick />
    </div>
  );
};
 
ReactDOM.render(<Component />,
  document.getElementById("root"));

Producción:

Diferencia entre ES5 y ES6: