En React, un componente también puede ser escrito usando la sintaxis de las clases ES6, como en el ejemplo anterior, usando la función de flecha.
Los componentes basados en clases son un enfoque ampliamente utilizado para crear componentes en React, si una aplicación requiere el estado para ser utilizada.
Crear un componente basado en la clase como este:
123456789importReact,{Componente}de "reaccionar";classClassComponentextendsComponent{render(){retorno<div>Este es un componente simple basado en una clase</div>;}}exportdefaultClassComponent;jsx
Como se puede ver en el ejemplo anterior, el componente está siendo importado desde el paquete reactivo, lo que nos permite convertir la clase en el componente utilizando la sintaxis ES6.
Además de la palabra clave del componente, el archivo también tiene una sección adicional llamada render () que es la función utilizada para renderizar los diversos elementos HTML en el DOM una vez que se ha implementado la lógica de negocio.
Se puede integrar otro componente infantil en cualquier componente de clase, como se explica en el siguiente ejemplo.
12345678910111213importReact,{Componente}de "reaccionar";classClassComponente extiendeComponente{render(){retorno(<ChildComponent1/ <ChildComponent2/ <ChildComponent3/;);}}exportarComponente de Clase por defecto;jsx
En este ejemplo, todos estos componentes hijos pueden ser componentes basados en clases o en funciones y pueden ser renderizados dentro del componente padre, llamado ClaseComponente.