¿Qué es un componente en React?

Un componente en React es una función de JavaScript que devuelve código JSX para mostrar información en pantalla.

Los componentes son la base de cualquier aplicación React. Todo lo que ves en una página —botones, menús, tarjetas de producto— es un componente.

Estructura de un componente funcional

Un componente funcional tiene tres partes esenciales:

1. El nombre de la función (debe iniciar con mayúscula)
2. La lógica interna (variables, cálculos, datos)
3. El return con JSX (lo que se muestra en pantalla)

Esta es la estructura mínima de un componente:

function NombreDelComponente() {
  return (
    <div>
      <p>Contenido aquí</p>
    </div>
  );
}

export default NombreDelComponente;

La línea export default permite que otros archivos importen y usen este componente.

Tipos de componentes en React

React ha tenido dos tipos de componentes a lo largo de su historia.

Componentes de clase

Los componentes de clase fueron el estándar antes de 2019. Requieren extender React.Component y usar el método render(). Hoy en día se consideran obsoletos para proyectos nuevos. Los verás en proyectos antiguos, pero no los usarás en esta lección.

Componentes funcionales

Los componentes funcionales son el estándar actual. Son funciones normales de JavaScript. Son más simples, más cortos y más fáciles de leer.

Toda esta lección usa componentes funcionales.

Ejemplo 1: Tu primer componente

Imagina que trabajas en el sitio de Liverpool y necesitas mostrar el nombre de la tienda en el encabezado.

function Encabezado() {
  return (
    <header>
      <h1>Liverpool — Moda y Hogar</h1>
      <p>Envíos a todo México</p>
    </header>
  );
}

export default Encabezado;

Este componente no recibe datos externos. Solo muestra texto fijo. Es el tipo más simple de componente.

Para usarlo en otro archivo, lo importas así:

import Encabezado from "./Encabezado";

function App() {
  return (
    <div>
      <Encabezado />
    </div>
  );
}

Observa que <Encabezado /> se escribe como una etiqueta HTML, pero con mayúscula. Esa es la convención de React para distinguir componentes de etiquetas nativas.

Ejemplo 2: Componente con datos internos

Ahora imagina que trabajas en Mercado Libre México y necesitas mostrar el precio de un producto con lógica interna.

function TarjetaProducto() {
  const nombre = "Teclado mecánico";
  const precio = 1850;
  const descuento = 0.10;
  const precioFinal = precio - precio * descuento;

  return (
    <div className="tarjeta">
      <h2>{nombre}</h2>
      <p>Precio original: ${precio.toLocaleString("es-MX")}</p>
      <p>Precio con descuento: ${precioFinal.toLocaleString("es-MX")}</p>
    </div>
  );
}

export default TarjetaProducto;

Aquí el componente tiene lógica real: calcula el precio con descuento antes de mostrarlo. Las llaves {} dentro del JSX permiten insertar expresiones de JavaScript.

Resultado en pantalla:

Teclado mecánico
Precio original: $1,850
Precio con descuento: $1,665

Ejemplo 3: Componente con lista de elementos

Supón que trabajas en FEMSA y necesitas mostrar una lista de sus marcas principales.

function ListaMarcas() {
  const marcas = ["OXXO", "Heineken México", "Coca-Cola FEMSA", "Bara"];

  return (
    <div>
      <h2>Marcas del grupo FEMSA</h2>
      <ul>
        {marcas.map((marca, index) => (
          <li key={index}>{marca}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListaMarcas;

El método .map() recorre el arreglo y genera un <li> por cada marca. El atributo key es obligatorio cuando generas listas en React. Omitirlo genera una advertencia en la consola.

Resultado en pantalla:

Marcas del grupo FEMSA
• OXXO
• Heineken México
• Coca-Cola FEMSA
• Bara

Reglas para nombrar componentes

React tiene reglas estrictas para los nombres de componentes.

Si el nombre empieza con minúscula, React lo interpreta como una etiqueta HTML y no lo renderiza correctamente.

Un componente, un archivo

La convención más común es guardar cada componente en su propio archivo. El nombre del archivo debe coincidir con el nombre del componente.

src/
├── App.jsx
├── Encabezado.jsx
├── TarjetaProducto.jsx
└── ListaMarcas.jsx

Esta organización facilita encontrar y mantener el código cuando el proyecto crece.

Errores comunes

Error 1: Nombre del componente en minúscula

// ❌ Incorrecto — React no lo reconoce como componente
function encabezado() {
  return <h1>Liverpool</h1>;
}

// ✅ Correcto
function Encabezado() {
  return <h1>Liverpool</h1>;
}

Cuando el nombre empieza en minúscula, React intenta buscar una etiqueta HTML llamada encabezado. No existe y el componente no se muestra.

Error 2: Olvidar el return

// ❌ Incorrecto — no hay return
function TarjetaProducto() {
  const nombre = "Pan Bimbo";
  <p>{nombre}</p>;
}

// ✅ Correcto
function TarjetaProducto() {
  const nombre = "Pan Bimbo";
  return <p>{nombre}</p>;
}

Sin return, el componente no devuelve nada. La pantalla queda vacía y no aparece ningún error claro.

Error 3: Retornar múltiples elementos sin un contenedor

// ❌ Incorrecto — dos elementos al mismo nivel
function Info() {
  return (
    <h1>Bimbo</h1>
    <p>Líder en panificación</p>
  );
}

// ✅ Correcto — envueltos en un div o Fragment
function Info() {
  return (
    <div>
      <h1>Bimbo</h1>
      <p>Líder en panificación</p>
    </div>
  );
}

JSX solo permite retornar un elemento raíz. Si necesitas varios elementos sin agregar un div extra, puedes usar <>...</> (Fragment).

Error 4: Olvidar el key en listas

// ❌ Incorrecto — sin key
marcas.map((marca) => <li>{marca}</li>)

// ✅ Correcto — con key único
marcas.map((marca, index) => <li key={index}>{marca}</li>)

React necesita el key para identificar cada elemento de la lista. Sin él, el rendimiento disminuye y aparecen advertencias en la consola.

Tabla de referencia rápida

Puntos clave

• Un componente funcional es una función de JavaScript que retorna JSX.
• El nombre siempre debe iniciar con mayúscula (PascalCase).
• Cada componente debe retornar un solo elemento raíz.
• Puedes incluir lógica de JavaScript antes del return.
• El atributo key es obligatorio cuando generas listas con .map().