Logo de JSCamp

Componentes vs Funciones normales

Los componentes de React son funciones de JavaScript, pero no todas las funciones de JavaScript son componentes de React. En esta clase vamos a entender cuál es la diferencia y por qué es importante.

¿Qué es un componente de React?

Un componente de React es una función especial que:

  1. Retorna algo que React puede renderizar (JSX, elementos, strings, números, null, etc.)
  2. Su nombre empieza con mayúscula (PascalCase)
  3. Se usa como una etiqueta JSX (<MiComponente />)
// ✅ Esto es un componente
function Saludo() {
  return <h1>Hola</h1>
}

// Se usa así:
// <Saludo />

¿Qué es una función normal?

Una función normal de JavaScript es cualquier función que realizas tareas pero no necesariamente retorna JSX:

// ✅ Esto es una función normal
function calcularTotal(precio, iva) {
  return precio + precio * iva
}

// Se llama como función
const total = calcularTotal(100, 0.21)

Diferencias clave

1. Cómo se invocan

Componentes: Se usan como etiquetas JSX

function Boton() {
  return <button>Haz clic</button>
}

// Se invoca así:
// <Boton />

Funciones normales: Se llaman con paréntesis

function saludar(nombre) {
  return `Hola, ${nombre}`
}

// Se invoca así:
saludar('Miguel')

2. Lo que retornan

Componentes: Retornan elementos que React puede renderizar

function Titulo() {
  return <h1>Mi título</h1> // Retorna JSX
}

Funciones normales: Retornan cualquier tipo de dato JavaScript

function sumar(a, b) {
  return a + b // Retorna un número
}

function obtenerUsuario() {
  return { nombre: 'Miguel', edad: 25 } // Retorna un objeto
}

3. Convención de nombres

Componentes: PascalCase (primera letra mayúscula)

function MiComponente() {
  return <div>Hola</div>
}

Funciones normales: camelCase (primera letra minúscula)

function calcularPrecio() {
  return 100
}

¿Qué puede renderizar React?

React puede renderizar varios tipos de valores:

✅ Elementos JSX

function App() {
  return <h1>Hola mundo</h1>
}

✅ Strings (texto)

function Saludo() {
  return 'Hola desde un componente'
}

// También puedes renderizar strings directamente
<div>{'Texto entre llaves'}</div>
<div>Texto directo</div>

✅ Números

function Contador() {
  return 42
}

// También en JSX:
<div>{100}</div>
<div>{2 + 2}</div>

✅ null o undefined

Estos valores no renderizan nada visible, pero son válidos:

function Invisible() {
  return null // No renderiza nada
}

// Uso:
;<Invisible /> // No renderiza nada

PascalCase: ¿Por qué es importante?

Los componentes deben empezar con mayúscula. Esto no es solo una convención, es un requisito técnico de React.

¿Por qué?

React necesita distinguir entre:

  • Componentes personalizados (tus componentes)
  • Elementos HTML nativos (div, button, h1, etc.)
// React ve mayúscula = componente personalizado
<MiBoton /> // Busca un componente llamado MiBoton

// React ve minúscula = elemento HTML
<miboton /> // Renderiza un elemento HTML normal

Ejemplo práctico

// ✅ Correcto - PascalCase
function MiComponente() {
  return <div>Hola</div>
}

// uso: <MiComponente />
// React lo trata como componente

// ❌ Incorrecto - camelCase
function miComponente() {
  return <div>Hola</div>
}

// uso: <miComponente />
// React lo trata como una etiqueta HTML normal

Si usas minúscula, React pensará que es una etiqueta HTML desconocida y no funcionará correctamente.

Reglas de nomenclatura

// ✅ Correcto
function Boton() {}
function MiBoton() {}
function BotonPrimario() {}
function JobCard() {}

// ❌ Incorrecto
function boton() {} // Minúscula
function miBoton() {} // camelCase
function BOTON() {} // MAYÚSCULAS (técnicamente funciona, pero no es convención)
function boton_primario() {} // snake_case

Mezclando componentes y funciones

Es común tener funciones normales que ayudan a los componentes:

// Función normal (helper)
function formatearPrecio(precio) {
  return `${precio}€`
}

// Componente que usa la función
function Producto({ nombre, precio }) {
  const precioFormateado = formatearPrecio(precio) // Llamada normal

  return (
    <div>
      <h3>{nombre}</h3>
      <p>{precioFormateado}</p>
    </div>
  )
}

// Uso del componente
// <Producto nombre="Laptop" precio={999} />

Cuándo usar cada uno

Usa componentes cuando:

  • Necesitas renderizar UI (interfaz de usuario)
  • Quieres reutilizar un trozo de interfaz
  • Necesitas componer elementos visuales
function Tarjeta({ titulo, descripcion }) {
  return (
    <div className="card">
      <h2>{titulo}</h2>
      <p>{descripcion}</p>
    </div>
  )
}

Usa funciones normales cuando:

  • Necesitas hacer cálculos o transformaciones
  • Quieres formatear datos
  • Tienes lógica de negocio que no renderiza nada
function validarEmail(email) {
  return email.includes('@')
}

function obtenerFechaActual() {
  return new Date().toLocaleDateString()
}

Errores comunes

❌ Error 1: Llamar un componente como función

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

// ❌ Mal
const resultado = Saludo() // No hagas esto

// ✅ Bien
<Saludo /> // Usa como etiqueta

❌ Error 2: Usar minúscula para componentes

// ❌ Mal
function saludo() {
  return <h1>Hola</h1>
}

// ✅ Bien
function Saludo() {
  return <h1>Hola</h1>
}

❌ Error 3: Intentar renderizar objetos

// ❌ Mal
function Usuario() {
  return { nombre: 'Miguel', edad: 25 } // Error!
}

// ✅ Bien
function Usuario() {
  const usuario = { nombre: 'Miguel', edad: 25 }
  return (
    <div>
      {usuario.nombre} - {usuario.edad} años
    </div>
  )
}

El último repaso:

  • 🎯 Diferencia entre componentes y funciones - Cómo se usan y qué retornan
  • 🔤 Por qué PascalCase - React necesita distinguir componentes de HTML
  • 📦 Qué puede renderizar React - JSX, strings, números, null, arrays
  • ⚠️ Qué NO puede renderizar - Objetos planos
  • 🔧 Cuándo usar cada uno - Componentes para UI, funciones para lógica
  • 🚫 Errores comunes - Llamar componentes como funciones, usar minúsculas

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

💡 Recuerda: Los componentes son funciones especiales que retornan JSX y usan PascalCase. Las funciones normales ayudan con la lógica pero no se renderizan directamente.