Que serían las <strong><code>props</code></strong> y porque se reciben con <strong><code>super(props)</code></strong>?

Hola Artick, te dejo este blogpost explicativo sobre props y porque se usa super(): https://overreacted.io/es/why-do-we-write-super-props/

Espero te sea de ayuda :D

Las props en React son objetos. Los objectos son el resultado de la interpretación de JSX. React utiliza estos objetos para definir las propiedades de los componentes y los atributos HTML.

JSX se encarga de convertir todo el HTML de React a Javascript puro utilizando los siguientes métodos:

• document.createElement
• node.appendChild
• element.innerHTML
• EventTarget.addEventListener

Ahora, los dos códigos que muestro a continuación son equivalentes.

// JSX
<NewComponent 
  text="Hola mundo"
  number={13}
  onClick={() => alert('Hi')} 
/>

// Javascript
const props = {
  'text': 'Hola mundo',
  'number': 13,
  'onClick': () => alert('Hi')
};
const newComponent = document.createElement(...);
newComponent.innerHTML = `${props.text} ${props.number}`;
newComponent.addEventListener('click', props.onClick);

React usa el paradigma de programación orientada a objetos para los componentes mediante React.Component. Así que para obtener todos los beneficios de React al crear componentes propios se hace necesario llamar el constructor de la clase padre.

Una implementación súper básica de React.Component

class React.Component {
  constructor(props) {
    // Crear observadores y definir propiedades de React...

    this.props = Object.assig({}, props);

    // Hacer HTML en caso de ser necesario
  }
}

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
  }
}

Al usar super(props) estamos ejecutando el constructor de la clase padre React.Component desde el constructor de la clase hija NewComponent. De esta forma NewComponent obtiene todas las propiedades que se definen en el constructor de React.Component.

Los props son los datos que le pasas al componente que estas construyendo y los recibes con super(props). super(props) se usa en el componente hijo y hace referencia al componente padre, de esa forma es posible compartir datos entre componentes.

Todo eso se simplifica mucho más cuando usas componentes de tipo función, el super(props) y el this dejan de usarse para poder usar hooks... en este caso el hook que te ayudaría sería useState()