¿Cómo usar elementos JSX personalizados?

JSX es una extensión del lenguaje JavaScript que es útil para escribir aplicaciones React. JSX consta de etiquetas, atributos y elementos secundarios. También podemos crear nuestros propios elementos personalizados en React.

Un elemento personalizado nos brinda una nueva etiqueta HTML en el archivo JSX que podemos controlar a través de una API nativa del navegador.

Creación de la aplicación React

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

npx create-react-app example

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

cd example

Paso 3: cree un componente de carpeta dentro de una carpeta src del directorio del proyecto reactivo y dentro de la carpeta de componentes cree los archivos Counter.jsx e ImperativeCounter.jsx

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: escriba el siguiente código en Index.js, App.js, Counter.jsx e ImperativeCounter.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import "./components/ImperativeCounter";
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

import React from 'react';
import Counter from './components/Counter';
  
function App() {
    return (
        <div className="App">
            <Counter />
        </div>
    );
}
  
export default App;

import React, { useRef } from 'react'
  
function Counter() {
  
    const counterElement = useRef(null);
  
    const incrementCounters = () => {
  
        // Increment the imperative counter
        counterElement.current.increment();
    }
  
    const decrementCounters = () => {
  
        // Decrement the imperative counter
        counterElement.current.decrement();
    }
  
    return (
        <div>
            <div>
                <h5>Imperative Counter</h5>
                <i-counter ref={counterElement}>
                </i-counter>
            </div>
            <button
                onClick={incrementCounters}
                className="btn btn-primary">
                    Increment
                </button>
            <button
                onClick={decrementCounters}
                className="btn btn-primary">
                    Decrement
                </button>
        </div>
    )
}
  
export default Counter

class ImperativeCounter extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.currentCount = 0;
        this.update();
    }
  
    update() {
        const template = `
        <style>
          .counter {
            font-size: 25px;
          }
        </style>
        <div class="counter">
          <b>Count:</b> ${this.currentCount}
        </div>
      `;
        this.shadow.innerHTML = template;
    }
  
    increment() {
        this.currentCount++;
        this.update();
    }
  
    decrement() {
        this.currentCount--;
        this.update();
    }
}
  
window.customElements.define('i-counter', ImperativeCounter);

Inicialmente, lo que tenemos que hacer es definir y formar un elemento personalizado. Para hacerlo, creamos una clase que extiende la clase HTMLElement y luego damos el nombre del elemento con customElements.define().

class ImperativeCounter extends HTMLElement {
    // lines of code
}
window.customElements.define('i-counter', ImperativeCounter);

Ahora, ya que hemos configurado y definido el elemento personalizado, podemos usarlo.

Podemos hacer mucho más con el elemento personalizado en reaccionar. Tenemos tres métodos para expandir la funcionalidad de este elemento creado usando custom. Hay dos métodos similares al ciclo de vida que son útiles para nosotros, desconectadosCallBack y conectadosCallback y dado que esta es una clase, viene con un constructor.

Constructor: una instancia del elemento que se está creando o actualizando. Útil para inicializar el estado, configurar detectores de eventos o crear Shadow DOM. Consulte las especificaciones para conocer las restricciones sobre lo que puede hacer en el constructor.

connectedCallback: el elemento se inserta en el DOM. Útil para ejecutar el código de instalación, como obtener recursos o renderizar la interfaz de usuario. En general, debe intentar retrasar el trabajo hasta este momento.

desconectadoCallback: cuando el elemento se elimina del DOM. Útil para ejecutar código de limpieza.

Hagamos un elemento personalizado con atributos. 

class ImperativeCounter extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.currentCount = 0;
        this.update();
    }
}
  
window.customElements.define('i-counter', ImperativeCounter);

Ahora, agregaremos una función a esta clase para actualizar, incrementar y decrementar.

class ImperativeCounter extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.currentCount = 0;
        this.update();
    }
  
    update() {
        const template = `
        <style>
          .counter {
            font-size: 25px;
          }
        </style>
        <div class="counter">
          <b>Count:</b> ${this.currentCount}
        </div>
      `;
        this.shadow.innerHTML = template;
    }
  
    increment() {
        this.currentCount++;
        this.update();
    }
  
    decrement() {
        this.currentCount--;
        this.update();
    }
}
  
window.customElements.define('i-counter', ImperativeCounter);

class profile extends HTMLElement {
    constructor() {
        super();
  
        this.profileDetails = null;
  
        this.name = this.getAttribute("name");
        this.endpoint = 
            `https://api.github.com/repos/${this.name}`
        this.innerHTML = `<h1>Loading</h1>`
    }
    async getDetails() {
        return await fetch(this.endpoint, 
        { mode: "cors" }).then(res => res.json());
    }
}

Finalmente, hemos creado el elemento personalizado <i-counter ref={counterElement}></i-counter> y ahora podemos usarlo en nuestro jsx aap.

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:

Producción

Allí hemos creado un elemento personalizado que administra su propio estado y refleja ese estado al usuario mientras nos brinda un elemento HTML para usar en nuestro JSX.