React Native + Expo: Guia Inicial con Native Base y Redux

Name: React Native + Expo: Guia Inicial con Native Base y Redux
Rating: 4.3 (101 reviews)

Crea tu aplicación de itinerarios con Skyscanner API utilizando Redux, Redux Saga, React Hooks y Native Base

Created byJuan Jose Ortiz del Toro

Last updated 7/2020

Spanish

Spanish [Auto],

What you'll learn

Crear tu aplicación con React Native para Android y iOS, implementando sus componentes esenciales
Aprender a usar la herramienta Expo para evitar el código nativo
Aprender Redux y sus esenciales (Actions, Reducers, Store)
Utilizar y aprender como funciona Redux Saga para los side effects
Implementar Native Base como librería UI
Implementar Axios para realizar llamadas a la API
Implementar Google Auth para Android y iOS
Manejo de variables de entorno
Crear una estructura de archivos organizada de tu proyecto
Implementar React-Navigation para la creación de las rutas de tu aplicación

Course content

6 sections • 107 lectures • 9h 58m total length

Introducción3:21

¿Qué es React Native?2:54
En este video, se va a explicar lo que es React Native.
Estructura de un archivo en React Native3:25
En este video voy a explicar la estructura de un archivo de React Native. Que son muy similares a los de un proyecto en React Js.
¿Qué es Expo?3:16
Expo, es una herramienta potente para la creación de Aplicaciones móviles con React Native. En este video aprenderás como funciona
Instalando Expo CLI1:56
En este video vamos a instalar Expo-CLI. Ademas aprenderás a usar el Snack de Expo, para ejecutar Apps en la nube

Comando para instalar Expo-CLI
npm install expo-cli --global
Comandos esenciales en Expo2:14
Comandos esenciales:
npm install expo-cli --global
expo init my-nuevo-proyecto
expo start
Creando primer proyecto3:31
Estructura del proyecto creado2:45
En este video se va a explicar como funciona la estructura del proyecto y para qué sirven cada una de las carpetas que se autogeneraron al crear el proyecto con el comando de Expo CLI
Comparativa; React Js y React Native2:53
Ahora aprenderás las diferencias que existen entre React Js y React Native, que son principalmente el uso de los componentes.
¿Como funcionan los estilos en React Native?2:34
Ahora analizaremos como funcionan los estilos en React Native, para este video es necesario haber trabajado con estilos en React Js o Css
Layouts en React Native7:57
Los layouts son muy importantes en React Native, ya que son utilizados para construir aplicaciones que se vean genial en los diferentes dispositivos. En este video aprenderás como implementarlos
Componentes esenciales10:33
Existen algunos componentes que son esenciales para comenzar a trabajar. En este video vamos a ver algunos ejemplos de componentes en React Native.
Eventos en React Native7:07
En este video se va a explicar el funcionamiento de los eventos en React Native
¿Que es Native Base?4:25
En este video vamos a conocer la libreria que nos apoyará para los estilos en nuestro proyecto.

Explicacion proyecto4:21
Prototipo Baja Fidelidad3:41
Creacion estructura de carpetas4:16
Creando vistas principales3:30
Para comenzar a ver el proyecto ejecutándose en un dispositivo real, tenemos que crear las vistas principales en base al prototipo propuesto
¿Que es React Navigation?7:52
Comando para instalar librerías:
npm install --save react-navigation react-native-screen
Optimizando codigo del router4:21
En este video vamos a optimizar el código utilizando constantes para hacerlo mas consistente y tener mejores prácticas.
Conectando routes5:39

¿Qué son las actions en Redux?5:40
Ahora es momento de comenzar a trabajar con Redux. Si tienes conocimientos de Redux, te recomiendo saltar esta sección, de lo contrario vamos a aprender los esenciales de Redux.
¿Qué son los reducers?5:26
Los reducers son funciones puras muy importantes para actualizar la información de nuestra store. En este video vas a aprender cómo funcionan los reducers.
¿Qué es la store?3:50
La store es el core principal de Redux. En este video vamos a aprender como utilizarla
¿Qué es Redux Saga?6:48
Durante el curso vamos a utilizar un Middleware para manejar los side effects (llamadas a la API) para dejar las actions mas limpias. Este middleware utiliza generadores de ES6, si no estas familiarizado con ellos de igual manera daremos un breve repaso.
Implementando estructura Redux en nuestro proyecto3:04
Configurando store en proyecto4:15
Creando reducers en proyecto2:36
Creando sagas en proyecto4:18
Conectando redux al proyecto3:02

Instalando Native Base4:58
Es momento de instalar la librería para realizar un proyecto completamente compatible con ambas plataformas (hablando de estilos)
Agregando Activity Indicator a LoadingPage7:41
Agregando componentes Esenciales a Login11:06
Agregando Icono a Button10:25
Cargando Fonts usando expo-font11:28
En este video vamos a configurar Fonts en nuestro proyecto, ya que Native Base utiliza dos fuentes externas
Explicacion Flujo Expo Google App auth2:02
Ahora vamos a revisar el flujo que tenemos que seguir para poder autenticar a los usuarios con google.
Generando keystore en android4:53
Tenemos que poner mucha atención en este video, ya que el keystore es fundamental para poder generar la aplicación en google y habilitar la autenticación. Recuerda dejar tu pregunta y que todo te sea lo suficientemente claro para continuar
Creando Apps en oauth5:20
La app en google es la que nos dará las credenciales para colocar en nuestro código. Por seguridad eliminaré estas aplicaciones. Asegúrate de haber creado las tuyas para evitar problemas
Creando Apps en Firebase3:46
Instalando expo google app auth2:15
Usando google app auth7:16
Corrigiendo credenciales3:13
¿Que es AsyncStorage?4:49
AsyncStorage es muy importante para guardar información en la memoria del dispositivo. En este video se va a explicar la compatibilidad y para qué sirve.
Implementación AsyncStorage Parte 16:10
Implementación AsyncStorage Parte 25:08
Optimizando código con constantes5:08
Es buena práctica colocar constantes en lugar del valor de una string directamente, ya que cuando queramos hacer cambios al valor de la string solamente sera en un solo lugar
Ejecutando App en ios simulator2:04
Para ejecutar la aplicación en dispositivos iOS es necesario tener instalada la app de Expo en tu dispositivo fisico. En mi caso he utilizado un simulador de iOS, para esto tienes que tener instalado en tu Mac el programa X code
Implementando variables de entorno8:41
Ahora vamos a implementar variables de entorno para ocultar los keys en un repositorio. Ademas podremos tomar el key correspondiente dependiendo del ambiente en el que se este trabajando (Dev, Staging, Production)
Implementando Navigation Navigate en Login6:15
Redirigir a home si token existe4:03
Creando header component5:55
Enviando props a Header7:59
Definiendo Colores de la App5:02
Skyscanner API: Primer vistazo5:05
Información importante sobre Skycanner API0:34
Skyscanner API: Utilizando endpoints5:17
Creando componente de busqueda parte 1 (creando un formulario)8:00
En este video vamos a implementar un formulario apoyandonos con Native Base
Implementando ionicons en Form3:11
Implementando DatePickers4:30
Implementando Pickers5:48
Utilizando useState para guardar estados10:49
Ahora vamos a comenzar a implementar efectos de los hooks. Si para esta instancia no estas familiarizado con los hooks te recomiendo mi curso totalmente gratuito donde implementaras una web muy sencilla para comenzar con los Hooks
Creando estilos reusables4:33
En este video vamos a reutilizar estilos dentro de la carpeta /styles que hemos creado durante el inicio del curso. La intención es no reescribir código, recuerda que cada archivo pesa y es fundamental a la hora de generar el instalador de producción.
Estilizando SearchComponent8:05
Implementando Button en SearchComponent9:34
Fix de header marginTop2:15
Creando actions para getLocations6:07
Para poder traer información de la API, es necesario disparar acciones y que la saga las escuche para hacer lo correspondiente. En este video eso vamos a trabajar
Creando saga getLocations5:06
La saga es muy importante para hacer las llamadas a la API. En este video vamos a crear nuestra primera función saga y la pondremos a escuchar las acciones
React-redux instalacion e introduccion3:53
React redux es una librería para conectar nuestros componentes a la store de Redux. En este video vamos a explicar como funciona
Ejecutando dispatch y ejecutando saga4:51
Creando reducer getLocations4:25
Para actualizar la store es importante regresar la información en los reducers. La información llega aquí después de que la saga dispare la acción
Qué es axios y como instalarlo4:00
Axios será la librería para llamar a la API. Como es una librería externa la tendremos que instalar. Es compatible ya que esta escrita en Javascript
Creando archivo reusable de API con axios2:51
Para comenzar a realizar llamadas a la API vamos a crear un archivo reusable para todo tipo de request (POST, GET, PUT, PATCH)
Implementando KeyPress y llamar a la API13:19
En este video vamos a llamar a la API cuando el usuario este tecleando sobre nuestros inputs. Para ello utilizaremos onKeyPress. Evento de react native para el componente Input
Completando Reducer itineraries para recibir data4:17
Implementando useSelector3:00
En este video vamos a implementar useSelector para obtener la información de la API.
Creando componente fixed results7:46
En este video vamos a crear el componente FixedList que va a mostrar los resultados en forma de búsqueda rápida
Importando fixed list en search component7:09
Aplicando props y estilizando fixed list component7:37
Ahora estilizaremos un poco FixedList para que se vea como lo esperamos.
Guardando información de input (places) en un object7:51
En este vídeo vamos a cambiar la manera en que guardamos la información de nuestros inputs (hablando de places)
Validaciones en DatePickers (Range)3:11
Recuerda validar los datepickers ya que no tendría sentido escoger una fecha anterior de despegue o una fecha anterior a la fecha de salida
Enviando parámetros de una ruta a otra5:04
Validando parametros con Moment Js5:59
Tomando parámetros de navigation3:14
Creando actions para getItineraries6:34
Preparando parámetros para getItineraries7:05
Haciendo llamadas a la API para obtener itinerarios12:44
Conectando vista results a store redux1:45
Ahora tenemos que conectar nuestro componente de Results a la store para comenzar a mostrar itinerarios
Creando componente reusable Itinerary6:01
Ahora vamos a crear nuestro componente Itinerary, el cual será la base de cada uno de los itinerarios y que mostrará la información a detalle de cada uno de los vuelos
Enviando props a Itinerary8:03
Mostrando vuelos de ida y de regreso en itinerary8:33
Estilizando Itinerary3:01
Mostrando información de precios9:31
Implementando NativeBase Layouts6:57
Utilizando React native linking en itinerary5:36
Linking será utilizado para llevar a los usuarios al navegador para completar la reserva de los itinerarios
Renderizando Contenido correcto en results13:33
En esta ocasión vamos a mostrar el mensaje correcto cuando se esta haciendo fetch a la API para obtener Itinerarios. Si esta cargando, si ha encontrado un error o los resultados mismos
Haciendo Header mas reusable4:14
En esta ocasión vamos a realizar dentro del componente Header el leer la información del usuario (imagen de perfil). Ya que evitamos escribir código innecesario
Utilizando parámetros reales en results2:47
Colocando back Icon a Header7:33
Realizando pruebas en Android2:35
Creando pantalla de Perfil9:48
Ahora vamos a crear la pantalla final de nuestro curso la cual mostraremos la información del usuario y también cerraremos sesión
Mostrando información de Perfil7:04
Formateando fechas y horas de vuelos3:31
Continuaremos utilizando moment.js para formatear las fechas de una manera que sea legible para los usuarios
Cerrando sesión en Perfil7:58
Implementando BackHandler7:23

Requirements

Conocimientos en React Js
Conocimiento en Javascript (ES6)
Conocimientos en CSS

Description

En este curso aprenderás como funciona React Native y sus componentes para crear tu propia aplicación utilizando la herramienta Expo para dispositivos de Android y iOS, sin la necesidad de preocuparte por el código nativo de cada plataforma. En este curso únicamente utilizaremos javascript para crear el proyecto.

El contenido empieza desde las bases, comenzando con la estructura de un archivo de React Native hasta crear tus propios componentes reusables con código limpio y legible. En esta ocasión no utilizaremos Class components, es decir, utilizaremos React Hooks para cada componente.

Expo será clave para poder escribir código de Javascript solamente y evitar tocar el código nativo de cada plataforma, es por ello que lo estudiaremos desde cómo funciona hasta implementar sus componentes y crear aplicaciones directamente en la nube con expo-snack.

Redux será el encargado de mantener el estado global de nuestra aplicación. En este curso vamos a aprenderlo si es que nunca has trabajado con él. Ademas de Redux-Saga para realizar los side effects (Llamadas a la API) utilizando Axios, así como React-Redux para conectar nuestros componentes a la Store.

Como librería UI utilizaremos Native Base, que nos apoyará para estilizar nuestros componentes de una manera sencilla y precisa. Native Base nos apoyara con sus componentes y anatomía ya estilizados para crear aplicaciones que se vean perfectas en los diferentes dispositivos de la actualidad.

En este curso vamos a crear un proyecto llamado Itinerarios de SkyScanner, que consiste en iniciar sesión con Google, después vamos a solicitar los itinerarios o vuelos acorde a los parámetros enviados (destino, origen, adultos y fechas) para después mostrarlos en una lista detallada a los usuarios, ya que los vuelos son reales, al darle click nos llevará directamente a las aerolíneas o agencias de viaje para completar la reserva. SkyScanner provee una API para realizar búsquedas de vuelos, por lo cual la vamos a analizar los parámetros requeridos para construir un formulario dentro de nuestra aplicación. Al finalizar el curso obtendremos una aplicación funcionando en ambas plataformas, ademas de código limpio y legible.

Cada línea de código que vayamos a escribir será explicada para que tengas una mejor comprensión y asegurarnos de que saques provecho de este curso.

Who this course is for:

Desarrolladores Moviles
Desarrolladores Web
Desarrolladores React Js
Desarrolladores Frontend
Desarrolladores Javascript

React Native + Expo: Guia Inicial con Native Base y Redux

What you'll learn

Explore related topics

Course content

Introducción1 lecture • 3min

React Native Esenciales13 lectures • 56min

Inicialización Proyecto Búsqueda de Itinerarios7 lectures • 34min

Redux9 lectures • 39min

Creación Proyecto búsqueda de itinerarios74 lectures • 7hr 25min

Material Extra3 lectures • 22min

Requirements

Description

Who this course is for: