Uso del método super() dentro del constructor del componente

El super() se usa dentro del constructor con el propósito de obtener acceso a esta palabra clave dentro de nuestro constructor. Con esto, intentemos entender super() primero.

Super es una palabra clave en JavaScript y se utiliza para llamar a super o clase principal en la jerarquía. La clase React amplía React Component con sintaxis ES6. Si deseamos establecer una propiedad o acceder a ella dentro del constructor, debemos llamar al método super(). 

Creando la aplicación React:

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

npx create-react-app filename

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

cd filename

Estructura del proyecto: Se verá así:

estructura de carpetas

Ejemplo 1: Este ejemplo ilustrará el uso de super() dentro del constructor del componente:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);
  
// If you want to start measuring performance in 
// your app, pass a function
  
// To log results 
// (for example: reportWebVitals(console.log))

import React from 'react'
  
class MyComponent extends React.Component {
    constructor() {
        // Undefined
        console.log(this) 
    }
    render() {
        // Defined
        return <div>Super Concept</div>; 
    }
}
  
export default MyComponent;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Cuando ejecutamos el código anterior, recibimos un error de que esto no está permitido antes de super(). Ahora abra su navegador y vaya a http://localhost:3000/, verá el siguiente resultado:

Para resolver ese error, usamos super() en el constructor. Por lo tanto, siempre que queramos acceder a esto dentro del constructor, necesitamos super() dentro del constructor. 

Palabra clave ‘esto’: la palabra clave JavaScript this se refiere al objeto al que pertenece.

Ejemplo 2: Este ejemplo ilustra el código resolviendo ese error que usamos super() en el constructor.

import React from 'react'
  
class MyComponent extends React.Component {
constructor() {
    super()
    console.log(this) 
}
  
render() {
    return <div>Super Concept</div>; // Defined
}
}
  
export default MyComponent;

Producción:

Ahora, podemos tener acceso a esto en nuestro constructor y usarlo para tener acceso a los accesorios si eso se ha pasado al componente.