El proyecto de verdad: React y Next.js

Hasta acá trabajamos con HTML puro. Para un prototipo está perfecto. Para un sitio profesional, no alcanza. Un sitio profesional necesita una librería que se llama React, que la hace Facebook, y un framework que se llama Next.js. Te explico las dos palabras porque las vas a escuchar mucho.

React es una librería para construir sitios web. Es el estándar mundial: lo más usado. Y como es lo más usado, la comunidad y otros fabricantes de software crean un montón de complementos que nosotros podemos aprovechar.

Un framework es como una caja de herramientas que ya viene desarrollada para que no tengamos que hacer todo desde cero. Next.js es el framework que usamos nosotros: es el estándar para hacer sitios web profesionales, y además nos da seguridad, entre otras cosas. React es la librería; Next.js es el framework que trabaja con esa librería y nos permite hacer sitios mucho más sólidos y sofisticados.

Hay otra razón para dejar el HTML: los componentes. En HTML, si la barra de arriba es la misma en todas las páginas, cada archivo la tiene que dibujar de nuevo. En React, esa barra es un componente: se arma una vez y se usa en todas las páginas. La editás en un lugar y cambia en todos lados. Es como armar con piezas de Lego. Y el proyecto queda con una arquitectura mucho más sana.

Paso 14: una carpeta nueva y vacía

Al aprobar el prototipo, la skill registra que está listo y te pide un repositorio de GitHub nuevo. Acá es donde va a crear el proyecto final.

Vamos a la aplicación de GitHub Desktop: nuevo repositorio, en la misma carpeta Documents/GitHub. Yo acostumbro a llamarlo con la tecnología que vamos a usar y después el nombre del sitio: nextjs-juszzz. Privado, como el otro.

La skill te pide la URL del repositorio, pero en realidad con la carpeta alcanza: le pasás la carpeta vacía que acabás de crear, y ahí va a montar el proyecto. La URL es sólo por si querés trabajar con otra cosa.

Y empieza. Toma el prototipo y lo lleva a Next.js, con varias buenas prácticas que la skill recomienda. Arma los componentes. Crea la carpeta de contenido editable (ya vas a ver para qué). Crea una página 404, la que aparece cuando alguien entra a una dirección que no existe en el sitio.

En el video, en este punto me quedé sin espacio en el disco y tuve que liberar un poco para seguir. Lo cuento porque pasa: ChatGPT va dejando archivos temporales, y si además estás grabando la pantalla, se llena. Tené siempre un poco de espacio libre.

Localhost y compilar

Cuando el proyecto está armado, ChatGPT lo corre en localhost. Localhost es tu propia computadora funcionando como si fuera un servidor web: ves el sitio en el navegador, pero sólo lo ves vos. Lo abre, saca capturas en todas las resoluciones, y audita cada página como venía haciendo. Fijate que vos no estás haciendo nada en este momento: él modifica las páginas, las crea, las audita.

Por eso a veces consume tantos tokens: por todos los pasos que da para asegurarse de que quede bien. Pero es necesario. No chequear que todo funciona en todas las resoluciones es algo que después juega en contra, cuando ya estás cerca del resultado final. Ahora que está construyendo de cero, es mucho más fácil darse cuenta y hacerlo bien de una sola vez. Claro que todo eso hay que pedírselo, y hay que usar skills diseñadas para eso.

Y hay otra cosa que hace, que es una gran cosa de esta skill: compila. Compilar es exportar el sitio a la versión que se va a subir: una carpeta que se llama build con el sitio ya listo. Muchas veces hay errores en el código que cuando corremos el sitio en local no vemos, porque el framework nos deja seguir trabajando aunque estén. Al compilar, aparecen. Que la skill verifique paso por paso que compila sin errores es lo que nos da la seguridad de que ese paso realmente quedó bien ejecutado y terminado.

Cuando dice «compila sin errores, se ve en el móvil, en la tableta y en el escritorio», vos lo mirás en el navegador. Lo vas a ver exactamente igual que el prototipo, pero ya son páginas de React, no HTML. Eso es lo que nos da la base para empezar a poner animaciones y a cambiar cosas.

Yo lo vi bien, conforme a lo que era el prototipo, y le dije que continuemos.

Ahora sí: la magia.