Componentes en React

Hasta ahora hemos usado JSX para crear elementos, pero la verdadera potencia de React está en los componentes. Un componente es una función de JavaScript que retorna JSX. Es como crear tus propias etiquetas HTML personalizadas y reutilizables.

¿Qué es un componente?

Un componente es simplemente una función de JavaScript que devuelve JSX:

function Saludo() {
  return <h1>¡Hola desde un componente!</h1>
}

Y puedes usarlo como si fuera una etiqueta HTML:

<Saludo />

¿Por qué componentes?

🔄 Reutilizables - Escribe una vez, usa en cualquier lugar
📦 Organizados - Cada componente tiene su propia lógica
🧩 Componibles - Combina componentes para crear UIs complejas
🔧 Mantenibles - Más fácil de entender y modificar

Elemento vs Componente en React

En React, los elementos son los bloques básicos de la interfaz de usuario. Son lo que se renderizan en el DOM y son representados por etiquetas HTML.

<h1>Hola</h1>

Los componentes son funciones que retornan elementos.

function Saludar() {
  return <h1>Hola</h1>
}

<Saludar />

Esa es la diferencia fundamental entre elementos y componentes.

Tu primer componente: Saludar

Vamos a crear un componente simple para entender los conceptos básicos. Actualiza tu archivo react.html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React - Componentes</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="root"></div>

    <script type="module">
      import React from 'https://esm.sh/react?dev'
      import ReactDOM from 'https://esm.sh/react-dom/client?dev'
      window.React = React
      window.ReactDOMClient = ReactDOM
    </script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      // Nuestro primer componente
      function Saludar() {
        return <h1>¡Hola desde un componente!</h1>
      }

      // Renderizar el componente
      window.onload = () => {
        const rootEl = document.querySelector('#root')
        const root = ReactDOMClient.createRoot(rootEl)
        root.render(<Saludar />)
      }
    </script>
  </body>
</html>

Props: Pasando datos a componentes

Los componentes pueden recibir props (propiedades). Es como pasar argumentos a una función:

function Saludar(props) {
  return <h1>¡Hola, {props.nombre}!</h1>
}

// Usar el componente
// <Saludar nombre="Miguel" />

Destructuring de props

Es muy común usar destructuring para extraer las props directamente:

function Saludar({ nombre }) {
  return <h1>¡Hola, {nombre}!</h1>
}

// uso: <Saludar nombre="Miguel" />

Esto es más limpio que escribir props.nombre cada vez.

Múltiples props

Puedes pasar tantas props como necesites:

function Saludar({ nombre, edad, ciudad }) {
  return (
    <div>
      <h1>¡Hola, {nombre}!</h1>
      <p>
        Tienes {edad} años y vives en {ciudad}
      </p>
    </div>
  )
}

// uso: <Saludar nombre="Miguel" edad={25} ciudad="Madrid" />

💡 Nota: Los valores que no son strings se pasan entre llaves: edad={25} en lugar de edad="25".

Estilos en JSX: Un objeto JavaScript

Ahora vamos a añadir un estilo personalizado a nuestro componente. Importante: Recuerda que JSX es JavaScript, no HTML.

function Saludar({ nombre, color }) {
  const estilos = {
    color: color,
    fontSize: '32px',
    fontWeight: 'bold',
    textAlign: 'center',
  }

  return <h1 style={estilos}>¡Hola, {nombre}!</h1>
}

<Saludar nombre="Miguel" color="#09f" />
<Saludar nombre="Ana" color="#f90" />

¿Por qué estilos como objeto?

JSX es JavaScript, no HTML. Por eso:

✅ Los estilos son un objeto JavaScript
✅ Las propiedades usan camelCase: fontSize en lugar de font-size
✅ Los valores son strings: '32px' o números: 32
✅ Se pasan con llaves: style={estilos} o style={{ color: 'red' }}

Comparación:

<!-- HTML normal -->
<h1 style="color: red; font-size: 32px">Hola</h1>

// JSX (JavaScript)
<h1 style={{ color: 'red', fontSize: '32px' }}>Hola</h1>

Estilos inline con props

Puedes pasar los estilos directamente usando el valor de las props:

function Saludar({ nombre, color }) {
  return (
    <h1 style={{ color: color, fontSize: '32px', textAlign: 'center' }}>
      ¡Hola, {nombre}!
    </h1>
  )
}

<Saludar nombre="Miguel" color="blue" />
<Saludar nombre="Ana" color="green" />

O incluso más corto con la notación de propiedad abreviada:

function Saludar({ nombre, color }) {
  return <h1 style={{ color, fontSize: '32px' }}>¡Hola, {nombre}!</h1>
}

Cuando la propiedad del objeto tiene el mismo nombre que la variable (color: color), puedes escribir solo color.

Props son de solo lectura

Importante: Las props no se pueden modificar dentro de un componente. Son inmutables:

function Saludar({ nombre }) {
  // ❌ No puedes hacer esto
  nombre = 'Nuevo nombre' // Error!

  return <h3>{nombre}</h3>
}

Las props son como los argumentos de una función: puedes leerlos pero no modificarlos. Más adelante veremos el estado para manejar datos que sí cambian.

¡Lo que hemos aprendido de los componentes!

🧩 Qué son los componentes - Funciones que retornan JSX
📦 Cómo crear componentes - Nombres con mayúscula, retornar JSX
🔑 Qué son las props - Datos que se pasan a los componentes
🎨 Estilos en JSX - Objetos JavaScript, camelCase
🔄 Reutilización - El mismo componente con diferentes datos
🏗️ Composición - Combinar componentes para crear UIs complejas
⚡ Ventajas sobre vanilla JS - Código más limpio y mantenible

En la próxima clase aprenderemos sobre el estado (useState), que nos permitirá crear componentes interactivos que reaccionan a eventos del usuario.

💡 Recuerda: Los componentes son funciones que retornan JSX. Las props son los datos que reciben. JSX es JavaScript, por eso los estilos son objetos.