Lo que necesita saber para comenzar a crear aplicaciones móviles en React Native

Nada es mejor que crear aplicaciones con JavaScript. A menos que esté creando aplicaciones móviles. JavaScript es para crear aplicaciones web y usarlo para crear aplicaciones móviles nativas que antes no era posible. Fue difícil para cualquier desarrollador web sumergirse en la creación de aplicaciones móviles nativas. Tienen que aprender Java, Objective-C… o cualquier lenguaje de programación que se haya utilizado para este propósito.

Es decir, hasta que React Native de Facebook rompió esta barrera. React Native viene con grandes ventajas como la creación de aplicaciones multiplataforma tanto para Android como para IOS. Antes de React Native, tenías que escribir tu código dos veces: una para Android y otra para IOS. Ese ya no es el caso.

Este artículo es una introducción al mundo de React Native, así que prepárate.

¿Por qué React Native?

Bien, entonces ¿por qué React native y no cualquier otra tecnología?

Nos brinda muchas soluciones que otras tecnologías no pueden permitirse. Esto es lo que puede hacer con React Native:

Creación de aplicaciones móviles nativas

React Native nos permite escribir aplicaciones nativas en JavaScript tanto para iOS como para Android. Nos da la capacidad de usar todos los componentes nativos como gestos, notificaciones automáticas, cámara y ubicación. Hay algunas otras bibliotecas de JavaScript para crear aplicaciones móviles como ionic o PhoneGap. Pero esas bibliotecas usan Webview y las aplicaciones creadas con esas tecnologías no son nativas.

Creación de aplicaciones móviles multiplataforma (iOS y Android)

Sí, con React Native puedes crear aplicaciones móviles que pueden ejecutarse en iOS y Android. Este es uno de los grandes beneficios de React Native. Antes de que Facebook la creara, tenías que crear tu aplicación dos veces y con un código diferente: una para iOS usando Swift u Objective-C y otra para Android usando Java o Kotlin. React Native resolvió este problema para que pueda crear su aplicación React Native y funcionará en iOS y Android. ¡Increíble! ?

Escribe tu código todo en JavaScript y reacciona

Mientras crea aplicaciones React Native, en realidad escribirá JavaScript. El código de Reactjs nos permite crear excelentes componentes de interfaz de usuario y experiencia de usuario.

Empezando con react-native

Comenzar con react-native puede ser emocionante, pero al mismo tiempo puede resultar un poco confuso. El primer paso es instalarlo, y hay varias formas de hacerlo:

Usando expo-cli:

expo-cli es una herramienta de línea de comandos. Descarga e instala el modelo React Native para usted, integrado con la API de expo (consulte aquí la guía de instalación). Es una forma fácil de crear una aplicación React Native, y es la forma recomendada si acaba de empezar con React Native.

expo-cli le ofrece muchas opciones. Puede ejecutar y probar su aplicación en un dispositivo móvil sin ninguna configuración. Escanee un código QR y su aplicación se abrirá con la aplicación móvil expo. ¡Puede explorar otras aplicaciones móviles creadas con React Native en el navegador a través de una interfaz web llamada appertize!

Usando react-native-cli

El react-native-cli hace el mismo trabajo que expo-cli, pero con un enfoque diferente y ventajas adicionales. Las aplicaciones que se instalan con react-native-cli nos brindan la opción y la capacidad de crear nuestros propios módulos nativos en nuestra aplicación. No necesita expulsar su aplicación para poder crear módulos nativos. La expulsión le permite utilizar módulos nativos y escribir los suyos propios ( exploraremos cómo escribir módulos nativos en otra parte ).

Desarrollar aplicaciones React Native en diferentes plataformas es un proceso diferente. Algunas veces necesitamos alguna configuración específica para una plataforma específica. Por ejemplo, para compilar para Android, debe usar el SDK de Android, ¡así que exploremos cómo funciona esto!

Creación de aplicaciones móviles para Android

Hay algunos requisitos que debe instalar para comenzar a desarrollar para Android. Primero, debe descargar y configurar Android SDK y Android Studio. Puedes descargarlos con este enlace aquí.

Después de descargar Android Studio, también debe instalar algunas API. Para hacer eso, abra Android Studio, luego haga clic en la pestaña de configuración, esta ventana se abrirá:

Primero, marque ✔️la plataforma que desea que admita su react-native en la pestaña Plataformas SDK (por ejemplo, Android 6.0 Marshmallow). Luego, cambie a las herramientas SDK.

Y comprobación Android SDK Build-Tools, Android SDK toolsy google play service. En Android SDK Build-Tools, seleccione todas las plataformas:

  • A partir de 19.0.0 a 20.0.0
  • De 22.0.0 a 24.0.0
  • Y 25.0.2, 26.0.1 a 26.0.3
  • 27.0.3 y 28.0.1 a 28.02

Ahora hemos terminado con SDK y Android Studio. El siguiente paso es el emulador. El emulador (o el simulador) es donde tenemos que ejecutar y probar nuestra aplicación. Hay muchas opciones diferentes.

Puedes usar emuladores de Android Studio. Verifica aquí cómo crear un emulador para usar en Android Studio. Honestamente, nunca los usé. Prefiero Genymotion o un dispositivo real.

Genymotion

Genymotion es una aplicación de escritorio que proporciona un emulador virtual para probar su aplicación. Me gusta usarlo mucho porque es rápido. ? Te brinda opciones para crear un teléfono personalizado con las funciones que puedes encontrar en cualquier dispositivo real. Por ejemplo, habilite Wifi, Ubicación y Cámara. Te recomiendo que uses Genymotion sobre emuladores de Android Studio o cualquier otro emulador.

Usando dispositivos reales

Nada es mejor que usar dispositivos reales para ejecutar y probar su aplicación. Esto se debe a que le permite saber cómo se ve su aplicación en un dispositivo real. Te hace sentir la realidad de tu trabajo de una manera que el dispositivo virtual no te da. Entonces, si tiene la capacidad de usar un dispositivo, no lo dude.

Hasta este punto, estamos de acuerdo con Android, pero ¿qué pasa con iOS?

Creación de aplicaciones nativas de reacción para IOS

Ejecutar React Native para iOS no se ve muy diferente de Android. La misma aplicación React Native que se ejecuta en Android también se puede ejecutar en iOS, con algunas excepciones.

Por ejemplo, si desea ejecutar en un dispositivo iOS, debe tener un MacOS. Hablando de MacOS e iOS, no necesita descargar ninguna dependencia adicional como el SDK para Android para ejecutar React Native en iOS.

En cuanto a los emuladores, Xcode tiene buenos emuladores que puedes usar para probar tu aplicación React Native. Puede consultar esta publicación que muestra algunos trucos para usar con emuladores.

En MacOS puedes ejecutar tanto iOS como Android. Definitivamente puede instalar Android Studio y Genymotion en MacOS. Esta posibilidad no existe en una PC en la que solo puede ejecutar el emulador de Android pero no un emulador de iOS. Entonces, ¿tienes suerte? Si tienes un MacOS, disfrútalo.

Entonces, ahora tenemos el entorno para crear una aplicación React Native y hemos instalado todo, pero ¿cómo se escribe el código React Native? Es tan simple: realmente escribirás código Reactjs.

Puedes consultar la guía oficial para practicar con React Native. Recomiendo este excelente artículo para iniciar "React Native YouTube Replica". Lo guiará paso a paso para crear su primera aplicación React Native.

¡Guauu! Hasta ahora estás bien y estás codificando con react-native. ? Pero necesita verificar y depurar sus errores y ver los registros de su código. ¡¡Sí, los troncos !! ¡Entonces necesitamos un d ebugger! ¿Cómo se depura con React Native?

Depurando react-native

La depuración de su código es muy importante, no solo con React Native sino con cualquier otro lenguaje de programación. Entonces, en su código React Native, necesita saber qué está pasando. Hay muchas formas diferentes de depurar una aplicación React Native como:

Depurar con herramientas de desarrollo de Chrome

React Native te da la opción de usar herramientas de desarrollo de Chrome para ver los registros de tu aplicación. Para depurar con Chrome y habilitar el modo de depuración en su emulador, en el teclado simplemente haga clic en Ctrl+ m.

Aparecerá esta pantalla:

Y luego elige Debug Js Remotely. Esto abrirá una pestaña en Google Chrome con esta dirección //localhost:8081/debugger-ui/. Eso es para usar herramientas de desarrollo de Chrome, ¿qué pasa con otras opciones?

Usando React-native-debugger

React-native-debugger es una gran herramienta para depurar el código React Native. Es una aplicación de escritorio que te brinda muchas ventajas. Viene con integración Redux devtools y React-devtools. También puede depurar el estilo. De hecho, es el mejor depurador para React Native y es el que yo uso. Por lo general, está disponible en MacOS, Windows y Linux. Consulte la guía de instalación e integración.

Creo que es suficiente en este momento. Esta es la primera parte de la guía absoluta para crear aplicaciones móviles con React Native. En la siguiente parte vamos a sumergirnos en más consejos técnicos y temas como cómo podemos usar componentes nativos, la API nativa React, integración con otras bibliotecas, Redux, GraphQL y cosas por el estilo. Así que suscríbase a esta lista de correo para estar atento cuando salga la siguiente parte. Gracias por tu tiempo. ?

¿Siempre puedes encontrarme en Twitter?