Introducción

React Native es un marco poderoso para crear aplicaciones móviles usando JavaScript y React. A medida que te sumerges en el desarrollo con React Native, es esencial comprender la estructura de un proyecto típico de React Native. Cada carpeta y archivo tiene un propósito específico y conocer sus funciones lo ayudará a administrar y navegar su proyecto de manera más eficiente. Este artículo proporciona una descripción general completa de la estructura de carpetas de una aplicación React Native, centrándose en el contenido y los propósitos de los directorios principales: el directorio raíz, la carpeta android/ y la carpeta ios/.

Directorio raíz

El directorio raíz de un proyecto React Native contiene archivos y carpetas esenciales que administran las dependencias, la configuración y el punto de entrada del proyecto.

Archivos y carpetas clave

• node_modules/: Contiene todas las dependencias y subdependencias instaladas mediante npm o hilo. Normalmente, no necesitarás tocar esta carpeta directamente.
• package.json: enumera las dependencias, scripts y otros metadatos de tu proyecto. Es crucial para gestionar las dependencias y los scripts del proyecto.
• package-lock.json o Yarn.lock: bloquea las versiones de las dependencias instaladas, lo que garantiza la coherencia en diferentes entornos.
• index.js: El punto de entrada para su aplicación React Native, que generalmente registra el componente principal de la aplicación.

Carpetas principales

• android/: Contiene el código nativo de Android y los archivos de configuración, necesarios si necesita escribir o modificar el código nativo de Android.
• ios/: Contiene el código nativo de iOS y los archivos de configuración, esenciales para escribir o modificar el código nativo de iOS.
• app/ o src/: a menudo, la carpeta principal para su código JavaScript/TypeScript, como componentes, pantallas y servicios. Aquí es donde reside la mayor parte del código de tu aplicación.

Subcarpetas comunes (dentro de app/ o src/)

• components/: Componentes de UI reutilizables, que ayudan a organizar y reutilizar elementos de UI en diferentes partes de la aplicación.
• pantallas/: Componentes que representan diferentes pantallas o vistas, lo que facilita la gestión de la navegación y las pantallas individuales.
• navigaciones/: Configuración y componentes de navegación, utilizados para definir la estructura de navegación de la aplicación.
• assets/: Imágenes, fuentes y otros activos estáticos, manteniendo todos los recursos estáticos organizados.
• redux/ (si usa Redux para la gestión del estado): acciones, reductores y configuración de la tienda para gestionar el estado global de la aplicación.
• styles/: estilos comunes utilizados en todos los componentes y pantallas, lo que ayuda a mantener un diseño coherente y simplifica la gestión de estilos.

Archivos de configuración y utilidades

• .babelrc o babel.config.js: archivo de configuración de Babel, que define cómo Babel transpila tu código.
• .eslintrc.js: archivo de configuración de ESLint, que configura reglas de linting para su proyecto.
• .prettierrc: Archivo de configuración más bonito, configurando reglas de formato de código.
• metro.config.js: Archivo de configuración para el paquete Metro, el paquete de JavaScript utilizado por React Native.
• .gitignore: especifica qué archivos y directorios ignorar en su repositorio git.

La carpeta android/

La carpeta android/ contiene todo el código nativo de Android y los archivos de configuración necesarios para crear y ejecutar su aplicación React Native en un dispositivo o emulador de Android.

Archivos y carpetas clave

• build.gradle: el archivo de compilación de nivel superior donde puede agregar opciones de configuración comunes a todos los subproyectos/módulos.
• gradle.properties: Propiedades de configuración para el sistema de compilación Gradle.
• gradlew y gradlew.bat: scripts para ejecutar comandos de Gradle en sistemas basados ​​en Unix y Windows, respectivamente.
• settings.gradle: especifica los módulos del proyecto, incluidas las bibliotecas externas o los módulos adicionales de los que su proyecto pueda depender.

Subcarpetas

aplicación/

• build.gradle: el archivo de compilación para el módulo de la aplicación, que contiene configuraciones y dependencias específicas de su aplicación.
• src/: Contiene el código fuente de la parte de Android de tu aplicación.
  • principal/:
  • AndroidManifest.xml: Describe información esencial sobre tu aplicación para las herramientas de compilación de Android, el sistema operativo Android y Google Play.
  • java/: contiene archivos fuente Java o Kotlin, incluidos MainActivity.java o MainActivity.kt, el punto de entrada de la aplicación.
  • res/: contiene recursos de la aplicación, como diseños, archivos dibujables (imágenes), cadenas y otros archivos XML utilizados por la aplicación.
  • assets/: almacena archivos de recursos sin procesar que necesita tu aplicación, como fuentes u otros archivos binarios.
  • jniLibs/: contiene bibliotecas nativas precompiladas (archivos .so) de las que depende su aplicación.

gradle/

• wrapper/: Contiene archivos para ayudar con el sistema de compilación Gradle.
  • gradle-wrapper.jar: un archivo JAR para el contenedor de Gradle, que le permite crear su proyecto sin necesidad de que los usuarios instalen Gradle.
  • gradle-wrapper.properties: especifica la versión de Gradle que se utilizará y otras propiedades.

La carpeta ios/

La carpeta ios/ contiene todo el código nativo de iOS y los archivos de configuración necesarios para crear y ejecutar su aplicación React Native en un dispositivo o simulador iOS.

Archivos y carpetas clave

• Podfile: Especifica las dependencias para la parte iOS de tu aplicación React Native, administrada por CocoaPods.
• Podfile.lock: bloquea las versiones de las dependencias especificadas en el Podfile, lo que garantiza la coherencia en diferentes entornos.
• .xcworkspace: un archivo de espacio de trabajo generado por CocoaPods que usas para abrir tu proyecto en Xcode.
• .xcodeproj: el archivo de proyecto Xcode que contiene la información y la configuración del proyecto de tu aplicación.

Subcarpetas

/

• AppDelegate.m o AppDelegate.swift: administra eventos y estados a nivel de aplicación, el punto de entrada para la aplicación iOS.
• Info.plist: contiene información de configuración para la aplicación, como el identificador del paquete, el nombre de la aplicación, los permisos y otras configuraciones.
• Assets.xcassets/: contiene los recursos de imagen e ícono de la aplicación.
• Base.lproj/: Contiene el guión gráfico principal o el archivo de la pantalla de inicio (LaunchScreen.storyboard).
• main.m o main.swift: el punto de entrada principal para la aplicación, configurando el objeto de la aplicación y el delegado de la aplicación.
• Archivos de soporte/: contiene recursos y configuraciones adicionales, como derechos y encabezados puente (si se usa Swift).

Conclusión

Comprender la estructura de carpetas de una aplicación React Native es crucial para una gestión y desarrollo eficientes de proyectos. Cada carpeta y archivo tiene una función específica, desde administrar dependencias y configuraciones hasta contener el código y los recursos para las plataformas Android e iOS.