Introduccion A React Native

Bienvenidos gente inteligente de ciapfa al curso de RN en español 2019.
En este video te daré un

breve resumen de lo que debes saber sobre RN y en el siguiente video haremos la instalación del
mismo, sin embargo en la descripción de este voy a dejarte una guía totalmente gratis y fácil de
entender sobre como instalar RN y las distintas herramientas para desarrollar en este framework.
Bien, sin más, comencemos hablando de:
1) ¿Qué es react native?
React native es un framework nos permite crear aplicaciones móviles nativas para Android y
IOS usando React y Javascript lo cual es genial porque podemos utilizar nuestro conocimientos
ya aprendidos de JS para desarrollar apps móviles, anteriormente debíamos saber java para
hacer apps Android y Objective c para hacer apps en IOS, pero ahora con lo q sabemos de JS ya
podemos crear nuestras APPS que funcione en ambas plataformas. ¿Qué significa que sea
nativa? En palabras sencillas, se comporta dentro de nuestro teléfono como cualquier aplicación
Android e IOS.
2) ¿Cómo funciona react native?
Te preguntaras ¿Cómo se pueden hacer aplicaciones móviles con javascript? Esto ocurre gracias
al React Bridge. Tu código de JS pasa por un puente para que te puedas conectar a los módulos
nativos.
3) Factores para adoptar RN:
Poder avanzar rápido. Las necesidades de una startup en pleno crecimiento y evolución
demandan poder desarrollar velozmente.
Escribir el mismo código sólo una vez. Porque estamos construyendo una app que funcionará
tanto para IOS como para Android y esto además permite una mayor velocidad debido a que los
cambios serán efectuados a ambos dispositivos sin detenernos porque algo no funciona en
Android o en IOS por ejemplo que un equipo sea más experimentado o tenga más personas el de
Android que el de IOS, etc.
Experiencia en javascript y desarrollo web.
Desarrollo más sencillo, veloz y económico. Y algo a destacar acá es que este framework
funciona perfectamente en la mayoría de los casos que requieran hagas aplicaciones móviles
como es el caso de las aplicaciones crud, Crear, leer, modificar y eliminar.
Por último, Pueden reutilizarse sitios responsive ya diseñados
4) Developer experiencia en RN
React native tiene elementos interesantes los cuales puedes ver en esta imagen y te mostraré a
continuación:
- Hot/live reloading: la aplicación se recarga automáticamente cada vez que realizas un
cambio.
- Tenemos la muy utilizada depuración de javascript: con la cual podemos usar el
console.log, debugger, arreglar problemas de performance, ver si tu api está haciendo las
peticiones correctas, entre otros
- También tenemos el muy usado en la web Inspector de elementos para ver el

tamaño, color, contenido y demás de nuestros elementos:
- Stack trace: el cual aparecerá cuando tengamos algún error:

5) ¿Quiénes usan react native?
- Instagram
- Facebook
- Skype
- Pinterest
- Uber
- Walmart
- Discorp
- Adidas GLITCH
- Tesla
- Bloomberg
Puedes verlo todos acá: https://facebook.github.io/react-native/showcase.html
Si te gusta mucho IOS y amas tu iphone, puedes ver como se verán muchos de los componentes
UI de react native en IOS en este link: http://www.reactnative.com/uiexplorer/
6) ¿Qué herramientas puedo usar para desarrollar con react native?
En particular yo uso expo debido a que mi ordenador no es lo suficiente potente para ejecutar con
total rapidez Android Studio y no poseo una mac, por ahora expo me ha traído una satisfactoria
experiencia y he podido desarrollar una aplicación en su totalidad, sin embargo tiene sus
limitantes, así que puedes usar:
- Android Studio para Android

- XCODE para IOS
La guía oficial para ambos está en: https://facebook.github.io/react-native/docs/getting-

started.html la cual es bastante completa y he visto tutoriales y guías que se parecen mucho a
esta por lo que se puede decir que la guía no es compleja, solo debes prestar atención. En este
link también puedes ver una guía para instalar Expo y sus limitaciones, el cual es llamado “¿Por
qué no Expo?”. El código que usaremos en los vídeos de RN te servirá tanto para Expo como
Android Studio y XCODE así que no te preocupes por tu elección, toma la decisión que creas
correcta y conveniente para ti.
Ambos poseen un emulador virtual y también permiten emular a través de tu teléfono. La
documentación de expo tiene un apartado para el uso de Android studio emulator en caso de que
no cuentes con un dispositivo Android, la cual pueden ver acá:
https://docs.expo.io/versions/latest/workflow/android-studio-emulator/
Con expo podemos emular en nuestro dispositivo Android e IOS descargando la aplicación de la
tienda y luego conectando nuestro dispositivo mediante nuestro cable USB a la computadora.
Para Android la versión mínima debe ser la 5.0 y para IOS la 10.0, tal como lo dicen en su
documentación oficial.
Expo también posee SNACK https://snack.expo.io/, un sitio web en el cual podemos desarrollar y
ejecutar código react native y además brinda un código de barra para que pueda reflejar tu código
en tu tlf o el tlf de algún familiar, amigo o conocido si bien no posees uno pero quieres tu app en
un dispositivo real. En el siguiente tutorial haremos uso de snack con un ejemplo básico,
posteriormente en el resto de los vídeos haré uso de expo y un dispositivo ANDROID.
Nuestro primer Hola mundo:
Importamos nuestro primeros componentes los cuales sabemos que son componentes xq
arrancan en mayúsculas, View y Text. View son como los div en html y text como los párrafos y
¿Que es un componente? Imagínatelo como las piezas de un lego, son bloques de construcción,
únelos todos y crearas algo. Acá tmb importamos el componente principal de React.
Luego tenemos el método render el cual se usa para renderizar el código en la app y dentro de
este retornaremos nuestros distintos componentes. A los componentes podemos agregar el
atributo style al cual podemos pasarle los estilos que querramos, esta sección la veremos más
adelante, aunque si quieres ya puedes ir practicando si tienes conocimientos de css, solo existen
algunas diferencias por ejemplo en la web declaramos background-color mientras que aca o Font-
size o text-align mientras que acá el guión se remueve y la primera letra de la segunda palabra se
escribe en mayúscula. Para finalizar exportamos nuestra app con el nombre de la clase y ya
podemos ejecutar nuestro primer proyecto.

Introduccion A React Native

Cargado por

Copyright:

Formatos disponibles

Introduccion A React Native

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion A React Native

Cargado por

Copyright:

Formatos disponibles

Bienvenidos gente inteligente de ciapfa al curso de RN en español 2019.

En este video te daré un

1) ¿Qué es react native?

2) ¿Cómo funciona react native?

3) Factores para adoptar RN:

Experiencia en javascript y desarrollo web.

Por último, Pueden reutilizarse sitios responsive ya diseñados

- También tenemos el muy usado en la web Inspector de elementos para ver el

- Stack trace: el cual aparecerá cuando tengamos algún error:

Puedes verlo todos acá: https://facebook.github.io/react-native/showcase.html

6) ¿Qué herramientas puedo usar para desarrollar con react native?

- Android Studio para Android

La guía oficial para ambos está en: https://facebook.github.io/react-native/docs/getting-

Nuestro primer Hola mundo:

También podría gustarte