Descargar para leer sin conexión
![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](https://image.slidesharecdn.com/meetupreactnative2021-210514120919/85/Primeros-pasos-con-ReactNative-15-320.jpg)
Más contenido relacionado
Similar a Primeros pasos con ReactNative
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. . 2.Un poco dehistoria
- 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.