ESTRUCTURANDO APLICACIONES WEB CON COMPONENTES DE REACT

React es una de las bibliotecas de JavaScript más populares y ampliamente utilizadas en la actualidad. Es una biblioteca de código abierto desarrollada por Facebook que permite a los desarrolladores crear interfaces de usuario interactivas y escalables utilizando componentes reutilizables. En este artículo, vamos a profundizar en los componentes de React, cómo se utilizan y cómo se pueden implementar en TypeScript.

¿Qué son los componentes de React?

Los componentes son la pieza fundamental de React. Son bloques de construcción reutilizables que representan una parte de la interfaz de usuario de una aplicación. Pueden ser muy simples, como un botón, o muy complejos, como un formulario completo. En cualquier caso, los componentes son una manera de modularizar y reutilizar el código en una aplicación.

Hay dos tipos de componentes en React: los componentes de clase y los componentes funcionales. Los componentes de clase son una forma más antigua de escribir componentes en React, mientras que los componentes funcionales son una forma más moderna y sencilla de escribirlos.

Los componentes de clase se definen utilizando una clase de JavaScript que extiende la clase React.Component. El componente de clase debe tener un método render que devuelve el HTML que se mostrará en la pantalla. A continuación mostramos un ejemplo de un componente de clase que muestra un mensaje de bienvenida:

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hola, { this.props.nombre }</h1>;
  }
}

export default Welcome;

Los componentes funcionales, por otro lado, son simplemente funciones de JavaScript que devuelven HTML. No tienen estado interno y no requieren de los métodos de ciclo de vida. Aquí está el ejemplo anterior escrito como un componente funcional:

import React from 'react';

interface Props {
  name: string;
}

export const Welcome = ({ nombre }: Props) => {
  return <h1>Hola, { nombre }!</h1>;
}

En ambos casos, estos componentes pueden ser utilizados en cualquier parte de la aplicación.

¿Cuándo se deben utilizar los componentes de React?

Los componentes de React se deben utilizar siempre que se necesite modularizar y reutilizar el código en una aplicación. Al utilizar componentes, es posible dividir la aplicación en partes más pequeñas y manejables, lo que facilita la creación y el mantenimiento de la aplicación en el tiempo.

Los componentes también son muy útiles cuando se quiere implementar un enfoque de diseño sistemático, en el que se utilizan componentes estándar para construir la interfaz de usuario. Esto hace que el proceso de diseño sea más coherente y escalable.

Además, los componentes de React son una excelente manera de manejar la complejidad del estado de la aplicación. Al dividir la aplicación en componentes más pequeños y manejables, es posible limitar el alcance del estado y reducir la posibilidad de errores y conflictos.

Casos de uso de los componentes de React con TypeScript

A continuación vamos a ver algunos casos de uso comunes para los componentes de React escritos en TypeScript:

1. Renderizar una lista de elementos:

import React from 'react';

interface Item {
  id: number;
  nombre: string;
}

interface Props {
  items: Item[];
}

export const ItemList = ({ items }: Props) => {
  return (
    <ul>
      { items.map((item) => (
        <li key={item.id}>{ item.nombre }</li>
      )) }
    </ul>
  );
};

En este ejemplo, el componente ItemList recibe un array de objetos Item como prop. El componente utiliza el método map para crear una lista de elementos li a partir de los objetos Item. La clave key se utiliza para identificar de manera única cada elemento de la lista.

2. Crear un formulario:

import React, { useState } from 'react';

interface Props {
  onSubmit: (nombre: string, email: string) => void;
}

export const Form = ({ onSubmit }: Props) => {
  const [ nombre, setNombre ] = useState('');
  const [ email, setEmail ] = useState('');

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit(nombre, email);
    setNombre('');
    setEmail('');
  };

  return (
    <form onSubmit={ handleSubmit }>
      <label>
        Nombre:
        <input type="text" value={ nombre } onChange={(e) => setNombre(e.target.value)} />
      </label>
      <label>
        Correo electrónico:
        <input type="email" value={ email } onChange={(e) => setEmail(e.target.value)} />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
};

En este ejemplo, el componente Form tiene un estado interno que mantiene el valor de los campos de entrada nombre y email. Cuando el usuario envía el formulario, el componente llama a la función onSubmit con los valores de nombre y email. También se restablecen los valores de nombre y email.

3. Crear una barra de navegación:

import React from 'react';
import { Link } from 'react-router-dom';

interface Props {
  links: { to: string; label: string }[];
}

export const Nav = ({ links }: Props) => {
  return (
    <nav>
      <ul>
        {links.map((link) => (
          <li key={ link.to }>
            <Link to={ link.to }>{ link.label }</Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

En este ejemplo, el componente Nav recibe un array de objetos link que contiene la ruta y la etiqueta de texto para cada enlace en la barra de navegación. El componente utiliza el componente Link de react-router-dom para crear un enlace a cada ruta. La clave key se utiliza para identificar de manera única cada enlace en la lista.

4. Crear una tabla:

import React from 'react';

interface Column {
  key: string;
  label: string;
}

interface Props {
  columns: Column[];
  rows: { [key: string]: any }[];
}

export const Table = ({ columns, rows }: Props) => {
  return (
    <table>
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={ column.key }>{ column.label }</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, index) => (
          <tr key={ index }>
            {columns.map((column) => (
              <td key={ column.key }>{ row[column.key] }</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

En este ejemplo, el componente Table recibe dos props: columns y rows. columns es un array de objetos que describe las columnas de la tabla, y rows es un array de objetos que representa las filas de la tabla.

El componente Table utiliza el método map para generar las cabeceras de las columnas y las celdas de la tabla. Cada celda se corresponde con un valor en el objeto de fila rows. La clave key se utiliza para identificar de manera única cada elemento en la lista.