Cómo migrar de React a React Native

React Native es un framework que utilizamos para desarrollar aplicaciones móviles. Lo que lo diferencia es el hecho de que podemos crear aplicaciones para iOS y Android usando el mismo lenguaje que usamos en el desarrollo web: JavaScript/TypeScript. Esto hace posible crear aplicaciones para diferentes entornos, utilizando una única base de código, lo que supone una gran ventaja en términos de flexibilidad y tiempo de desarrollo.

En otras palabras, para aquéllos con experiencia con el desarrollo web, la curva de aprendizaje de React Native es fluida, ya que muchos de los conceptos y patrones son prácticamente los mismos que los que ya utilizamos en el desarrollo web. ¿Cuáles deberían ser los primeros pasos para desarrollar aplicaciones?

Configurando el ambiente para emular un celular

Para probar tu aplicación en Android, necesitas un emulador de Android instalado en tu computadora. La forma más sencilla de obtenerlo es descargar e instalar Android Studio, que ya incluye el emulador de Android.

Después de instalar Android Studio, ábrelo y haz clic en Configure en el menú de bienvenida. Enseguida, selecciona AVD Manager para abrir la ventana de manejo del emulador Android. Pulsa Create Virtual Device y sigue las instrucciones en la pantalla para seleccionar el dispositivo y la versión de Android que deseas usar en el emulador. Terminada la configuración, haz clic en Finish para crear el emulador.

Ahora que el emulador está configurado, es hora de ejecutar la aplicación en Android Emulator.

Creando el primero proyecto con React Native

Asegúrate de que Node esté instalado y de que tengas la versión más actual, luego instala React Native CLI globalmente. Para hacer esto, abre la terminal y ejecuta el siguiente comando:

npm install -g react-native-cli

Esto permitirá crear un nuevo proyecto y ejecutar comandos desde la terminal.

Antes de continuar, es importante garantizar que tengas Java instalado. Aquí uso jdk-11.

Para crear un nuevo proyecto, ejecuta el siguiente comando en la terminal:

npx react-native init MeuPrimeiroApp

Lo anterior generará un nuevo proyecto llamado MiPrimeraApp (MeuPrimeiroApp) en un directorio con el mismo nombre.

Ahora que has creado un nuevo proyecto, navega hasta el directorio del proyecto y ejecuta la aplicación con:

cd MeuApp

npx react-native run-android

o

react-native run-ios

Después de ejecutar esos comandos, verás esto:

Como podemos ver en el código arriba, tenemos algunas diferencias con respecto al React normal, como por ejemplo la tag <Text> que debe usarse en cualquier texto colocado en el código.

Ahora alteraremos el archivo para hacer una página de login:

De esta forma, tendremos una página de login, que después de hacer clic en el botón de sign in te llevará a la página Home.

A un/a dev web seguramente le resultará extraño utilizar componentes como SafeAreaView, StatusBar, TextInput y TouchableOpacity, la navegación entre pantallas usando el paquete @react-navigation/native y la declaración de rutas usando createStackNavigator(). Sin embargo, al analizar rápidamente el código, podemos desarrollarnos a la misma velocidad que creamos sitios web. Velo abajo:

Componente Text

Text es un componente usado para mostrar texto en pantalla. En este caso, style={styles.sectionTitle} define el estilo del título de la sección del formulario.

Componente TextInput

TextInput es un componente utilizado para recopilar la entrada de texto del usuario. En el código anterior, hay dos TextInput que se utilizan para recolectar el e-mail y la contraseña del usuario. El style={styles.input} define el estilo de los campos de entrada, incluyendo el color de fondo, el borde, el rellenado, la fuente y el tamaño.

Componente TouchableOpacity

TouchableOpacity es un componente que crea botones que pueden ser presionados por el usuario. El style={styles.button} define el estilo del botón, incluyendo el color de fondo, el rellenado, el borde y otros elementos. Cuando el usuario presiona el botón, se llama la función handleSignIn.

Finalmente, el Text dentro de TouchableOpacity muestra el texto dentro del botón. En este caso, style={styles.buttonText} define el estilo del texto del botón, incluyendo el color, la fuente y otras características. El texto mostrad es Sign In, que es el texto que aparecerá en el botón. Estos componentes se utilizan juntos para crear un formulario de inicio de sesión sencillo.

Componente NavigationContainer

El componente NavigationContainer se usa como un container para todas las otras pantallas de la aplicación. Se emplea para indicar el estado de navegación y el contexto de la aplicación para todas las otras pantallas.

Dentro de NavigationContainer, hay un componente Stack.Navigator, usado para definir las diferentes pantallas disponibles en la aplicación. En el ejemplo que usamos, existen dos pantallas definidas: SignIn y Home.

Cada pantalla es representada por un componente Stack.Screen, definido con un nombre y un componente asociado.

La propiedad initialRouteName se usa para definir la pantalla inicial de la aplicación. En este caso, la pantalla SignIn sería la inicial.

Al devolver el componente NavigationContainer con el componente Stack.Navigator y los Stack.Screen anidados dentro de él, el código define la estructura básica de navegación de la aplicación y las pantallas que el usuario puede visitar.

Estilización en React Native

El estilo en React Native se reduce a una colección de reglas de estilo en forma de objetos JavaScript, donde cada propiedad representa una regla de estilo y cada valor representa un valor para esa regla.

A diferencia de React para la web, que usa CSS como lenguaje de estilo, React Native no usa CSS y no admite selectores, jerarquías u otras funciones CSS avanzadas. En cambio, las propiedades de estilo se definen como objetos JavaScript. Pero ten por seguro que no es muy diferente a lo que usábamos anteriormente.

La función StyleSheet.create se usa para crear un objeto con los estilos definidos. Ese objeto se optimiza para mejorar el desempeño de la aplicación, evitando generar objetos de estilo innecesarios.

Conclusión

En este artículo, presentamos React Native como una opción para el desarrollo de aplicaciones. React Native es un framework muy popular. El lenguaje de programación utilizado es JavaScript, lo que hace que la aplicación sea mucho más fácil de leer y flexible. Además, la curva de aprendizaje, para aquellos que ya tienen experiencia en desarrollo web, es sencilla.

Debido a todas estas ventajas, React Native se ha convertido en una de las mejores opciones para los desarrolladores que desean crear aplicaciones para iOS y Android. Con el mercado de aplicaciones móviles en constante expansión, esta tecnología es una gran opción para quienes desean incursionar en el mundo de las aplicaciones móviles y ofrecer soluciones innovadoras a los usuarios.