Desarrollo de Aplicación RIA en Code Sandbox

¿Qué es Code Sandbox y por qué utilizarlo?

Cuando nos aventuramos a aprender una nueva herramienta de desarrollo como RIA (Reactive Interactive Applications), es fundamental arrancar con un entorno apropiado para pruebas. Code Sandbox es un editor en línea que brinda la oportunidad de experimentar con RIA y otros frameworks de JavaScript sin necesidad de instalar nada en el equipo, directamente desde el navegador. Perfecto para un vistazo inicial, pero siempre es aconsejable crear un entorno local cuando se quiera profundizar en el aprendizaje o desarrollo profesional.

¿Cómo crear tu primer proyecto con RIA?

Iniciar un proyecto con RIA en Code Sandbox es sencillo. Luego de crear tu cuenta vinculada con GitHub, se puede generar un nuevo Sandbox y seleccionar la plantilla oficial de RIA, que utiliza Create RIA app. Esta es ideal para proyectos de prueba, pero no para producción. El archivo package.json indica las dependencias fundamentales: react, react-dom, y react-scripts, que facilitan la configuración del proyecto.

Exploración de archivos y carpetas en RIA

En el archivo index.js, se observa una llamada a react-dom utilizando su método render para visualizar nuestra aplicación. Importamos el componente App y utilizamos sintaxis JSX, similar a HTML, para integrar el componente en nuestro proyecto. Aquí también se introduce el concepto de modo estricto (StrictMode), que restringe ciertas acciones para promover buenas prácticas de desarrollo.

¿Cómo manejar componentes y listas en React?

Vamos a construir una pequeña aplicación de películas donde se pueda elegir cuántos boletos queremos para diferentes películas. Iniciamos con un título y una lista de películas:

const movies = [
  { name: 'Avengers', available: 5 },
  { name: 'Terminator', available: 3 }
];

movies.map(movie => (
  <h3 key={movie.name}>{movie.name}</h3>
));

Estructuración y iteración en JSX

Para mostrar la lista de películas, utilizamos map() para iterar sobre el array de películas. Cada elemento de la lista se envuelve correctamente en un único elemento padre, como div, para cumplir con las reglas de JSX que prohíben enviar múltiples elementos hijos directos sin envoltura.

Creación de formularios y manejo de eventos

Integramos ahora un formulario que permita a los usuarios elegir cuántos boletos desean:

<form>
  <h3>{movie.name}</h3>
  <button>-</button>
  <span>{0}</span>
  <button>+</button>
</form>

Este formulario incluye botones que, aunque se muestran como inactivos por ahora ante los clics, pronto se conectarán para funcionar adecuadamente.

Descentralización con componentes

Para un código más limpio, crea componentes independientes. Observa cómo trasladamos el formulario a un archivo form.js:

import React from 'react';

export default function Form({ movie }) {
  return (
    <form>
      <h3>{movie.name}</h3>
      <button>-</button>
      <span>{0}</span>
      <button>+</button>
    </form>
  );
}

Aquí hemos importado React y exportamos el componente formulario. Recibimos el movie a través de props, permitiendo así reutilizar el formulario con distintas películas sin replicar el código.

Importancia del uso de props

Pasar propiedades es esencial para componentes reutilizables. Al enviar un objeto movie, facilitamos el acceso a sus propiedades internas, como name y available, en nuestro componente de formulario.

<Form key={movie.name} {...movie} />

Desafío: Evitar que el formulario recargue la página

Te invito a pensar cómo evitar la recarga de la página al interactuar con los botones del formulario. Esta es una cuestión que puede resolverse con un simple atributo HTML. Te animo a investigar y compartir tus hallazgos en los comentarios. ¡Nos vemos en la próxima clase para seguir aprendiendo juntos!