React.js displayName

La string displayName se usa en la depuración de mensajes. Por lo general, no es necesario configurarlo explícitamente porque el nombre de la función o clase que describe el componente lo infiere. Si desea mostrar un nombre diferente para fines de depuración o cuando crea un componente de orden superior, puede configurarlo específicamente.

El displayName proporcionado por React es una característica muy recomendada que ayuda en gran medida en las pruebas unitarias y la depuración. También resulta útil al inspeccionar una pieza con las herramientas de desarrollo de React.

Creando la aplicación React:

• 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, muévase 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.

import React from 'react';
import ReactDOM from 'react-dom';
  
const child_class = class Myclass {
  render() {
    return (
      <div></div>
    )
  }
}
  
child_class.displayName = "Kapil";
class App extends React.Component {
  
  render() {
    return (
      <div>
        <p> 
            displayName of child class is: 
            {child_class.displayName}
        </p>
      </div>
    )
  }
}
  
export default App;

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: