15. Exportando un componente en react

  

Exportando un Componente en React

¿Qué es un Componente en React?

Un componente en React es una función de JavaScript que retorna código HTML (JSX). Cada componente es una pieza reutilizable de la interfaz de usuario.

Estructura Básica de un Componente

Veamos cómo se ve un componente típico:

jsx

// Importar recursos necesarios
import logo from './logo.svg';
import './App.css';

// Definir el componente como una función
function App() {
  // Retornar código HTML (JSX)
  return (
    <div className="App">
      <p>¡Hola Mundo!</p>
    </div>
  );
}

// Exportar el componente para que otros archivos puedan usarlo
export default App;

Paso a Paso: Crear y Exportar un Componente

1. Crear una Función de JavaScript

jsx

function MiComponente() {
  // Aquí va la lógica del componente
  
  return (
    // Código HTML que se mostrará
    <div>
      <h1>Mi Primer Componente</h1>
      <p>Este es un componente de React</p>
    </div>
  );
}

2. Retornar Código HTML (JSX)

El return del componente contiene lo que se verá en pantalla:

jsx

return (
  <div>
    <header>
      <img src={logo} alt="Logo" />
      <p>Texto de ejemplo</p>
    </header>
  </div>
);

Nota: Los componentes deben retornar un solo elemento padre. Si necesitas múltiples elementos, envuélvelos en un <div> o fragment <>.

3. Exportar el Componente (PASO CLAVE)

Para que otros archivos puedan usar tu componente, DEBES exportarlo:

jsx

// Exportación por defecto (recomendado para componentes principales)
export default MiComponente;

O también puedes usar exportación nombrada:

jsx

// Exportación nombrada
export { MiComponente };

¿Por qué es Necesario Exportar?

• Reconocimiento: Permite que index.jsx (el archivo raíz) pueda importar y usar el componente

• Modularidad: Facilita la organización del código en piezas reutilizables

• Mantenibilidad: Cada componente vive en su propio archivo y puede ser usado múltiples veces

Archivo index.jsx - El Punto de Entrada

Este archivo es donde React empieza a renderizar tu aplicación:

jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';  // ¡Aquí importamos nuestro componente exportado!

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />  {/* Aquí usamos el componente importado */}
  </React.StrictMode>
);

Ejemplo Completo

App.jsx:

jsx

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Bienvenido a React</h1>
      <p>Cada componente es una función que retorna HTML</p>
    </div>
  );
}

export default App;  // ¡Exportación obligatoria!

Buenas Prácticas

1. Un componente por archivo (generalmente)

2. Nombre del componente en PascalCase (App, MiComponente, NavBar)

3. Exportar al final del archivo

4. Usar JSX para escribir HTML dentro de JavaScript

5. Mantener componentes pequeños y enfocados en una tarea

Diferencia Entre .js y .jsx

• .jsx: Extensión que indica que el archivo contiene JSX (HTML en JavaScript)

• .js: También funciona, pero .jsx es más descriptivo en proyectos React

Importante: Conocimientos Previos

Para trabajar con React necesitas conocimientos básicos de:

• HTML: Etiquetas, estructura, atributos

• CSS: Estilos básicos

• JavaScript: Funciones, variables, export/import

Resumen

1. Un componente React es una función de JavaScript

2. La función retorna código HTML (JSX)

3. DEBES exportar el componente con export default NombreComponente

4. Otros archivos importan el componente usando import

5. index.jsx es el punto de entrada que renderiza tu componente principal

¡Listo! Ahora puedes crear y exportar tus propios componentes en React. Recuerda: sin la exportación, tu componente no podrá ser usado en otras partes de la aplicación