Componentes funcionales en React

Hasta ahora hemos estado jugando dentro de App.jsx. Pero el verdadero poder de React no es escribir un archivo gigante con todo el HTML, sino dividir la interfaz en piezas pequeñas, independientes y reutilizables.

Imaginad que estáis construyendo un coche. No se fabrica todo el coche partiendo de un bloque de metal. Se fabrica el motor, las ruedas y los asientos por separado, y luego los montan.

En React (y en casi cualquier framework moderno) se hace lo mismo, es dividen las cosas en Components. En este artículo vamos a aprenderlos en React con la sintaxis componentes funcionales.

¿Qué es un componente funcional?

Hoy en día, un componente en React es, simplemente, una función de JavaScript que devuelve JSX.

// Esto es un componente válido
function MiComponente() {
  return <h1>Soy un componente</h1>;
}

Con la llegada del los Hooks (que veremos pronto) que las funciones fueran capaces de hacerlo todo. Así descanbaron a la sintaxis anterior basada en clases, por ser más concisas y fáciles de leer.

Nombres siempre en PascalCase

Los nombres de los componentes siempre deben empezar por Mayúscula.

• ✅ bien: Boton, NavBar, UserProfile
• ❌ mal: boton, navBar, userProfile

React es muy estricto con esto, porque lo usa para poder distinguir vuestros componentes de las etiquetas HTML nativas.

Creando nuestro primer componente

Vamos a ser ordenados desde el principio. Dentro de vuestra carpeta src, cread una nueva carpeta llamada components.

Dentro, vamos a crear un archivo llamado Saludo.jsx.

Escribamos nuestro componente:

// src/components/Saludo.jsx

function Saludo() {
  const nombre = "Luis";

  return (
    <div>
      <h2>Hola, {nombre}!</h2>
      <p>Bienvenido a tu primer componente.</p>
    </div>
  );
}

export default Saludo;

Importando y usando el Componente

Ahora que tenemos la pieza fabricada (Saludo.jsx), vamos a usarla en nuestro archivo principal (App.jsx).

Volvemos a src/App.jsx y hacemos lo siguiente:

// src/App.jsx
import './App.css'
// 1. Importamos el componente
import Saludo from './components/Saludo'; 

function App() {
  return (
    <div className="App">
      <h1>Mi Aplicación</h1>
      
      {/* 2. Lo usamos como si fuera una etiqueta HTML */}
      <Saludo />
      
      {/* 3. ¡Podemos reutilizarlo las veces que queramos! */}
      <Saludo />
      <Saludo />
    </div>
  )
}

export default App

Acabamos de hacer Composición. Hemos creado una interfaz compleja (App) a partir de piezas más simples (Saludo).

Si mañana queremos cambiar el texto del saludo, solo editamos Saludo.jsx y se actualizará automáticamente en los tres sitios.

Tipos de exportación: Default vs Named

En el ejemplo anterior hemos usado export default. Es lo más común para componentes: Un archivo = Un componente principal.

Sin embargo, a veces querremos tener un archivo con varios componentes pequeños (por ejemplo, una colección de iconos o botones simples). Para eso usamos las Named Exports.

// Archivo: Botones.jsx
export function BotonAzul() { return <button className="blue">Azul</button> }
export function BotonRojo() { return <button className="red">Rojo</button> }

// Importación (el nombre debe coincidir y usar llaves)
import { BotonAzul, BotonRojo } from './Botones';

Buenas prácticas de estructura

A medida que el proyecto crece, la carpeta components puede volverse un caos. Un patrón muy común en la industria es el Barrel File o indexación, pero para este curso inicial usaremos una agrupación lógica simple.

Si un componente es muy complejo, cread una carpeta con su nombre: