5-50. Componente con Export Default y Export

 Componentes en React: ¿Export Default o Export Normal?

Cuando creas componentes en React/React Native, es clave entender cómo exportarlos correctamente. ¡Vamos a diferenciar export default de export normal con un ejemplo práctico!

📂 Estructura de archivos

Primero, creamos una carpeta components y dentro un archivo:

jsx

// Formulario.js
import React from 'react';
import { View, TextInput } from 'react-native';

---

1️⃣ Export Default (Recomendado para componentes principales)

jsx

// Dentro de Formulario.js
export default function Formulario() {
  return (
    <View>
      <TextInput placeholder="Cantidad a pedir" />
    </View>
  );
}

✅ Cómo importarlo:

jsx

// Puedes usar cualquier nombre al importar
import MiFormulario from './components/Formulario';

---

2️⃣ Export Normal (Para múltiples componentes/helpers)

jsx

// Dentro del mismo Formulario.js
export function FormularioV2() {
  return <TextInput placeholder="Versión 2" />;
}

✅ Cómo importarlo:

jsx

// Debes usar el nombre exacto entre llaves
import { FormularioV2 } from './components/Formulario';

---

🔄 Combinando ambos en un mismo archivo

jsx

import FormularioPrincipal, { FormularioV2 } from './components/Formulario';

---

💡 ¿Cuándo usar cada uno?

• export default: Ideal para el componente principal de un archivo.

• export normal: Útil cuando exportas múltiples funciones/componentes desde un mismo archivo (ej: helpers, variantes).

---

🛠 Ejemplo práctico

jsx

// App.js
import Formulario from './components/Formulario';
import { FormularioV2 } from './components/Formulario';

function App() {
  return (
    <>
      <Formulario />
      <FormularioV2 />
    </>
  );
}

⚠️ Nota: Los nombres de componentes deben empezar con mayúscula (convención de React).

---

📌 ¿Por qué es importante?

• export default: Más flexible al importar (puedes renombrarlo).

• export normal: Obliga a mantener consistencia en los nombres, útil para librerías.

¿Quieres ver el formulario terminado? ¡En el próximo post lo completaremos con estilos y funcionalidad! 👇

#ReactNative #JavaScript #WebDevelopment #Programming

---

¿Dudas? ¡Pregunta en los comentarios! Si prefieres un ejemplo con código completo, dime y lo comparto 😊.