INTRODUCCION REACT NATIVE

Vista previa del material en texto

DESARROLLO DE APLICACIONES 
MOVILES)
M.A. Alex Pacheco Moya
alex.pacheco.moya@gmail.com
Semana 6
REACT NATIVE
reactnative.dev
¿Qué es React Native?
React Native es un FrameWork de JavaScript para escribir aplicaciones
móviles reales y nativas para iOS y Android. Se basa en React, la biblioteca de
JavaScript de Facebook para crear interfaces de usuario, pero en lugar de
apuntar al navegador, apunta a plataformas móviles. En otras palabras: los
desarrolladores web ahora pueden escribir aplicaciones móviles que se ven y
se sienten verdaderamente "nativas", todo desde la comodidad de una
biblioteca de JavaScript que ya conocemos.
¿Qué es React?
• React es básicamente una librería de Java Script y se enfoca en el 
desarrollo de las interfaces de las apps para los usuarios. Fue 
desarrollada por Facebook y se basa en un paradigma de modelo-
vista-control. La famosa empresa de recursos sociales también indica 
que es mejor utilizarlo en conjunto con un patrón de diseño de 
software, el más recomendado es Flux.
• Ciertamente, es un gran compañero al diseñar sitios web o 
aplicaciones móviles, sobre todo para principiantes, ya que su sistema 
se basa en componentes. Estos componentes son los que se utilizarán 
para construir la interfaz de usuario, como los botones, una barra de 
búsqueda, etc.
https://www.appyweb.es/diccionario/react-react-native/
Componentes de React Native
• Dado que es multiplataforma, React Native ayuda a evitar bases de código separadas 
para diferentes plataformas. Proporciona componentes y API que actúan como 
bloques de construcción para la aplicación móvil.
• Algunos de los componentes principales de React Native son:
• View
• Text
• Image
• ScrollView
• StyleSheet
• Touchables
• Los desarrolladores que trabajan con React Native usan estos componentes 
regularmente.
https://dev.to/codesphere/building-your-first-react-native-application-with-expo-5381
Ventajas de React Native
El hecho de que React Native en realidad renderice utilizando las API de 
renderizado estándar de su plataforma host le permite destacarse de la 
mayoría de los métodos existentes de desarrollo de aplicaciones 
multiplataforma, como Cordova o Ionic. 
Los métodos existentes para escribir aplicaciones móviles que usan 
combinaciones de JavaScript, HTML y CSS generalmente se procesan 
mediante vistas web. Si bien este enfoque puede funcionar, también presenta 
inconvenientes, especialmente en lo que respecta al rendimiento. Además, por 
lo general no tienen acceso al conjunto de elementos nativos de la interfaz de 
usuario de la plataforma host.
Ventajas de React Native…
• React Native en realidad traduce su marcado a elementos de interfaz de 
usuario nativos reales, aprovechando los medios existentes para 
representar vistas en cualquier plataforma con la que esté trabajando. 
Además, React funciona por separado del subproceso principal de la 
interfaz de usuario, por lo que su aplicación puede mantener un alto 
rendimiento sin sacrificar la capacidad. 
• El ciclo de actualización en React Native es el mismo que en React: 
cuando cambian las propiedades o el estado, React Native vuelve a 
renderizar las vistas.
Riesgos y desventajas
• Como con cualquier cosa, el uso de React Native tiene sus 
inconvenientes, y si React Native es o no una buena opción para su 
equipo realmente depende de su situación individual.
• El mayor riesgo es probablemente la madurez de React Native, ya que 
el proyecto aún es relativamente joven. La compatibilidad con iOS se 
lanzó en marzo de 2015 y la compatibilidad con Android se lanzó en 
septiembre de 2015. La documentación ciertamente tiene margen de 
mejora y continúa evolucionando.
• Algunas funciones de iOS y Android aún no son compatibles, y la 
comunidad aún está descubriendo las mejores prácticas. La buena 
noticia es que, en la gran mayoría de los casos, usted mismo puede 
implementar la compatibilidad con las API que faltan
Riesgos y Desventajas…
• Debido a que React Native introduce otra capa en su proyecto, 
también puede dificultar la depuración, especialmente en la 
intersección de React y la plataforma host.
• React Native aún es joven, y aquí se aplican las advertencias 
habituales que acompañan al trabajo con nuevas tecnologías. 
Aún así, en general, creo que verá que los beneficios superan 
los riesgos.
¿Qué es Expo?
• Expo es un framework para desarrollar rápidamente aplicaciones React 
Native. Es como Laravel o sinfonía de los desarrolladores PHP o Ruby on 
Rails para los desarrolladores de Ruby. 
• Expo proporciona una capa encima de las API React Native para 
hacerlos más fáciles de utilizar y administrar. 
• También proporciona herramientas que facilitan el arranque y probar 
aplicaciones React Native. 
• Por último, proporciona servicios que normalmente sólo están disponibles 
cuando se instala un componente nativo reaccione de terceros y 
componentes de interfaz de usuario. Todos los se hacen disponibles a 
través del SDK de la Expo.
https://code.tutsplus.com/es/tutorials/easier-react-native-development-with-expo--cms-30546
Expo Cli
• Se recomienda que los desarrolladores que son nuevos en el 
desarrollo de aplicaciones móviles utilicen Expo CLI para 
desarrollar aplicaciones de manera más rápida, fácil y eficiente. 
Expo CLI es un Framework construido sobre React Native que 
hace que sea mucho más fácil comenzar a desarrollar 
aplicaciones móviles.
• Veamos React Native en acción junto con Expo CLI. 
Construiremos una aplicación Todo básica para dispositivos 
móviles. Usaremos un emulador de Android para probar 
nuestra aplicación. Para empezar, instalemos todo el software y 
los paquetes necesarios.
Expo…
• Expo es una colección de herramientas que facilitan 
aplicaciones REACT NATIVE. 
• Con la Expo, los desarrolladores pueden crear aplicaciones 
REACT NATIVE sin todas las frustraciones que vienen con la 
instalación y configuración de las dependencias de software 
como Android Studio, Xcode o todas las herramientas 
necesarias para desarrollar y ejecutar una aplicación nativa de 
reaccionar.
https://code.tutsplus.com/es/tutorials/easier-react-native-development-with-expo--cms-30546
Limitaciones de Expo
1. Las aplicaciones con Expo no admiten la ejecución de código de 
fondo. Esto significa que usted no puede, por ejemplo, ejecutar 
código que escucha los cambios de situación cuando se cierra la 
aplicación.
2. Aplicaciones de Expo se limitan a las API nativas que es 
compatible con el SDK de Expo. Esto significa que si tu aplicación 
tiene un caso de uso muy específico como comunicarse con un 
periférico, la única opción para implementar dicha funcionalidad es 
normal REACT NATIVE o escribiendo código nativo usando una 
librería llamada ExpoKit Bluetooth.
Requisitos Previos para Instalar Expo
Vamos a necesitar tener algún modo para probar las aplicaciones, para lo 
que podemos tener un terminal físico o puede utilizar un emulador.
Si queremos utilizar un emulador, para Android podemos hacerlo desde 
Android Studio en Windows, Linux o Mac, y para iPhone vamos a tener que 
hacerlo desde un ordenador con macOS instalado y ejecutar nuestro 
simulador.
También vamos a necesitar tener instalado NodeJS y algún editor de código 
como Visual Studio Code, Atom o cualquier otro.
Instalacion de React Native Expo
https://www.youtube.com/watch?v=Xt6Sx6Zb1NU
NodeJS
• NodeJS es un entorno de 
ejecución de JavaScript
• vamos a dirigirnos al sitio 
web oficial de Node. En la 
pantalla principal nos 
reconocerá el sistema 
operativo con el que estamos 
trabajando y tendremos dos 
botones principales para 
descargar NodeJs.
Elegimos la opción de la izquierda la que al final del número de 
versión tiene un LTS: (Long Term Support).
Instalar desde NodeJs 
Abrir Windows Power Shell
En Power Shell
Instalando expo-cli
node –v y npm –v son instrucciones para determinar la versión que se dispone
Instalando…
Quitando restricción…
Comando expo
Descargar expo-cli en elsmartphone
Extensiones en VS Code
Eslint
React Native Tools
Simple React Snippets
Auto Import
Auto Rename Tag
Color Hightlight
Material Icon Theme
Activar Material Icon Theme
Palenight Theme
Crear carpeta para proyectos 
Crear Proyecto ReactNative blank
Proyecto holamundo Creado..
Proyecto holamundo con VSCode
Correr proyecto holamundo
Codigo QR
Modificando texto y Guardar
Modificando Color de Fondo
En el Android
Conclusion
React Native facilita el desarrollo simultáneo para Android e iOS.Similar a 
React para la Web, las aplicaciones React Native están escritas usando una 
mezcla de JavaScript y marcado XML-esque, conocido como JSX. 
Luego, bajo el capó, el "puente" de React Native invoca las API de 
representación nativa en Objective-C (para iOS) o Java (para Android). 
Por lo tanto, su aplicación se renderizará utilizando componentes reales de la 
interfaz de usuario móvil, no vistas web, y se verá y se sentirá como cualquier 
otra aplicación móvil. React Native también expone interfaces de JavaScript 
para las API de la plataforma, por lo que sus aplicaciones React Native 
pueden acceder a funciones de la plataforma como la cámara del teléfono o 
la ubicación del usuario.
REFERENCIAS BIBLIOGRÁFICAS
Referencias electrónicas
• Cómo configurar React Native desde cero con Expo
https://openwebinars.net/blog/configurar-react-native-desde-cero-con-expo/
• Desarrollo Más Fácil React Native con Expo
https://code.tutsplus.com/es/tutorials/easier-react-native-development-with-expo--
cms-30546
“Buscando el bien de nuestros semejantes, 
encontramos el nuestro”
Platón
	Diapositiva 1
	Diapositiva 2: DESARROLLO DE APLICACIONES MOVILES)
	Diapositiva 3: Semana 6
	Diapositiva 4: reactnative.dev
	Diapositiva 5
	Diapositiva 6: ¿Qué es React Native?
	Diapositiva 7: ¿Qué es React?
	Diapositiva 8: Componentes de React Native
	Diapositiva 9: Ventajas de React Native
	Diapositiva 10: Ventajas de React Native…
	Diapositiva 11: Riesgos y desventajas
	Diapositiva 12: Riesgos y Desventajas…
	Diapositiva 13: ¿Qué es Expo?
	Diapositiva 14: Expo Cli
	Diapositiva 15: Expo…
	Diapositiva 16: Limitaciones de Expo
	Diapositiva 17: Requisitos Previos para Instalar Expo
	Diapositiva 18: Instalacion de React Native Expo
	Diapositiva 19: NodeJS
	Diapositiva 20: Instalar desde NodeJs 
	Diapositiva 21: Abrir Windows Power Shell
	Diapositiva 22: En Power Shell
	Diapositiva 23: Instalando expo-cli
	Diapositiva 24: Instalando…
	Diapositiva 25: Quitando restricción…
	Diapositiva 26: Comando expo
	Diapositiva 27: Descargar expo-cli en el smartphone
	Diapositiva 28: Extensiones en VS Code
	Diapositiva 29: Eslint
	Diapositiva 30: React Native Tools
	Diapositiva 31: Simple React Snippets
	Diapositiva 32: Auto Import
	Diapositiva 33: Auto Rename Tag
	Diapositiva 34: Color Hightlight
	Diapositiva 35: Material Icon Theme
	Diapositiva 36: Activar Material Icon Theme
	Diapositiva 37: Palenight Theme
	Diapositiva 38: Crear carpeta para proyectos 
	Diapositiva 39: Crear Proyecto ReactNative blank
	Diapositiva 40: Proyecto holamundo Creado..
	Diapositiva 41: Proyecto holamundo con VSCode
	Diapositiva 42: Correr proyecto holamundo
	Diapositiva 43: Codigo QR
	Diapositiva 44: Modificando texto y Guardar
	Diapositiva 45: Modificando Color de Fondo
	Diapositiva 46: En el Android
	Diapositiva 47: Conclusion
	Diapositiva 48: REFERENCIAS BIBLIOGRÁFICAS
	Diapositiva 49