ESTRUCTURA DE ARCHIVOS EN UN PROYECTO REACT NATIVE
Toda aplicación móvil tiene cierta navegabilidad, esto nos obliga a organizarla en diferentes pantallas para poder desplazarnos entre ellas a través de pestañas (tabs), barra de navegación (navigation bar), animaciones y gestos de transición de pantalla (screen transition animations and gestures), entre otros, permitiéndonos crear cualquier tipo de navegación que consideremos óptima.
Bien, un proyecto se puede organizar de múltiples maneras, y esto en ocasiones depende mucho de la experiencia del desarrollador, de su forma de abordar un proyecto e incluso de su estilo de trabajo, lo cierto es que debemos iniciar con un orden.
La estructura básica considerada para un proyecto consiste de tan solo un par de directorios que nosotros mismos creamos en el proyecto principal y que conforme vamos avanzando ajustamos, esto debido a que a veces no sabemos qué tan grande puede ser un proyecto. Usualmente estos directorios los creamos desde el explorador de archivos de Windows o a través del IDE (Entorno de Desarrollo Integrado) con el que estemos trabajando, su nombre dependerá del contenido que pretendamos colocar en ellos.
Por ejemplo, en el directorio assets podemos incluir recursos que utilizaremos en la construcción de la interfaz de nuestra aplicación móvil, como pueden ser: imágenes, tipos de fuente, tipografía o estilos de letra, talvez algún uso exclusivo de un icono, etc. El directorio components por lo regular incluye los componentes que vamos construyendo, ya sea un botón, el desplegado de una lista de información o de imágenes, un proceso, etc.
Como ya lo mencionamos, es posible que necesitemos ir agregando más estructura a nuestro proyecto.
Considera nombrar a cada archivo de acuerdo al nombre del componente que éste guardará.
Por ejemplo:
Dentro del archivo Login.js deberá existir el componente:
o bien,
Según lo necesites.
Si no recuerdas la diferencia entre estas dos declaraciones de componentes, puedes revisarlo en el video que se encuentra en el tema Iniciando con React Native – Import: uso y definiciones en la Introducción a React Native. ya que la forma en la que se importan los componentes suele ser diferente.
NOMBRE DE ARCHIVOS Y COMPONENTES EN UN PROYECTO REACT NATIVE
En React Native, por lo regular los nombres de los componentes inician con mayúsculas, por lo que el nombre del archivo generalmente también estará en mayúsculas para mantener coherencia.
| Archivo | Componente |
|---|---|
| Login.js | export function Logino export default function Login |
Es probable que toda esta información te parezca no útil, sin embargo, esto nos ayudará a mantener una buena estructura de archivos que nos permitirá a futuro dar un fácil mantenimiento a nuestra aplicación móvil, además de que a partir de este momento tendrás la seguridad de que estás iniciando el desarrollo de tu aplicación móvil de manera correcta.