La mayoría de vosotros habréis oído hablar de ReactNative, un framework de desarrollo multiplataforma basado en Javascript y el framework web ReactJS. ReactNative nacío como alternativa a las soluciones híbridas existentes pero plantea un enfoque tecnológico distinto. En el año 2020 fue el framework más utilizado para aplicaciones móviles multiplataforma. Nos iniciaremos en el desarrollo de aplicaciones con ReactNative, explicando los conceptos básicos del framework y poniendo en práctica varios de estos conceptos en un par de ejercicios que nos servirán a modo de ejemplo.

1. Primeros pasos
con ReactNative

2. Bienvenido
Index
1. Aplicaciones móviles multiplataforma
2. Un poco de historia
3. Qué aporta nuevo ReactNative
4. Estructura de una app con ReactNative
5. Ecosistema
6. Cómo empezar con ReactNative

3. .
1. Aplicaciones móviles
multiplataforma

4. Nativo VS Multiplataforma
Apps multiplataforma
• 1 única aplicación / codebase
• 1 único equipo de desarrollo
• Tecnologías similares o idénticas a lenguajes
utilizados en aplicaciones web (*)
• Rendimiento inferior (*)
• Abierto a otras plataformas, no solo móviles (*)
Apps Nativas
• 2 aplicaciones independientes (iOS / Android)
• Habitualmente 2 equipos de desarrollo distintos
• Acceso a últimos APIs / Features
• Rendimiento TOP
vs
(*) Depende del framework utilizado

5. .
2.Un poco de historia

6. Un poco de historia
2009. Nace PhoneGap
2010. Se libera Unity 3.0 con soporte
para iOS y Android
2011. Adobe compra la empresa de
PhoneGap y lo dona a la Apache
Fundation, nace Cordova
2011. GA Appcelerator Titanium
2011. Se funda empresa Xamarin
2013. Nace Ionic
2014. Nace NativeScript
2015. Nace ReactNative
2016. Xamarin es adquirido por
Microsoft
2018. Flutter v.1.0 (by Google)

7. Uso actual de frameworks multiplataforma
ReactNative: lider en 2019 y 2020
Datos relevantes
Fuente: https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/
Desarrollo multiplataforma es 1/3 sobre
desarrollo móvil global
Flutter registra el mayor crecimiento

8. .
3.Estructura de una app con
ReactNative

9. Tipos de frameworks multiplataforma
UI Nativo + VM JS
Appcelerator Titanium
NativeScript
ReactNative
Webview
PhoneGap
Cordova
Ionic
Compilación nativa
Xamarin (*)
Flutter
(*) Comportamiento distinto en iOS / Android
(**) La diferencia mayor es entre Webview y el resto
Rendimiento/Velocidad (**)

10. Arquitectura de una app ReactNative (2020)
Fuente: https://medium.com/swlh/react-natives-re-architecture-in-2020-9bb82659792c
Más info: https://www.biz4solutions.com/blog/new-react-native-architecture-value-offerings-and-improvements-in-2020/

11. .
4.Ecosistema

12. Ecosistema
Herramienta de consola oficial:
npm install –g react-native-cli
Expo ( https://expo.io/ )
npm install –g expo-cli

13. .
5.Cómo empezar con
ReactNative

14. Recursos
Repositorios GIT de la app
https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app/
Resumen de comandos
https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app/-/blob/master/ME
ETUP.md
Expo (https://expo.io/)
https://docs.expo.io/
https://docs.expo.io/versions/latest/
React-Native
https://reactnative.dev/docs/getting-started

15. Crear una app desde cero
npm i -g expo-cli @expo/ngrok
expo init qo-rn-meetup
# Elegimos “tabs (Typescript)”
# Conectamos nuestro móvil al PC
adb devices
code qo-rn-meetup
# Desde la consola de VSCode:
expo start
# Pulsar [d]
Preparación entorno:
https://reactnative.dev/docs/environment-setup
Resumen:
GIT, VS Code, NodeJS, explo-cli, Android Studio / SDK
Consola PowerShell

16. Gestión de estados de los datos
git clone https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app.git
git checkout -b meetup
cd h3lp3r-app
yarn install # or npm install
code .
# Realizaremos el ejercicio de añadir una gestion de favoritos a
H3lp3r app
• Mobx-State-Tree: https://mobx-state-tree.js.org/
• Redux: https://es.redux.js.org/
• Mobx: https://mobx.js.org/
• Context API and React Hooks:
https://es.reactjs.org/docs/context.html
https://es.reactjs.org/docs/hooks-intro.html
Consola PowerShell

17. Gracias ;)
Roberto Sánchez:
https://www.linkedin.com/in/robertosanchezcustodio
https://www.meetup.com/QOnecta/