Tutorial React: Componentes funcionales

Sintaxis de componentes funcionales

En React, los componentes funcionales son una forma de definir componentes que utilizan funciones en lugar de clases. Esta sintaxis es más concisa y aprovecha las ventajas de los hooks para gestionar el estado y los efectos secundarios.

Un componente funcional es una función de JavaScript que recibe un objeto de propiedades (props) como argumento y devuelve un elemento de React. La sintaxis básica de un componente funcional es la siguiente:

export default function MiComponente(props) {
  return <div>{props.texto}</div>;
}

En este ejemplo, MiComponente es una función que recibe props y devuelve un elemento div que contiene el valor de props.texto.

Desestructuración de props

Para mejorar la legibilidad del código, es común desestructurar las propiedades directamente en la firma de la función del componente:

export default function MiComponente({ texto }) {
    return (
        <div>
            <h1>Hola, {texto}</h1>
            <p>Este es un componente básico en React.</p>
        </div>
    );
}

Este enfoque hace que el código sea más limpio y fácil de entender, especialmente cuando se manejan múltiples propiedades.

Componentes funcionales con children

Los componentes funcionales también pueden recibir children, que son los elementos anidados dentro del componente:

// Contenedor.jsx
export default function Contenedor({ children }) {
    return <div className="contenedor">{children}</div>;
}

import Contenedor from './components/Contenedor/Contenedor';

// App.jsx
const App = () => (
  <Contenedor>
    <h1>h1 en el contenedor</h1>
    <p>Pero puede ser cualquier cosa</p>
  </Contenedor>
)

export default App

En este ejemplo, Contenedor renderiza cualquier elemento pasado como children dentro de un div con la clase contenedor.

Ejemplo de componente de texto estático

En React, crear un componente de texto estático es una tarea sencilla y directa. Un componente de texto estático es aquel que no depende de props ni de estado, simplemente muestra un texto fijo. Este tipo de componentes es útil para mostrar elementos de interfaz de usuario que no cambian, como títulos, mensajes informativos o etiquetas.

Para crear un componente de texto estático, solo necesitamos definir una función que devuelva el elemento de React que queremos renderizar. A continuación, se muestra un ejemplo básico:

// TextoEstatico.jsx
export default function TextoEstatico() {
    return (
        <div>
            <p>Este es un componente de texto estático.</p>
        </div>
    );
}

En este ejemplo, la función TextoEstatico devuelve un elemento div que contiene un elemento p con el texto "Este es un componente de texto estático". Este componente no recibe ninguna propiedad ni tiene estado.

Para utilizar este componente en una aplicación de React, simplemente se importa y se utiliza como cualquier otro componente:

import TextoEstatico from './components/TextoEstatico/TextoEstatico';

// App.jsx
const App = () => (
  <div>
    <h1>Aplicación de ejemplo</h1>
    <TextoEstatico />
  </div>
)

export default App

En este ejemplo, el componente TextoEstatico se utiliza dentro del componente App, mostrando el texto estático en la interfaz de usuario.

Aunque este componente no utiliza props ni estado, es importante seguir algunas buenas prácticas:

• Nombrado de componentes: Utiliza nombres de componentes que sean descriptivos y claros. En este caso, TextoEstatico describe adecuadamente la función del componente.
• Estructura del componente: Incluso para componentes simples, es útil envolver el contenido en un div u otro contenedor adecuado para facilitar el estilo y la organización del DOM.

Ejemplo de componente que muestra la fecha actual

En React, podemos crear un componente funcional que muestra la fecha actual utilizando una simple variable que captura la fecha en el momento de la renderización. Este componente se renderiza con la fecha y hora actuales cada vez que es llamado.

Primero, definimos el componente funcional FechaActual. Este componente toma la fecha y hora actuales utilizando new Date() y las muestra en pantalla.

// FechaActual.jsx
export default function FechaActual() {
    const fecha = new Date().toLocaleString();

    return (
        <div>
            <p>La fecha y hora actual es {fecha}</p>
        </div>
    );
}

En este ejemplo, FechaActual es una función que:

1. Define una variable fecha que almacena la fecha y hora actuales en el momento en que el componente es renderizado. Esto se hace utilizando el método new Date().toLocaleString(), que formatea la fecha y hora en una cadena de texto legible.
2. Devuelve un elemento div que contiene un párrafo (p). Este párrafo muestra la fecha y hora actuales que se almacenaron en la variable fecha.

Para utilizar este componente en una aplicación de React, se puede importar y utilizar de la siguiente manera:

import FechaActual from './components/FechaActual/FechaActual';

// App.jsx
const App = () => (
  <div>
    <h1>Aplicación de ejemplo</h1>
    <FechaActual />
  </div>
)

export default App;

En este ejemplo, FechaActual se utiliza dentro del componente App, mostrando la fecha y hora actuales en la interfaz de usuario.

Ejemplo de componente que usa una variable

En React, es común crear componentes funcionales que utilizan variables para manejar datos y lógica interna. Estas variables pueden ser simples variables locales dentro del cuerpo de la función del componente o estados locales gestionados con useState.

A continuación, se muestra un ejemplo de un componente funcional que utiliza una variable local para construir un mensaje:

export default function ComponenteConVariable() {
    const mensaje = `El resultado de la suma es ${1 + 1}`;

    return (
        <div>
            <p>{mensaje}</p>
        </div>
    );
}

En este ejemplo, ComponenteConVariable realiza las siguientes acciones:

1. Se define una variable local mensaje que almacena una cadena de texto. Esta cadena de texto se construye utilizando una expresión simple que suma 1 + 1 y muestra el resultado dentro del mensaje.
2. El componente retorna un elemento div que contiene un párrafo (p). Este párrafo muestra el valor de la variable mensaje.

Ejemplo de componente con una estructura HTML completa

En React, es posible crear componentes funcionales que contengan una estructura HTML completa, incluyendo múltiples elementos y anidaciones. Esto es útil para construir interfaces de usuario complejas y bien estructuradas. A continuación, se muestra un ejemplo de un componente que representa una tarjeta de perfil con varios elementos HTML.

Primero, definimos el componente funcional TarjetaPerfil:

import './TarjetaPerfil.css';

// TarjetaPerfil.jsx
export default function TarjetaPerfil({ nombre, titulo, descripcion, imagen }) {
  return (
    <article className='tarjeta-perfil'>
      <img src={imagen} alt={`${nombre}'s profile`} className="tarjeta-perfil-imagen" />
      <div className="tarjeta-perfil-detalles">
        <h2 className="tarjeta-perfil-detalles-nombre">{nombre}</h2>
        <h3 className="tarjeta-perfil-detalles-titulo">{titulo}</h3>
        <p className="tarjeta-perfil-detalles-descripcion">{descripcion}</p>
      </div>
    </article>
  );
}

En este componente TarjetaPerfil:

1. Se reciben las propiedades nombre, titulo, descripcion e imagen.
2. Se devuelve un div con la clase tarjeta-perfil que contiene una estructura de tarjeta con una imagen y detalles del perfil.
3. Dentro del div principal, se incluye un elemento img para la imagen del perfil con la clase tarjeta-perfil-imagen.
4. Se anida otro div con la clase tarjeta-perfil-detalles-detalles que contiene:

• Un elemento h2 para mostrar el nombre con la clase tarjeta-perfil-detalles-nombre.
• Un elemento h3 para mostrar el título con la clase tarjeta-perfil-detalles-titulo.
• Un elemento p para la descripción con la clase tarjeta-perfil-detalles-descripcion.

Para utilizar este componente en una aplicación de React, se puede importar y utilizar de la siguiente manera:

import TarjetaPerfil from './components/TarjetaPerfil/TarjetaPerfil';

// App.jsx
const App = () => (
  <section>
    <h1>Aplicación de Ejemplo</h1>
    <TarjetaPerfil
      imagen={"https://i.pravatar.cc/128"}
      nombre={"John Doe"}
      titulo={"Software Developer"}
      descripcion={"Lorem ipsum dolor sit amet"}
    />
  </section>
)

export default App

En este ejemplo, TarjetaPerfil se utiliza dentro del componente App, pasando las propiedades nombre, titulo, descripcion e imagen para representar un perfil de usuario.

Este enfoque permite crear componentes reutilizables y bien estructurados que pueden ser fácilmente personalizados mediante el uso de propiedades. Además, al utilizar clases CSS, se puede aplicar estilos de manera modular y consistente. Aquí se muestra un ejemplo de cómo podrían definirse los estilos CSS para este componente:

/* TarjetaPerfil.css */
.tarjeta-perfil {
    --card-color: #1b8bee;
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 16px;
    width: 428px;
    background-color: color-mix(in srgb, var(--card-color), transparent 88%);
    border-radius: 0.375rem;
    padding: .75rem;
    .tarjeta-perfil-imagen {
        aspect-ratio: 1;
        width: 100%;
        border-radius: 50%;
    }
    .tarjeta-perfil-detalles {
        text-align: start;
        >* {
            margin: 0;
        }
        .tarjeta-perfil-detalles-nombre {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
        }
        .tarjeta-perfil-detalles-titulo {
            font-size: 1rem;
            font-weight: 500;
            color: #4b5563;
        }
        .tarjeta-perfil-detalles-descripcion {
            font-size: 0.875rem;
            font-weight: 400;
            color: #6b7280;
        }
    }
}

Este archivo CSS define estilos para las clases utilizadas en el componente TarjetaPerfil, asegurando que la tarjeta tenga un diseño moderno y consistente. Estos estilos incluyen un esquema de colores adaptable, disposición en cuadrícula, y espaciado uniforme. Además, se aplican estilos específicos para la imagen de perfil, que se muestra en forma circular, y para los detalles de texto dentro de la tarjeta, como el nombre, el título y la descripción, con tamaños y pesos de fuente que garantizan una jerarquía visual clara y una lectura agradable.