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 componentefunction 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 normalfunction calcularTotal(precio, iva) {  return precio + precio * iva}// Se llama como funciónconst 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 - PascalCasefunction MiComponente() {  return <div>Hola</div>}// uso: <MiComponente />// React lo trata como componente// ❌ Incorrecto - camelCasefunction 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

// ✅ Correctofunction Boton() {}function MiBoton() {}function BotonPrimario() {}function JobCard() {}// ❌ Incorrectofunction boton() {} // Minúsculafunction miBoton() {} // camelCasefunction 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ónfunction 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>}// ❌ Malconst resultado = Saludo() // No hagas esto// ✅ Bien<Saludo /> // Usa como etiqueta

❌ Error 2: Usar minúscula para componentes

// ❌ Malfunction saludo() {  return <h1>Hola</h1>}// ✅ Bienfunction Saludo() {  return <h1>Hola</h1>}

❌ Error 3: Intentar renderizar objetos

// ❌ Malfunction Usuario() {  return { nombre: 'Miguel', edad: 25 } // Error!}// ✅ Bienfunction 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.