8gmfigirzkn2vaj6iu2g avatar v1

React Native con Zombies y Super Heroes

Crea apps nativas en iOS y Android con Javascript

¿Qué harías si hacer apps nativas fuera tan fácil como hacer páginas web?

Si sabes algo de HTML, puedes hacer apps de iOS (y Android) con React Native.

Si sabes algo de CSS, puedes hacer apps de iOS (y Android) con React Native.

Si sabes algo de JavaScript, puedes hacer apps de iOS (y Android) con React Native.

Hay muchos programas y cursos en los que puedes aprender a programar para iOS o Android, en los que necesitas:


- Ser un experto programador en Objective-C y Java.

- Dominar las clases, la programación orientada a objetos, el polimorfismo, las variables inmutables y el manejo de memoria.

- Tener mucho tiempo para conocer las librerías que hacen algo en las dos plataformas.

- Conocer a fondo Xcode y Eclipse/Android Studio, especialmente mientras están horas compilando.


De las opciones multiplataforma que existen hoy, sólo React Native te permite desarrollar apps de calidad, nativas y con el estilo que tú quieres, tan rápido como páginas web (y con tecnologías web).

Esto incluye:

- HTML o algo muy parecido a HTML.

- CSS o algo muy parecido a CSS.

- JavaScript al 100%.

- Sin tiempo de compilación y con tu editor de código favorito.

Qué es React

React fue creado por Facebook e Instagram, para hacer la interfaz de usuario o las vistas de Facebook e Instagram. Es muy rápido y fácil de modificar. Si has usado Facebook e Instagram en los últimos años, has usado React muchas veces sin darte cuenta.

React Native también fue creado por Facebook e Instagram, para hacer las apps de Facebook e Instagram en iOS y Android. También es muy rápido y fácil de modificar. Si has usado las apps de Facebook e Instagram en los últimos meses, has usado React Native muchas veces sin darte cuenta.

Para quién es React Native

Tal vez eres un desarrollador web que ha querido hacer desarrollo móvil desde hace algún tiempo. Yo sé que yo lo era.

Sin embargo, Objective-C es incomprensible, no se sabe qué se está haciendo ahí. Los lenguajes con varios headers, handlers, archivos XIB, drag and drops, por no mencionar el linkeo con librerías en C o C++ para hacer cualquier cosa, o que está escrito todo al revés y que para mapear un arreglo debes usar loops dentro de otros loops. No es rápido, no es dinámico, no es funcional. No es lo mío. Swift mejoró un poco, pero no deja de ser un lenguaje que vive dentro de Objective-C y que sólo puede llegar a un iPhone o un iPad. Y casi todas las librerías que pueden usarse están todavía en Objective-C.

Y Android es peor, porque Java es mucho peor. Para hacer un request hay que usar cien líneas, y otras doscientas para parsear un Json. ¡Todo son XML con Java, esparcidos por mil carpetas diferentes! Y yo odio los XML. ¿A quién se le ocurrió inventar un XML? Y qué tal usar Eclipse o el Android Studio, que no es más que Eclipse con un par de botones más, para hacer cualquier cosa. ¿Por qué no puedo usar Atom, Sublime Text, Notepad++, aunque sea el Notepad para codear en Android? También en Java todo va de objetos y clases con headers y handlers que hacen nadie sabe qué. Tampoco es rápido, ni dinámico, ni funcional. No es lo mío.

Lo mío es que pueda declarar una variable donde yo quiera, sin tener que construirla en un header. Lo mío es usar Jsons, hacer llamadas web, parsear las respuestas, mapearlas y reducirlas en una sola línea. Incluso hacer un webhook y crear una tabla cuando responda el servidor, asíncrono. Lo mío es JavaScript, Node, Python o Ruby.
Yo no quiero compilar otra vez una app. Tener que hacer un APK, pasarlo por USB o Airdroid, instalarlo, ejecutarlo y ver si el cambio que hice sirvió o no. Yo quiero ver resultados instantámente, con un refresh o incluso con guardar un archivo. El demás tiempo es tiempo perdido y tengo una vida que vivir.

Si eres un desarrollador web que quiere probar con apps nativas, pero cuando lo intentaste todo fue terrible, ahora es tu oportunidad.

Esta es la oportunidad de hacer apps. Tómala. Tomadla. Tomá.

Aquí está la estructura del curso:

Sección 1 - La Oportunidad de Hacer Apps Nativas en tus Manos

Aquí saltamos justo al centro del desarrollo con React Native. Primero instalamos lo que necesitas, y después vamos a un recorrido por:

- Generar un proyecto de React Native.
- El simulador de iPhone.
- Live Reload para probar la app apenas guardas tu archivo.
- Debugging, o cómo usar Chrome para ver qué sucede en tu app.

También mostramos la app completa que tendremos al final de este curso. Es una app que utiliza muchas de las mejores partes de desarrollar en React Native, al mismo tiempo que aprendes los fundamentos de React Native.


Seccion 2 - Súper Heroes, tu primera app con React Native

Con la App de Súper Heores, primero ingresas el nombre del súper héroe que quieres buscar en la API de Marvel, a donde nos conectamos para desplegar la tabla con todos los súper héroes encontrados, con su nombre y una imagen de cada uno.

Al realizar estas pantallas iniciales, aprenderás cómo funcionan muchos de los componentes esenciales de React Native. Entre ellos:

- NavigatorIOS para navegar entre pantallas.
- View para crear tus vistas.
- Text para agregar textos.
- TouchableHighlight para crear botones.
- StyleSheet para darle estilo a toda la app con CSS.


Seccion 3 - Redes con React Native

Para tomar los datos de los súper héroes, debemos llegar hasta la API de Marvel, que es nuestro repositorio de información donde están los nombres, imágenes, biografías y enlaces de todos ellos. Pero para llegar ahí, debemos crear llamadas web, com olo harías desde una página, para recuperar los datos y desplegarlos en una tabla con estilo.

Así aprenderás cómo utilizar los componentes y recursos de React Native con:

- Image para desplegar imágenes en tus apps.
- ListView para tener tablas con miles de datos de manera óptima.
- Hacer una API que sirva tanto para Web, iOS y Android.
- Usar Fetch para tomar datos de la red, parsear las respuestas y generar una vista con pocas líneas de JavaScript.


Seccion 4 - Crea tus componentes con React Native

Ya con los datos a desplegar, y cuando el usuario ha elegido a un personaje, nos vamos al perfil del súper héroe, donde se despliega la imagen a tamaño completo y las tres opciones a escoger: Biografía, Estadísticas y Notas. Para esas tres pantallas necesitamos mostrar un avatar del personaje, o un componente que convierta una imagen (la misma imagen de nuestro súper héroe) en un avatar a la Instagram dentro de un sello circular.

Así sabremos utilizar:

- Component para crear componentes reutilizables en todas tus pantallas.
- TouchableHighlight con opciones avanzadas de estilo.


Seccion 5 - Ir a biografías y enlaces con ScrollViews y WebViews

En algunas ocasiones, no sabemos la cantidad de información que mostraremos en una pantalla. La biografía de un súper héroe puede ser inexistente, para un personaje que apenas ha salido en un comic, o muy extensa, para un súper héroe con series, productos y hasta filmes.

Para esa flexibilidad tenemos los ScrollViews, en los que podemos desplegar en una pantalla pequeña mucha información. ¿Y qué hay de los enlaces, cuando debemos ir a páginas web externas pero no queremos salir de la aplicación al navegador del dispositivo? Para esas ocasiones tenemos WebViews, o la vista web donde mostramos una ventana de navegador y la página que deseemos:

- ScrollView para desplegar textos, imágenes o botones de extensión variable.
- WebView con la opción de abrir cualquier página desde tu app.


Seccion 6 - RESTful API con Firebase

Las apps de hoy leen, crean, borran y editan datos desde APIs. Teniendo los datos en APIs en servidores centrales, es posible hacer múltiples clientes web, de escritorio o móviles que se actualizan a tiempo real. La arquitectura de software REST es la estándar para crear esas conexiones a APIs, y te enseñamos a hacer esas conexiones en pocos minutos con Firebase y React Native para tener datos persistentes.

Así aprenderás a:

- Crear una cuenta en Firebase y hacer un backend completo para tu app.
- Usar Fetch para hacer un CRUD (Create, Read, Update, Delete) con Firebase.


Sección 7 - Bonus

Entre los bonus con React Native tendremos:

- Manejo de Errores para mostrar un mensaje pertinente al usuario cuando algo falla.

- ActivityIndicator cuando se estén leyendo o manipulando datos en un servidor en la nube.

- Desarrollo de proyecto en Android, publicación a las App Store y Play Store, iPad y tabletas y mucho más.



Your Instructor


Fernando Altuzar
Fernando Altuzar

Fernando Altuzar es un adicto a la tecnología, con apps para consumidores y empresas Fortune 500.

Aprendió a programar a los 8 años en una Commodore, sabe más de 10 lenguajes y tiene casi 20 años de experiencia profesional.


Frequently Asked Questions


¿Es este un buen curso para gente que sólo hace desarrollo web?
ABSOLUTAMENTE. Lo mejor que tiene React Native es que se ajusta mucho a la experiencia de crear páginas web. Los componentes se escriben como si fueran HTML. Las funciones se escriben como si fueran JavaScript (ehm, SON JAVASCRIPT). Y refrescar tu aplicación es en tiempo real, sin compilaciones o deployments, como al hacer una página web.
¿Cuánto va a tomarme en crear y publicar una App?
He tenido amigos que van de cero a tener pulicada su App en menos de una semana. Para tener un buen manejo de expectativas, puedes darte 4 semanas entre saber de qué va a ir tu App, saber qué pantallas va a tener y hacerla con React Native. ES MUY ALCANZABLE. Como todo, depende del esfuerzo que quieras poner.
¿Necesito tecnología especial?
Por ahora, para hacer Apps en iPhone y iPad se necesita Xcode, y Xcode sólo corre en Mac. Xcode es gratis. Eso se ve en el curso, pero también necesitarás un editor de código como Atom, que también es gratis.
¿Cuándo comienza y termina este curso?
Este curso comienza ahora y no termina nunca! Es un curso que va a tu propia velocidad - tú decides cuándo empezar y cuándo terminar.
¿Por cuánto tiempo tengo acceso a este curso?
¿Cómo suena acceso de por vida? Después de entrar, tienes acceso ilimitado a este curso por el tiempo que tú quieras - desde cualquier tablet, teléfono o PC que tengas.
¿Qué pasa si no estoy feliz con el curso? ¿Hay reembolso?
Pasé mucho tiempo creando el mejor producto que hay disponible, y lo último que quiero es que no estés feliz. Si no estás feliz y me mandas el código que has hecho en cada sección, antes de 30 días de la compra, para probar que realmente hiciste un esfuerzo, reembolzaremos tu compra.

Pero ya he dicho demasiado...

Así que aquí hay algunas cosas que otras personas han dicho:



"Gracias al curso de Fernando no tuve que invertir demasiado tiempo y dinero para nuestras apps. Después de aprender cómo usar React Native las hice yo misma en cuestión de días."
-Celeste North, MUBI



"¡Excelente curso, excelente instructor! Lo que más me gustó es que fue completamente práctivo desde el inicio. Esto me permitió aprender rápidamente cómo hacer apps con React Native. ¡Ya hice mi primera app!"
-Maite Sánchez, Barcito



"Con Fernando aprendí a hacer apps rápidamente con React Native, apps nativas con HTML, CSS y Javascript como páginas web. No pensé que fuera a ser tan fácil pero cualquiera que termine el curso, lo puede lograr."
-Santiago Zavala, 500 Startups


Mi Verdadero Deseo

Si lo que deseas es crear apps nativas con los recursos que ya conoces, esta inversión te dará todo lo que necesitas.

También puedes tratar de aprender por tu cuenta.

Quiero que hagas lo que tú crees que es mejor para ti.

Lo que yo creo es que debemos aprender de los mejores y después aplicar esos conocimientos en todo lo que haces y así hacer lo que quiero.

Es un método que funciona bien :D

Espero verte al otro lado.

Instructor y Creador de React Native con Super Heroes

Get started now!