Convertir un proyecto de e-commerce construido con HTML y CSS puro en una aplicación completa de React requiere entender cómo separar cada sección en componentes reutilizables, respetar las reglas de JSX y organizar la arquitectura del proyecto de forma escalable. A continuación se explican los pasos fundamentales para lograrlo.
¿Cómo se estructura el proyecto base de HTML y CSS?
El punto de partida es un repositorio creado en el curso práctico de Frontend Developer, donde cada vista del e-commerce —login, recuperar contraseña, cuenta de usuario, modales— ya está maquetada en archivos HTML independientes con sus estilos embebidos [0:10]. Cada archivo corresponde a una clase del curso anterior y reproduce fielmente el diseño propuesto en Figma.
Para trabajar localmente, se clona el repositorio con git clone y se inspecciona cada archivo en el navegador [1:15]. Esto permite confirmar que la estructura está bien ordenada, que los estilos funcionan y que cada sección ya está separada por módulos, lo cual facilita enormemente la migración a React.
¿Qué ofrece GitHub para inspeccionar código sin salir del navegador?
GitHub incorpora una característica que permite abrir cualquier repositorio en un Visual Studio Code en la nube con solo presionar la tecla punto (.) dentro del navegador [4:10]. Esto abre un editor visual completo donde se puede revisar el código, personalizarlo e incluso alinear la configuración con las preferencias locales, sin necesidad de clonar nada.
¿Cómo diferenciar componentes, contenedores y páginas en React?
Al analizar el código HTML del login, se identifica que no es un componente aislado sino una sección completa de la aplicación [5:30]. Dentro de ella existen elementos más pequeños —como un formulario o un input— que sí podrían convertirse en componentes reutilizables. Esta distinción es clave:
- Componentes: piezas pequeñas y reutilizables, como un campo de texto o un botón.
- Contenedores: secciones que agrupan varios componentes y representan una vista, como el login.
- Páginas: vistas completas que combinan contenedores y componentes.
Dentro del proyecto React, se crea la carpeta src/Containers y allí se añade el archivo Login.jsx [5:55]. Esta organización permite mantener el código ordenado y escalable a medida que se añaden más vistas.
¿Cómo acelerar la creación de componentes con snippets?
Usando el plugin de snippets para Visual Studio Code, se pueden generar estructuras de código con atajos de teclado [6:30]:
imr + Tab genera automáticamente import React from 'react'.slr + Tab crea un stateless component con su estructura de retorno lista.
Estos atajos ahorran tiempo y reducen errores al escribir código repetitivo.
¿Qué cambios son obligatorios al migrar HTML a JSX?
JSX no es HTML puro; es una extensión de JavaScript que tiene reglas propias. Ignorarlas provoca warnings o errores que impiden que la aplicación funcione correctamente.
¿Por qué reemplazar class por className?
En JavaScript, class es una palabra reservada utilizada para definir clases. Dentro de JSX se debe usar className (con la N en mayúscula) para asignar clases CSS [7:20]. Un atajo práctico es seleccionar todas las ocurrencias de class con Ctrl + D y reemplazarlas de una sola vez por className.
jsx
// Incorrecto en JSX
<div class="login-container">
// Correcto en JSX
<div className="login-container">
¿Por qué todas las etiquetas deben cerrarse en React?
En HTML es válido dejar etiquetas como <input> sin cierre explícito. En React, todas las etiquetas deben cerrarse [8:10]. Las etiquetas que no tienen contenido interno se cierran con una barra al final:
jsx
// Incorrecto en JSX
<input type="text">
// Correcto en JSX
<input type="text" />
Estos dos ajustes —className y el cierre de etiquetas— son los errores más comunes al trasladar código HTML a componentes React. Tenerlos presentes desde el inicio evita depuración innecesaria.
Con la estructura del proyecto clonada, las secciones identificadas y el primer contenedor de login migrado a JSX, el siguiente paso será añadir los estilos usando Sass y verificar que el componente se renderice correctamente. Si ya has trabajado con este proyecto, comparte qué sección te resultó más interesante de separar en componentes.
