Maquetando formularios en React

¿Cómo crear un formulario en React para añadir tareas?

Iniciar un proyecto en React y enfrentarse al desafío de expandir sus funcionalidades puede parecer complicado. Sin embargo, una vez que entendemos cómo operar los componentes y manejar los eventos, el camino se vuelve más claro. En esta guía te mostraré cómo diseñar un componente para añadir tareas, desde su creación en HTML hasta los detalles de estilo con CSS y la gestión de eventos con JavaScript.

¿Cómo estructurar el componente TodoForm?

Para empezar, crearemos un nuevo componente llamado TodoForm que se encargará de añadir nuevas tareas a nuestra aplicación de lista de tareas (todo list). Este componente tendrá la siguiente estructura básica:

• Un formulario (form) para envolver todos los elementos.
• Un label con el texto "Escribe tu nuevo todo".
• Un elemento textarea para que el usuario ingrese el texto de su tarea.
• Dos botones: uno para cancelar la acción y otro para añadir la tarea.

La estructura básica del componente se traduce al siguiente código:

import React, { useState } from 'react';

function TodoForm() {
  return (
    <form>
      <label>Escribe tu nuevo todo</label>
      <textarea placeholder="Cortar cebolla para el almuerzo"></textarea>
      <div className="todoForm-buttonContainer">
        <button type="button" className="todoForm-button todoForm-button-cancel">Cancelar</button>
        <button type="submit" className="todoForm-button todoForm-button-add">Añadir Todo</button>
      </div>
    </form>
  );
}

export default TodoForm;

¿Cómo estilizar un formulario en CSS?

Después de definir la estructura del componente, el siguiente paso es aplicar CSS para mejorar su apariencia. Utilizamos display: flex para alinear verticalmente la mayoría de los elementos y organizar horizontalmente los botones. He aquí un ejemplo de cómo podría lucir tu CSS:

.todoForm {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: auto;
}

.todoForm-buttonContainer {
  display: flex;
  justify-content: space-between;
}

.todoForm-button {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.todoForm-button-cancel {
  background-color: transparent;
}

.todoForm-button-add {
  background-color: blue;
  color: white;
}

¿Cómo manejar eventos en formularios de React?

Uno de los aspectos fundamentales al trabajar con formularios en React es el manejo de eventos. Especialmente, necesitamos prevenir el comportamiento por defecto que recargaría la página. Esto se realiza utilizando preventDefault:

function handleSubmit(event) {
  event.preventDefault();
  // Aquí se añadiría la lógica para añadir el todo
}

function TodoForm() {
  return (
    <form onSubmit={handleSubmit}>
      {/* ...resto del código */}
    </form>
  );
}

¿Qué otros aspectos debo considerar?

• Placeholder: Usa placeholders en los campos textarea para guiar al usuario.
• Accesibilidad: Asegúrate de que todos los labels estén correctamente asociados a los campos de entrada.
• Móvil Primero: Considera empezar con un diseño que se vea bien en dispositivos móviles.
• Metodologías de CSS: Investigar y aplicar metodologías como BEM puede ayudar a mantener estilos consistentes.

¡Ahora tienes las herramientas básicas para crear e integrar un nuevo componente en tu aplicación de tareas con React! Anímate a experimentar, personalizar y seguir aprendiendo sobre cómo React y CSS trabajan de la mano para ofrecernos interfaces de usuario robustas y atractivas.