4.5-20. Formas de crear Componentes

 

Componentes en React Native: Functional vs Class Components

En React Native existen dos formas principales de crear componentes. En este post, exploraremos ambas sintaxis para que puedas elegir la que mejor se adapte a tus necesidades.

🧩 Functional Components (Recomendado)

La forma más moderna y sencilla es usando Functional Components, que son básicamente funciones JavaScript que retornan JSX:

jsx

import React from 'react';
import { View } from 'react-native';

function MiComponente() {
  return <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />;
}

export default MiComponente;

Características:

✔ Más simples y legibles
✔ Menos código boilerplate
✔ Uso de Hooks (useState, useEffect, etc.)
✔ Estándar actual en React/React Native

---

🏛 Class Components (Legacy)

La segunda forma es mediante Class Components, que heredan de React.Component:

jsx

import React from 'react';
import { View } from 'react-native';

class MiComponenteClass extends React.Component {
  render() {
    return <View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />;
  }
}

export default MiComponenteClass;

Características:

🔹 Requieren método render()
🔹 Usan this para acceder a props y state
🔹 Tienen métodos de ciclo de vida (componentDidMount, etc.)

---

🔄 ¿Cuál Usar?

Functional Components	Class Components
✅ Moderno (Recomendado)	🟠 Legacy (Menos usado hoy)
✅ +Limpio/Conciso	🔹 Más verboso
✅ Hooks (useState, etc.)	🔹 this.setState

Aunque Functional Components son el estándar actual, es útil entender Class Components porque:

• Puedes encontrarlos en código legacy.

• Algunas librerías antiguas los usan.

• Te ayuda a entender la evolución de React.

---

📚 ¿Qué Viene Después?

En próximos posts cubriremos:

1. Props: Cómo pasar datos entre componentes.

2. State: Manejo del estado con useState (Functional) y this.setState (Class).

3. Eventos: Capturar interacciones del usuario.

---

💡 Consejo: Si estás comenzando, usa Functional Components + Hooks. Son más fáciles de aprender y la comunidad los prefiere.