Primeros pasos
con ReactNative
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
.
1. Aplicaciones móviles
multiplataforma
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
.
2.Un poco de historia
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)
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
.
3.Estructura de una app con
ReactNative
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 (**)
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/
.
4.Ecosistema
Ecosistema
Herramienta de consola oficial:
npm install –g react-native-cli
Expo ( https://expo.io/ )
npm install –g expo-cli
.
5.Cómo empezar con
ReactNative
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
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
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
Gracias ;)
Roberto Sánchez:
https://www.linkedin.com/in/robertosanchezcustodio
https://www.meetup.com/QOnecta/

Primeros pasos con ReactNative

  • 1.
  • 2.
    Bienvenido Index 1. Aplicaciones móvilesmultiplataforma 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.
  • 4.
    Nativo VS Multiplataforma Appsmultiplataforma • 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.
  • 6.
    Un poco dehistoria 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 deframeworks 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 unaapp con ReactNative
  • 9.
    Tipos de frameworksmultiplataforma 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 unaapp 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.
  • 12.
    Ecosistema Herramienta de consolaoficial: npm install –g react-native-cli Expo ( https://expo.io/ ) npm install –g expo-cli
  • 13.
  • 14.
    Recursos Repositorios GIT dela 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 appdesde 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 estadosde 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.