Análisis de rutas y componentes en React

Uno de los momentos más desafiantes al comenzar un proyecto en React es saber por dónde empezar. Antes de escribir una sola línea de código, es fundamental entender la estructura visual de la aplicación y traducirla en páginas y componentes organizados. Aquí se explica paso a paso cómo identificar las vistas principales, crear la estructura de carpetas y preparar todo para el enrutamiento.

¿Cómo identificar las páginas principales de tu aplicación?

El primer paso consiste en abrir el proyecto terminado (o el diseño) en el navegador y reconocer cuáles son las vistas padre [0:28]. Estas vistas grandes, que contienen todos los elementos visibles, se denominan pages o páginas. Cada una representa una ruta diferente dentro de la aplicación.

Al analizar el proyecto terminado se identifican las siguientes páginas:

• Home: muestra productos, barra de búsqueda y título. Todo lo que aparece al navegar por secciones como clothes o electronics sigue viviendo dentro de esta misma página [1:08].
• My Orders: lista de órdenes realizadas, aunque esté vacía inicialmente [1:52].
• My Account: permite editar la información de la cuenta [2:02].
• Sign In: formulario de inicio de sesión [2:10].
• My Order: vista individual que aparece al presionar checkout [2:28].
• Not Found: página para rutas inexistentes, útil cuando el usuario escribe una dirección incorrecta [5:22].

Este ejercicio de observación es clave porque evita crear páginas duplicadas y permite planificar el enrutamiento desde el inicio.

¿Qué estructura de carpetas necesitas en React?

Una vez identificadas las páginas, el siguiente paso es trasladar esa planificación al código. La idea central es que existe una página contenedora llamada App, donde van a vivir todas las rutas [3:08]. Cada ruta apunta a una página específica, y dentro de cada página se colocan los componentes correspondientes: cards, navbar, formularios, entre otros [3:38].

¿Cómo organizar las carpetas dentro de SRC?

Dentro de la carpeta src se crea una carpeta padre llamada pages [4:28]. Allí se generan subcarpetas con el nombre de cada página:

• app/
• home/
• myAccount/
• myOrder/
• myOrders/
• signIn/
• notFound/

Cada subcarpeta contiene un archivo index.jsx que actúa como puerta de entrada al componente [5:00]. Al nombrar el archivo como index.jsx, React lo reconoce automáticamente cuando se importa la carpeta sin especificar el nombre del archivo.

¿Cómo crear cada componente de página?

Cada index.jsx sigue la misma estructura básica de un componente funcional en React. Se define la función con el nombre correspondiente, se retorna el JSX mínimo y se exporta [5:46]. Por ejemplo, para Home:

jsx function Home() { return <div>Home</div>; }

export default Home;

Este patrón se replica para MyAccount, MyOrder, MyOrders, NotFound y SignIn [6:12]. Aunque parece un proceso repetitivo de copiar y pegar, garantiza que cada página exista como componente independiente listo para recibir contenido.

¿Cómo importar las páginas en el componente App?

Con todas las páginas creadas, el paso siguiente es importarlas dentro de App para verificar que funcionan correctamente [7:08]. Se utiliza la sentencia import indicando la ruta relativa hacia cada carpeta:

jsx import Home from '../home'; import MyAccount from '../myAccount'; import MyOrder from '../myOrder'; import MyOrders from '../myOrders'; import NotFound from '../notFound'; import SignIn from '../signIn';

Un detalle importante: al mover archivos entre carpetas, es necesario actualizar las rutas de importación manualmente si el editor de código no lo hace de forma automática [4:50]. Esto incluye también las hojas de estilo como app.css, que deben reubicarse junto al componente correspondiente [7:42].

Al renderizar todos los componentes dentro de App y revisar el navegador, se confirma que cada página aparece correctamente [8:16]. Obviamente, no deben mostrarse todas al mismo tiempo; la idea es que según la ruta seleccionada se muestre únicamente la página correspondiente.

El concepto de pair programming se menciona como metodología de trabajo colaborativo donde dos personas comparten ideas y construyen juntas la lógica del proyecto antes de escribir código [3:00]. Este enfoque facilita la comprensión de la arquitectura.

Con la estructura de páginas lista, el siguiente paso natural es implementar ReactRouterDom para conectar cada ruta del navegador con su página correspondiente y lograr la navegación real entre vistas [8:38]. ¿Ya tienes clara la estructura de tu próximo proyecto en React? Comparte cómo organizas tus páginas y componentes.