Cómo se crea un componente en React

Vista previa del material en texto

¿Cómo se crea un componente en React? 
En React, hay dos formas principales de crear un componente: utilizando funciones (componentes 
funcionales) o utilizando clases (componentes de clase). A continuación, te mostraré cómo crear un 
componente utilizando ambas aproximaciones: 
 
1. Componente Funcional: 
Un componente funcional es una función que devuelve un fragmento de código JSX que define la 
estructura y el contenido del componente. Es la forma más sencilla y recomendada para crear 
componentes si no necesitas manejar el estado o usar métodos del ciclo de vida. 
 
```jsx 
import React from 'react'; 
 
// Definición de un componente funcional 
function MiComponenteFuncional() { 
 return ( 
 <div> 
 <h1>Hola, soy un componente funcional</h1> 
 <p>Este es mi contenido.</p> 
 </div> 
 ); 
} 
 
export default MiComponenteFuncional; 
``` 
 
2. Componente de Clase: 
Un componente de clase es una clase que extiende la clase `React.Component`. Permite manejar el 
estado y utilizar métodos del ciclo de vida del componente, lo que es útil cuando se necesita una 
lógica más compleja. 
 
```jsx 
import React, { Component } from 'react'; 
 
// Definición de un componente de clase 
class MiComponenteDeClase extends Component { 
 render() { 
 return ( 
 <div> 
 <h1>Hola, soy un componente de clase</h1> 
 <p>Este es mi contenido.</p> 
 </div> 
 ); 
 } 
} 
 
export default MiComponenteDeClase; 
``` 
 
Ambos enfoques son válidos y se utilizan ampliamente en React. Sin embargo, a partir de la versión 
16.8 de React, se introdujeron los Hooks, que permiten agregar estado y otros comportamientos a 
los componentes funcionales sin necesidad de usar clases. Por lo tanto, si estás desarrollando una 
aplicación con la última versión de React, se recomienda utilizar componentes funcionales junto con 
Hooks siempre que sea posible. 
 
Una vez que hayas definido tu componente, puedes utilizarlo en otras partes de tu aplicación, 
simplemente importándolo y colocándolo dentro de otros componentes o en el archivo principal de 
la aplicación para su renderizado en el DOM.