¿Qué es React Native?
Introducción
Uno de los principales problemas que enfrentan los equipos al escribir aplicaciones móviles nativas es familiarizarse con las diferentes tecnologías. iOS y Android, las dos plataformas móviles dominantes, admiten diferentes idiomas. Para iOS, Apple admite los lenguajes Swift y Objective-C. Para Android, Google admite los lenguajes Java y Kotlin, y las diferencias no terminan ahí. Estas plataformas tienen diferentes herramientas. Y tienen diferentes interfaces para la funcionalidad principal del dispositivo. Los desarrolladores deben aprender el procedimiento de cada plataforma para cosas como acceder a la cámara o verificar la conectividad de la red.
Una tendencia es escribir aplicaciones móviles que funcionen con WebViews. Este tipo de aplicaciones tienen un código nativo mínimo. En cambio, la interfaz es un navegador web que ejecuta una aplicación escrita en HTML, CSS y JS. Esta aplicación web puede utilizar el contenedor nativo para acceder a funciones del dispositivo, como la cámara. Herramientas como Cordova permiten a los desarrolladores escribir estas aplicaciones híbridas.
La ventaja es que los desarrolladores pueden escribir aplicaciones que se ejecuten en múltiples plataformas. En lugar de aprender los detalles de iOS y Android, pueden usar HTML, CSS y JS para escribir una aplicación «universal». La desventaja, sin embargo, es que es difícil hacer que estas aplicaciones se vean y se sientan como aplicaciones nativas reales, y los usuarios pueden notarlo. Mientras que las aplicaciones universales basadas en WebView se crearon con la idea de compilarse una vez y ejecutarse en cualquier lugar, React Native se creó con el objetivo de programarse una vez y ejecutarse en cualquier sistema operativo móvil. React es un marco de JavaScript para crear aplicaciones web minimalistas e interactivas. Con React Native, podemos crear aplicaciones móviles nativas para múltiples plataformas.
JavaScript y React destacan en que las interfaces que creamos se traducen a vistas nativas. Las aplicaciones de React Native no se componen de WebViews. Podremos compartir gran parte del código que escribimos entre iOS y Android. Y React Native facilita la escritura de código específico para cada plataforma cuando surge la necesidad. Podemos utilizar un lenguaje (JavaScript), un marco (React), un motor de estilo y una cadena de herramientas para escribir aplicaciones para ambas plataformas. En esencia, React Native se compone de componentes de React.
React Native es un marco de código abierto para JavaScript Mobile de Facebook que está diseñado específicamente para crear aplicaciones móviles para iOS y Android. React Native se basa en la biblioteca JavaScript ReactJS, que ayuda a generar interacción con el usuario para plataformas móviles. React Native se puede usar directamente dentro de la aplicación IOS o Android existente o puede crear una aplicación tradicional desde cero. Actualmente, React Native se utiliza en otras aplicaciones populares como la aplicación móvil de Facebook, Instagram, Pinterest, Skype, etc.
Algunas de las características clave de React Native que hacen que el desarrollo móvil sea tan popular hoy en día son:
- Soporte multiplataforma: para mejorar las aplicaciones móviles, no necesita un equipo especialista en aplicaciones iOS y Android; los ingenieros de JavaScript apasionados por la creación de aplicaciones pueden hacerlo. use React Native para crear aplicaciones nativas sin aprender Kotlin o Java para Android y Swif u Objective-C para aplicaciones IOS. También puedes escribir un código común y React Native se encargará de mostrarlo en iOS y Android.
- Componentes nativos de React: React Native proporciona componentes nativos como vista, texto e imagen que se pueden convertir a una interfaz de usuario nativa de iOS o Android.
Requisitos para utilizar react native
Para utilizar React Native, necesitarás lo siguiente:
- Un editor de código, como Visual Studio Code, Sublime Text 3, Atom.
- NodeJS y NPM instalados en tu sistema (puedes optar por instalar Yarn en vez de NPM).
- Android Studio instalado en tu sistema en caso de necesitar el emulador de Android.
- Xcode en macOS en caso de necesitar el emulador de iOS.
- Además, es importante tener conocimientos básicos de JavaScript y React.
- Conocimientos básicos de HTML, CSS y JS.
- Conocimientos básicos de ReactJS.
Pasos para crear un nuevo proyecto
Aquí usamos la versión Expo CLI que será más fácil de usar en las aplicaciones de React Native
Paso 1: abre tu terminal y usa el siguiente comando.
npm install -g expo-cli
Paso 2: Ahora Expo CLI está instalado en todo el mundo, por lo que puede crear una carpeta de proyecto usando el siguiente comando.
expo init “projectName”
Paso 3: Ahora cree una carpeta e inicie el servidor usando el siguiente comando que se proporciona a continuación:
cd “projectFolder” npm start application_name
Paso 3: Ahora cree una carpeta e inicie el servidor usando el siguiente comando que se proporciona a continuación:
Estructura proyecto React Native
Ejemplo de React Native
import React from 'react';
import { StyleSheet, Text } from 'react-native';
export default class StyledText extends React.Component {
render() {
return (
<Text style={styles.text}>{this.props.content}</Text>
);
}
}
const styles = StyleSheet.create({
text: {
color: 'red',
fontWeight: 'bold',
},
});
React Native actualmente se utiliza en Facebook, Instagram, Microsoft, Amazon y miles de otras empresas.
JSX
Dado que React JS pertenece al mundo web, React Native está diseñado para el mundo de las aplicaciones móviles. React Native utiliza JSX, es decir, reemplazo de codificación XML para HTML y CSS.
Beneficios de JSX
- Es más rápido porque realiza mejoras al compilar código en JavaScript.
- También es seguro y la mayoría de los errores pueden detectarse durante la integración.
- Hace que sea más fácil escribir plantillas si eres bueno con HTML.
Ejecución de código de ejemplos
En varias entradas de este blog encontrarás ejemplos de código ejecutable. Para ejecutar los ejemplos de código, puedes ejecutar los comandos de Yarn, si no sabes que es Yarn puedes buscar la entrada sobre Yarn y regresar a las entradas de React Native para ejecutar los ejemplos de código.
Para ejecutar cualquier ejemplo puede escribir los siguientes comandos:
- Yarn start: iniciará el empaquetador React Native e imprimirá un código QR. Si está en un dispositivo móvil Android, escanear este código con la aplicación Expo que cargará la aplicación, para iOS puede realizar el mismo proceso.
- Yarn run ios: iniciará el empaquetador React Native y abrirá su aplicación en el simulador de iOS si está usando una Mac.
- Yarn run android: iniciará el empaquetador React Native y abrirá su aplicación en un dispositivo o emulador Android conectado.
Conclusiones
- React Native es una herramienta efectiva para crear aplicaciones móviles nativas utilizando React.
- React Native permite a los desarrolladores crear aplicaciones para múltiples plataformas utilizando un solo código base, lo que puede ahorrar tiempo y esfuerzo en el desarrollo de aplicaciones móviles.
- React Native es compatible con la mayoría de los paquetes de NPM y tiene una estructura de archivo similar.
- React Native es considerado más rápido que NPM y es fácil de usar y estable.
- React Native ofrece un rendimiento espectacular cercano a las aplicaciones nativas.
