Construir una aplicación funcional con React desde cero es más sencillo de lo que parece cuando cuentas con las herramientas adecuadas. Aquí aprenderás a configurar un proyecto con Code Sandbox, entender la estructura de archivos que genera Create React App, renderizar listas dinámicas con JSX y separar tu código en componentes reutilizables, todo sin instalar nada en tu computadora.
¿Qué es Code Sandbox y cuándo conviene usarlo?
Code Sandbox es un editor en línea que permite desarrollar con React —o cualquier framework de JavaScript— directamente desde el navegador, sin descargar nada [0:18]. Resulta ideal para hacer pruebas rápidas, conocer la sintaxis de una herramienta o dar un primer vistazo a su funcionamiento.
Sin embargo, hay una advertencia importante: no uses Code Sandbox para desarrollo real [0:38]. Cuando decidas aprender una herramienta de forma profesional o incluso por hobby, lo correcto es crear un entorno de desarrollo local en tu computadora. Code Sandbox es perfecto solo para experimentar.
¿Cómo se crea un proyecto nuevo?
Al vincular tu cuenta de GitHub con Code Sandbox, puedes crear un new sandbox seleccionando la plantilla oficial de React [1:21]. Esta plantilla utiliza Create React App, el CLI oficial de React para proyectos sencillos y de prueba, aunque tampoco se recomienda para producción [1:34].
¿Cómo está estructurado un proyecto de React?
El archivo package.json revela las tres dependencias principales del proyecto [1:52]:
- react: la librería central.
- react-dom: permite renderizar componentes en el navegador.
- react-scripts: incluye toda la configuración lista para trabajar.
El archivo index.js es el punto de entrada de la aplicación. Dentro de él se importa ReactDOM y se llama a su método render para mostrar el componente App [2:13]. También aparece StrictMode, una herramienta de React que aplica ciertas restricciones durante el desarrollo para fomentar buenas prácticas, aunque no es indispensable y puede eliminarse sin afectar el funcionamiento [2:41].
Lo relevante es que en este archivo ya se utiliza JSX, esa sintaxis muy parecida a HTML que permite escribir componentes de forma declarativa [2:55].
¿Qué contiene el componente App?
El archivo App.js exporta una función llamada App que retorna elementos HTML como div y títulos. También importa un archivo styles.css para los estilos [3:09]. Pero el objetivo es partir desde cero y construir algo propio.
¿Cómo se construye una app de películas con React?
El ejercicio consiste en crear una aplicación sencilla donde los usuarios seleccionen cuántos boletos quieren para diferentes películas. Lo primero es definir un array de películas fuera del componente [3:46]:
javascript
const movies = [
{ name: "Avengers", available: 5 },
{ name: "Terminator", available: 3 }
];
Cada película tiene un name y un valor available que representa los boletos disponibles.
¿Cómo se renderizan listas dinámicas en JSX?
Para mostrar cada película se utiliza el método map del array [4:37]. Dentro de map se define una arrow function que retorna el JSX correspondiente a cada elemento:
javascript
{movies.map((movie) => (
<h3>{movie.name}</h3>
))}
Esto permite iterar dinámicamente por el array: si se agregan más películas, la interfaz se actualiza automáticamente sin reescribir componentes [5:58].
Un detalle clave: React no permite retornar dos elementos hermanos sin un contenedor. Si intentas devolver un h2 y la lista map al mismo nivel, obtendrás un error. La solución es envolverlo todo dentro de un div [5:24].
¿Cómo se separa el código en componentes reutilizables?
Para organizar mejor el proyecto se crea un archivo Form.js con su propio componente [7:18]:
javascript
import React from "react";
export default function Form(props) {
const { movie } = props;
return (
<form>
<h3>{movie.name}</h3>
<button>-</button>
0
<button>+</button>
</form>
);
}
El componente recibe datos a través de props, que funcionan como los parámetros de la función [7:48]. Luego, desde App.js, se importa y se utiliza dentro del map:
javascript
{movies.map((movie) => (
<Form movie={movie} />
))}
También se puede usar el spread operator ({...movie}) para enviar todas las propiedades del objeto como props individuales [8:22]. Esto es equivalente a escribir name={movie.name} available={movie.available}, pero más compacto.
¿Qué sigue después de crear los componentes?
La aplicación ya muestra las películas con sus botones de sumar y restar, pero todavía no hace nada al hacer clic: la página simplemente se recarga [8:52]. El reto planteado es descubrir qué atributo HTML se necesita en el botón o el formulario para evitar esa recarga, usando solo conocimientos de HTML puro, sin framework [9:08].
En la siguiente sesión se trabajará con el estado de React para que el contador de boletos aumente o disminuya dinámicamente cada vez que el usuario presione los botones. ¿Ya sabes qué atributo HTML resuelve el problema de la recarga? Compártelo en los comentarios.
