#2 Iniciar un nuevo proyecto en React Native

En este artículo vamos a empezar por el principio de una aplicación para smartphone. En este sentido debemos empezar por iniciar un nuevo proyecto en React Native.

Revisando los requisitos software

Antes de empezar, debemos comprobar que disponemos de todos los elementos software necesarios. Cómo vimos en el artículo anterior, deberemos instalar una serie de componentes software que son necesarios para emprender un nuevo proyecto con React Native.

Primeros pasos

Una vez comprobado que disponemos de todos los elementos software necesarios, es hora de iniciar un nuevo proyecto en React Native. Para ello, utilizaremos la herramienta que nos brinda Expo-cli. Para iniciar la aplicación ejecutaremos la siguiente orden en una terminal:

expo init App

La salida del comando nos preguntará que tipo de aplicación queremos iniciar y nos la creará usando la plantilla correspondiente. Así, las plantillas que nos aparecen a continuación:

? Choose a template: » - Use arrow-keys. Return to submit.
     ----- Managed workflow -----
   blank                 a minimal app as clean as an empty canvas
       blank (TypeScript)    same as blank but with TypeScript configuration
       tabs (TypeScript)     several example screens and tabs using react-navigation and TypeScript
       ----- Bare workflow -----
       minimal               bare and minimal, just the essentials to get you started
       minimal (TypeScript)  same as minimal but with TypeScript configuration 

Por regla general, usaremos la plantilla mínima, que no nos va a imponer nada en nuestra futura aplicación y contiene los elementos básicos para empezar. También nos muestra opciones para generar plantillas usando el lenguaje de programación Typescript. En nuestro caso usaremos Javascript directamente para desarrollar.

Estructura básica de un nuevo proyecto en React Native

Cuando hayamos establecido la plantilla que vamos a usar para iniciar un nuevo proyecto en React Native, tendremos una estructura básica. Dentro del directorio «App» tendremos una serie de ficheros y directorios que compondrán la estructura básica de nuestro proyecto. En la siguiente imagen aparecen dichos ficheros:

Entre otros nos encontraremos con los siguientes ficheros:

• App.json: Es un archivo en formato JSON que contiene información básica sobre nuestra aplicación móvil. Por ejemplos podemos encontrar las siguientes variables:
  • name: Nombre de nuestra aplicación
  • description: Descripción corta de la aplicación.
  • version: Versión que vamos a generar en nuestra aplicación.
  • etc.
• package.json: Paquetes que vamos a usar para el desarrollo del proyecto React Native. Normalmente esto se gestiona mediante el gestor de paquetes, en nuestro caso NPM, aunque también se puede usar Yarn.
• .gitignore: Es el fichero que se usará en cualquier repositorio de código gestionado con Git para ignorar ficheros en el versionado.
• index.js: Registra el componente principal de nuestra aplicación, que en nuestro caso será App, que se encuentra en App.js.

Existen más ficheros dentro del proyecto que acabamos de generar con expo. Sin embargo, los iremos viendo conforme vaya avanzando el curso de desarrollo de aplicaciones con React Native.

Principales comandos de ejecución de nuestra aplicación.

Una vez que tenemos creado la estructura básica de nuestra aplicación podremos ejecutarla. Para ello bastará con iniciar el sistema expo. Dentro del directorio principal de nuestro proyecto ejecutaremos:

expo start

Esto hace que se inicie el sistema expo y nos arrancará en nuestro navegador web por defecto la interfaz del mismo. En ella podremos ver lo siguiente:

En la figura aparece una consola de log central en la que nos aparecerá información relevante de la ejecución del sistema expo-cli o de nuestra App. A la izquierda nos aparece un panel con la información del proceso de la consola web. Debajo aparecerán diferentes enlaces que nos permitirán ejecutar la aplicación en un emulador o dispositivo Android, en un emulador IOS, en el navegador web, enviar el enlace de la aplicación por email o publicarla.

Debajo, nos aparece una parte interesante. Ahí tendremos la configuración para usar nuestra aplicación en nuestro teléfono vía la aplicación de expo-cli para Android e IOS. Mediante esta aplicación, podremos probar nuestra App en desarrollo, siempre que tengamos conectado nuestro smartphone a la misma red local que el equipo en el que estemos desarrollando. Sólo tendremos que escanear el código QR con la aplicación de expo en nuestro smartphone, y al momento se vinculará la aplicación y nos iniciará.

Resumiendo

Hemos visto un resumen de los requisitos software necesarios para empezar el desarrollo con React Native. Hemos creado un proyecto vacío y explicado de forma somera el contenido de los principales ficheros del mismo. Además hemos iniciado la ejecución de la aplicación vacía y hemos visto como ejecutarla en nuestro smartphone.

Recuerda que este artículo pertenece a un curso de desarrollo de Apps para smartphone que puedes seguir. El código usado en este artículo y en el curso lo puedes consultar en nuestro repositorio de código:

• https://github.com/AprendeConEjemplos/Desarrollo-de-apps-para-smartphone-con-react-native

Recuerda compartir este artículo con las personas a las que pueda gustar e interesar. Para cualquier sugerencia, no dudes en usar el formulario de abajo para ponerte en contacto con nosotros.

Sugerencias