React Native - Introducción al curso

 En este curso aprenderás sobre:

 Introducción a React Native
 Empezando
 Reaccionar los fundamentos nativos
 Layout and Styling
 Construcción y depuración
 Reaccionar API nativas
 Resumen del curso

Que es React Native

React Native es el marco JavaScript de código abierto de Facebook para crear aplicaciones móviles
nativas (Android / IOS). Es una arquitectura modular fácilmente extensible para agregar o eliminar
funciones en el futuro.“No es escribir una vez, correr en cualquier lugar. Es aprender una vez,
escribir en cualquier lugar ".

ReactJS Vs React Native

ReactJS es una biblioteca JavaScript declarativa, eficiente y

flexible para crear interfaces de usuario, mientras que
React Native es un marco móvil que le permite crear
aplicaciones nativas (iOS, Android y Windows)."Si conoce
ReactJS, ya conoce la mayoría de los conceptos básicos de
React Native".

Como trabaja React Native

ReactJS ya entiende lo que se supone que debe hacer la

aplicación. Pero lo que realmente diferencia a React Native
de ReactJS es la representación que no sea Browser DOM.
En React Native, en lugar de renderizar al DOM del navegador, React Native invoca la API Objective-C
para renderizar componentes iOS o la API Java para renderizar componentes Android.

Esto es posible debido al puente, que

proporciona a ReactJS una interfaz con los
elementos de la interfaz de usuario nativa de la
plataforma host. Los componentes de reacción
devuelven el marcado de su función de
representación, que describe cómo deberían
verse. Para React Native, este marcado se
traduce para adaptarse a la plataforma host, por
lo que un <View> podría convertirse en una
UIView específica de iOS.
Ventajas de React Native

Es fácil de aprender, ya que utiliza combinaciones de JavaScript, HTML y CSS.

Proporciona una mejor experiencia de desarrollador y potencial de desarrollo multiplataforma, ya

que el desarrollo nativo de Android y el desarrollo de iOS son bastante diferentes y es costoso.

No necesitamos reconstruir toda la aplicación para ver reflejados los cambios. El tiempo dedicado a
compilar y depurar la aplicación se puede guardar a través de esto.

Puede usar cualquier editor de texto para la edición de JavaScript, ya que no nos obliga a trabajar en
XCode para desarrollar para iOS o Android Studio para el desarrollo de Android.

Reutilizar código entre plataformas es fácil con React Native. Por ejemplo, la aplicación Facebook
Ads Manager para Android comparte el 87% de su código base con la versión iOS

¿Quién está usando React Native?

¡Sí, React Native es una nueva tecnología! A pesar de que su adopción y uso son bastante buenos.
Muchas compañías han comenzado a trabajar en React Native para mejores negocios. Algunos de
ellos se enumeran a continuación.

 Facebook (aplicaciones iOS y Android, también en Ads Manager)

 Instagram
 Airbnb
 Walmart
 Bloomberg

Limitaciones

El mayor riesgo es probablemente la madurez de React Native, ya que el proyecto aún es

relativamente joven. El soporte para iOS se lanzó en marzo de 2015 y el soporte para Android se
lanzó en septiembre de 2015.

Algunas funciones en iOS y Android aún no son compatibles, y la comunidad aún está descubriendo
las mejores prácticas.

Las nuevas funcionalidades nativas, que aún no se han desarrollado, se deben manejar por
separado.

¿Cómo instalar React Native?

Debes instalar un par de cosas para configurar el entorno. Si desea crear una aplicación de iOS,
necesita un sistema operativo Mac y para crear una aplicación de Android, puede optar por Mac o
Linux o Windows OS.

Paso 1: instalar el nodo

Paso 2: Instala React Native.

npm install -g react-native-cli

Paso 3: para la aplicación de Android: instale Android Studio y Android SDK para la aplicación IOS:
instale XCode
¡Tu primera aplicación!

Paso 1: crea un proyecto HelloWorld

react-native init HelloWorld

Paso 2: Abra la carpeta de la aplicación en la terminal.

cd HelloWorld

Paso 3: Instale npm para la dependencia del paquete

npm install

Paso 4: Ejecute la aplicación en el simulador IOS,

react-native run-ios

Ejecute la aplicación en el emulador de Android,

react-native run-android

Demo para Steps

Para iOS, edite index.ios.js para realizar cambios en la aplicación. Del mismo modo para Android,
edite index.android.js para realizar cambios en la aplicación.

El archivo package.json define algunos metadatos para el proyecto y, lo más importante, declara
react-native como una dependencia.

La carpeta node_modules es el resultado de ejecutar la instalación de npm que tuvo lugar durante la
inicialización del proyecto. Contiene el código react-native, que a su vez consiste en otras
dependencias de NPM, scripts de ayuda y una gran cantidad de código JavaScript y Objective-C.

React Native: Hello World App

Este video lo llevará al sencillo desarrollo de aplicaciones Hello World.Video :

https://www.youtube.com/watch?v=3V-zynurbFk

Snack: Un patio de recreo para React Native

Snack Expo es un patio de juegos gratuito y de código abierto que te permite crear aplicaciones
verdaderamente nativas que funcionan tanto en iOS como en Android.

Puede obtener una vista previa del componente en el emulador dentro del navegador o abrirlo
directamente en su dispositivo móvil con la aplicación Expo.

Aquí está el patio de juegos: snack.expo.in

Componentes

Los componentes son los bloques de construcción para una aplicación React Native. Una interfaz de
usuario React Native (UI) se especifica declarando componentes, posiblemente anidados, y luego
esos componentes se asignan a la UI nativa en la plataforma de destino. Hay una serie de
componentes principales que se usan comúnmente en aplicaciones.

Al escribir en React para la Web, representa elementos HTML normales (<div>, <span>, <li>, <ul>,
<img> etc.). Con React Native, todos estos elementos son reemplazados por componentes React
específicos de la plataforma, como <View>, <Text>, <ListView>, <Image>, etc.

AppRegistry

AppRegistry es el punto de entrada de JavaScript para ejecutar todas las aplicaciones React Native.
Es el punto de control para registrar, ejecutar, renderizar y desmontar todas las aplicaciones. Los
componentes raíz de la aplicación deben registrarse con AppRegistry.registerComponent. Las
aplicaciones se pueden ejecutar invocando AppRegistry.runApplication.

Para detener una aplicación, llame a AppRegistry.unmountApplicationComponentAtRootTag con la

etiqueta que se pasó a runApplication.

Ciclo de vida del componente

El ciclo de vida de los componentes comienza con el montaje

de los componentes React. Para el proceso de renderizado,
Reactive Native utiliza el concepto de Bridge. Una vez que está
montado, está listo para recibir Props / Cambio de estado.
Ahora, basado en la diferencia de cálculo, vuelve a representar
el componente de reacción. Al final, se desmonta, cuando ya
no se usa.

Componentes Métodos del ciclo de vida

Montaje invocado cuando se crea una instancia de

componente:

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

Actualizar los cambios a los accesorios o al estado puede provocar una actualización. Estos
métodos se invocan cuando se vuelve a representar un componente:

componentWillUnmount ()
Fundamentos de React Native

Style (Estilo)

Con React Native, simplemente aplica estilo a su aplicación usando JavaScript y no usa un lenguaje o
sintaxis especial para definir estilos. Todos los componentes React Native aceptan un estilo llamado
prop.

Los nombres y valores de estilo generalmente coinciden con la forma en que funciona CSS en la
aplicación web, excepto que los nombres se escriben con una cubierta de camello, por ejemplo,
backgroundColor en lugar de color de fondo.

Estilo en React Native

React Native toma prestadas muchas ideas de diseño para la Web. Por ejemplo, en CSS, escribe lo
siguiente:

.container {
background-color: #222222;
}

Sin embargo, en React Native, escribiría lo siguiente en JavaScript:

const styles = StyleSheet.create({

container: {
backgroundColor: '#222222'
}
});

Al escribir CSS en JavaScript, está aislando estilos del espacio de nombres global.

Layout Flexbox

Flexbox proporciona un diseño consistente en diferentes tamaños de pantalla. Utiliza flexDirection,

alignItems y justifyContent para lograr el diseño correcto.

FlexDirection se utiliza para alinear elementos verticales / horizontales. Los valores son columna y
fila.

justifyContent determina cómo se distribuyen los elementos dentro de un contenedor. Los valores
son centro, inicio flexible, final flexible, espacio alrededor y espacio entre ellos.

alignItems determina cómo se distribuyen los elementos dentro de un contenedor a lo largo del eje
secundario. Los valores son center, flex-start,flex-end, and stretched.
Trabajando en Flex

A continuación se muestra el programa de trabajo para el diseño de Flexbox. Explica las propiedades
de diseño de Flexbox como flexDirection, justifyContent y alignItems.

Programa para el diseño de Flexbox: snack.expo.io

Navegación en React Native

Una biblioteca independiente que proporciona una navegación de plataforma nativa completa.
Navigator proporciona una implementación de JavaScript de una pila de navegación y es fácil de
personalizar.

React Navigation tiene tres tipos de navegación, StackNavigator, TabNavigator y DrawerNavigator.

Tipos de navegacion

Este video explicará sobre React Native Navigation y su implementación.Video :

https://youtube.videoken.com/embed/YmYPPBgcy0A

Debugging

Para la depuración, React Native proporciona una herramienta / menú para desarrolladores. Al
habilitar Live Reloading desde el menú del desarrollador, cualquier cambio en JS activará una recarga
automática en cualquier aplicación activa. Acelera el tiempo de desarrollo en comparación con el
desarrollo de aplicaciones móviles nativas.

Crear una aplicación en React Native

Este video explicará sobre la creación de una aplicación en React Native.Video :

https://youtube.videoken.com/embed/1Q35qUzYLWs

Pruébelo: página de inicio de sesión para una aplicación

Cree una página de inicio de sesión con campos de nombre de usuario y contraseña con un botón de
inicio de sesión. Intente activar el clic del botón de inicio de sesión y muestre una alerta con el
mensaje de inicio de sesión exitoso.

API útiles

API es un entorno de desarrollo técnico que permite el acceso a la aplicación o plataforma de otra
parte. Algunas de las API React Native se dan a continuación.

 Alert
 Geolocation
 Fetch etc.
Alert API

Como todos sabemos, el cuadro de alerta aleja el foco de la ventana actual y obliga al usuario a leer
el mensaje. En React Native, esto puede ser posible importando Alert API. Una API de alerta
contendrá el título, el mensaje y el botón de confirmación.

Puede pasar por el programa de ejemplo dado de API de alerta que muestra una alerta al hacer clic
en un botón.

Programa para API de alerta: snack.expo.io

Geolocation API

La API de geolocalización existe en el objeto del navegador global a través de navigator.geolocation.

Los siguientes métodos están disponibles en navigator.geolocation:

getCurrentPosition nos permite solicitar la ubicación de un usuario en cualquier momento.

watchPosition es similar a getCurrentPosition. La única diferencia es que se llamará cada vez que se
actualice la ubicación del usuario.

clearWatch le dice al dispositivo que la aplicación ya no necesita información de ubicación.

Ejemplo de geolocalización

El ejemplo dado explica el uso de la API de geolocalización. El programa recupera y muestra los
valores de latitud y longitud.

Programa de API de geolocalización: snack.expo.io

Fetch API

Fetch API se utiliza para redes. Obtiene contenido de una URL arbitraria, pasando la URL requerida.

fetch('https://freegeoip.net/json/');

React Native - Resumen del curso

Hemos cubierto la creación de la primera aplicación React Native teniendo en cuenta la aplicación
multiplataforma.

Para hacerlo, comenzamos mirando los componentes básicos de React Native y cómo diseñarlos.
Aprendimos a trabajar con las API de navegación. Cubrimos cómo depurar aplicaciones React Native
con las herramientas de desarrollador.

Con su conocimiento existente en JavaScript y ReactJS junto con los temas tratados en el curso,
estaría en una mejor posición para desarrollar aplicaciones móviles multiplataforma para Android e
iOS.

Sin embargo, todavía hay mucho que aprender, y este curso no puede cubrir todos los temas que
necesitamos saber, para desarrollar aplicaciones móviles con React Native.