Estructura Básica de un Proyecto React

En este artículo, vamos a hacer un repaso sobre la estructura de un proyecto en React. Explicaremos los directorios principales y los archivos que forman parte de un proyecto creado con Create React App.

Directorio node_modules

El directorio node_modules es donde se almacenan todos los paquetes y dependencias del proyecto. Este directorio es generado automáticamente cuando instalamos nuevas dependencias o actualizamos las existentes, por medio de los comandos npm install o npm update. Es importante destacar que no debemos modificar este directorio directamente.

Directorio public

El directorio public es donde se encuentra el archivo index.html, que actúa como el punto de entrada de nuestra aplicación en el navegador. Este archivo es responsable de cargar el HTML principal y puede incluir etiquetas meta, scripts, y otros elementos que afectan a la página.

Dentro de este directorio se encuentran otros archivos importantes como:

• favicon.ico: El icono que aparece en la pestaña del navegador.
• index.html: El archivo HTML principal, que incluye la estructura básica de la página. Aquí se carga la aplicación React, que se inyecta dentro de un contenedor con el id root.

PWA y Manifesto JSON

Si decides convertir tu aplicación en una PWA (Progressive Web App), encontrarás el archivo manifest.json dentro de este directorio. Este archivo configura aspectos como el nombre de la aplicación, los iconos, y la apariencia de la misma cuando se instala en un dispositivo móvil.

Archivo .gitignore

El archivo .gitignore es utilizado para especificar qué archivos o directorios no deben ser incluidos en el control de versiones con Git. Por ejemplo, archivos como node_modules o el directorio build suelen ser excluidos porque no es necesario subirlos a un repositorio remoto.

Directorio src (Código Fuente Principal)

El directorio src es donde se encuentra el código fuente principal de la aplicación. Este es el directorio en el que trabajaremos mayormente, ya que contiene los componentes de React y el código JavaScript que define el comportamiento de la aplicación.

Dentro de este directorio, encontrarás varios archivos clave:

• App.js: El componente principal de la aplicación. Es el punto de entrada para la mayoría de las interacciones.
• index.js: Es el archivo que arranca la aplicación y se encarga de inyectar el componente App dentro del archivo index.html.
• index.css: La hoja de estilos principal para la aplicación.

Archivos de Configuración

Además de los archivos anteriores, existen varios archivos de configuración importantes para el funcionamiento del proyecto:

• package.json: Contiene la información sobre las dependencias, scripts y configuración básica del proyecto.
• package-lock.json: Generado automáticamente, este archivo asegura que las dependencias se instalen de forma consistente en todos los entornos de desarrollo.

Otros Archivos Importantes

• README.md: Un archivo de documentación que explica el propósito del proyecto y cómo configurarlo o utilizarlo.
• reportWebVitals.js: Es utilizado para la medición del rendimiento de la aplicación.

Flujo de Trabajo en React

Una vez entendida la estructura básica, comenzaremos a trabajar principalmente con el directorio src. Aquí aprenderemos sobre la creación de componentes y cómo gestionar el estado y las interacciones dentro de la aplicación React.

Este es el esquema básico para un proyecto React, que incluye tanto los directorios y archivos esenciales como las herramientas de configuración y gestión. Como mencionamos, nos centraremos principalmente en el directorio src, que es donde ocurrirá el desarrollo de la aplicación.