CodeAventura
React
▸Descubriendo React▸Componentes: las piezas del puzzle

Misión

// 1. Crea un componente Greeting aquí arriba
//    que retorne un <h1> con un saludo

// 2. Úsalo dentro de App
export default function App() {
  return (
    <div>
      {/* Usa tu componente Greeting aquí */}
    </div>
  );
}
●localhost:5173
03 / 21Componentes: las piezas del puzzle
Anterior

Componentes: las piezas del puzzle

¿Qué es un componente?

Un componente de React es una función de JavaScript que devuelve interfaz de usuario. Así de simple.

Eso es un componente completo. Una función que retorna JSX. Nada más.

Las dos reglas de un componente

Para que React reconozca algo como componente solo necesitas dos cosas:

  1. Nombre en PascalCase: empieza con mayúscula (Greeting, UserCard, NavBar). Si lo llamas greeting con minúscula, React lo tratará como una etiqueta HTML normal.

  2. Debe retornar JSX: la función debe devolver algo que React pueda renderizar (JSX, un string, un número, o null).

Usar un componente

Una vez creado, usas tu componente como si fuera una etiqueta HTML:

<Greeting /> se llama así porque es una etiqueta que se auto-cierra (como <img />). También puedes escribir <Greeting></Greeting>, pero si no tiene contenido entre las etiquetas, la forma corta es más limpia.

¿Lo mejor? Puedes reusar el mismo componente las veces que quieras. Tres <Greeting /> y tienes tres saludos. Sin copiar y pegar HTML.

Componentes dentro de componentes

Los componentes se pueden componer — meter unos dentro de otros:

App es el componente padre, y Title y Description son componentes hijos. Esta composición es la base de toda aplicación React.

¿Por qué dividir en componentes?

Imagina que tienes una página con 500 líneas de JSX. Encontrar un bug sería una pesadilla. Pero si cada parte tiene su propio componente:

  • Organización: cada componente tiene una responsabilidad clara
  • Reutilización: creas una vez, usas donde quieras
  • Mantenimiento: un bug en el header? Ve al componente Header
  • Trabajo en equipo: cada persona puede trabajar en componentes diferentes

Tu desafío 🚀

  1. Crea un componente Greeting encima de la función App que retorne un <h1> con un saludo
  2. Usa <Greeting /> dentro de App

Es tu primer componente propio. El primero de muchos.

Cada componente que crees es una pieza más en tu caja de herramientas. Pronto construirás interfaces completas combinando docenas de ellos.