¿Qué es la herencia de componentes en React?

La herencia es un concepto que juega un papel importante en la programación orientada a objetos. Es una técnica que permite que los objetos tengan aquellas propiedades que ya existen en los objetos anteriores.

Existen dos clases son:

• Superclase (clase principal)
• Subclase (clase secundaria)

En React, se usa el modelo de composición en lugar de la herencia, por lo que el código se puede reutilizar nuevamente entre los componentes. En reaccionar extiende la palabra clave se usa en la función principal, es decir, la función constructora. Al usar la palabra clave extends, puede hacer que el componente actual tenga todas las propiedades del componente del componente ya existente. El modelo de composición utiliza la relación de super-subclase al pasar el estado y los accesorios. El segmento de subclase puede acceder a cualquier progresión entre sí.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando en la terminal/símbolo del sistema:

  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:

Estructura del proyecto

Aquí, tiene dos componentes, es decir , AppComponent y ChildComponent , y el componente secundario se hace cargo de todas las propiedades de la aplicación.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado (principal) donde hemos escrito nuestro código. En el siguiente código, this.state.message se pasa a ChildComponent.

import logo from './logo.svg';
import React from 'react';
import './App.css';
import ChildComponent from "./ChildComponent";
  
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: " Geeks for Geeks message"
        };
    }
  
    render() {
        return (
            <div>
                <ChildComponent message={this.state.message} />
            </div>
        );
    }
}
export default App;

Ahora escriba el siguiente código en el archivo ChildComponent.js. El componente secundario acepta todas las propiedades del componente de la aplicación.

import React from "react";
  
class ChildComponent extends React.Component {
    render() {
        const { message } = this.props;
        return (
            <div>
              <p> Message from App component : <b>{message}</b> </p>
            </div>
        );
    }
}
  
export default ChildComponent;

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

npm start

Producción: 

Componente secundario accedió a las propiedades del componente de la aplicación