18. Autocompletado de componentes

 Tutorial: Autocompletado de Componentes en React

📌 Objetivo

Aprender a crear componentes en React y cómo importarlos usando autocompletado para mejorar la eficiencia al programar.

---

🧩 Paso 1: Crear un nuevo componente

Vamos a crear un componente llamado Usuarios:

1. Ve a la carpeta src/components/

2. Crea un archivo llamado Usuarios.jsx

3. Escribe el siguiente código:

jsx

export function Usuarios() {

  return <h1>Soy usuarios</h1>;

}

Observaciones importantes:

• El nombre del componente empieza con mayúscula: Usuarios

• Exportamos la función directamente con export al principio

• Esto nos permitirá usar autocompletado al importarlo

---

🧩 Paso 2: Importar el componente con autocompletado

En src/index.jsx, vamos a importar nuestro nuevo componente:

jsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import { Coffee } from './components/Coffee';

import { Usuarios } from './components/Usuarios'; // ← ¡Autocompletado disponible!

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Coffee />

    <Usuarios /> {/* ← Usamos el componente aquí */}

  </React.StrictMode>

);

---

🔍 ¿Cómo funciona el autocompletado?

Cuando usas la sintaxis de importación con llaves {}:

jsx

import { NombreComponente } from './ruta';

VS la sintaxis sin llaves:

jsx

import NombreComponente from './ruta';

La primera forma activa el autocompletado en la mayoría de editores (VS Code, WebStorm, etc.) porque:

1. El editor puede buscar todas las exportaciones del archivo

2. Te sugiere automáticamente los nombres disponibles

3. Evita errores de tipeo

---

🚨 Regla importante: Nombres en Mayúscula

React necesita que los componentes empiecen con mayúscula:

• ✅ Usuarios, Coffee, Header

• ❌ usuarios, coffee, header

¿Por qué?

• React distingue entre componentes propios (<Usuario />) y elementos HTML (<div />)

• Si usas minúscula, React lo interpretará como una etiqueta HTML y buscará en el DOM

---

🧩 Paso 3: Comparación de métodos de exportación

Método 1: Con autocompletado (Recomendado)

jsx

// En Usuarios.jsx

export function Usuarios() {

  return <h1>Soy usuarios</h1>;

}

// En index.jsx

import { Usuarios } from './components/Usuarios';

Método 2: Sin autocompletado

jsx

// En Usuarios.jsx

function Usuarios() {

  return <h1>Soy usuarios</h1>;

}

export default Usuarios;

// En index.jsx

import Usuarios from './components/Usuarios';

Ventajas del método 1:

• Autocompletado automático

• Menos código (no necesitas línea extra de export default)

• Más claro visualmente

---

🎯 Beneficios de trabajar con componentes

1. Modularidad: Cada componente es una pieza independiente

2. Reutilización: Puedes usar el mismo componente en diferentes lugares

3. Mantenibilidad: Es más fácil encontrar y corregir errores

4. Organización: Tu proyecto se estructura como un LEGO de componentes

Ejemplo de estructura visual:

text

Página Principal

├── <Header />

├── <Coffee />

├── <Usuarios />

├── <Cards />

└── <Footer />

---

💡 Consejos adicionales

1. Nomenclatura: Usa nombres descriptivos en PascalCase

2. Un componente por archivo: Mejor organización

3. Carpetas organizadas: Agrupa componentes relacionados

4. Extensiones: Usa .jsx para componentes de React

---

📝 Resumen

• Crear componentes con nombres en mayúscula

• Usar export function NombreComponente() para habilitar autocompletado

• Importar con llaves: import { Componente } from './ruta'

• Aprovechar el autocompletado para evitar errores y escribir más rápido

• Disfrutar de la modularidad que ofrece React

---

🚀 Práctica sugerida

1. Crea un componente Header.jsx con un menú de navegación

2. Crea un componente Footer.jsx con información de contacto

3. Importa ambos en index.jsx usando autocompletado

4. Experimenta cambiando los nombres a minúscula para ver los errores

¡Ahora puedes construir aplicaciones React como un profesional, pieza por pieza!