Udemy

Platform

Español

Language

Mobile Apps

Category

React Native: Aplicaciones nativas para IOS y Android

TypeScript, React Native CLI, Google y Apple maps, cámara, GPS, polylines, hooks, autenticación, despliegues y más

4.88 (778 reviews)

Students

43,5 horas en

Content

Jun 2021

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

React Native

Crear aplicaciones móviles nativas usando RN

Crear muchas aplicaciones altamente estilizadas

Desplegar aplicaciones en Google PlayStore y Apple AppStore

Dominar React con TypeScript

Uso de recursos nativos como la cámara, galería y GPS


Description

React Native: Aplicaciones nativas para IOS y Android

Este curso completo de React Native tiene por objetivo enseñarte este framework de una forma sólida y robusta, con más de 42 horas de contenido en video (sin contar tareas y ejercicios). Es importante tener un base de React con Hooks para que este curso se sienta muy sencillo, ya que la idea de React Native, es que tomes tu conocimiento de aplicaciones de React y lo traslades a crear aplicaciones móviles.

El curso está basado en React Native CLI (No expo) y de la mano de TypeScript, el cual no es obligatorio para React Native, pero absolutamente todo lo haremos basado en él para que vean el poder de tener un tipado estricto y así generar la documentación de nuestras funciones y métodos de forma automática.

Tocaremos la mayor parte de los componentes existentes en React Native, pasaremos por un "Hola Mundo", luego animaciones, manejo de estado, recursos nativos y poco a poco crecemos en complejidad hasta llegar a los despliegues en la Google Play Store y Apple App Store.

Estos son algunos temas que tocamos en el curso:

  • React Native CLI

  • Google Maps

    • SDK Nativo para IOS y Android

  • Apple Maps

  • GPS

  • Cámara

  • Galería de imágenes

  • TypeScript

    • Tipos básicos

    • Mapeo de respuestas

    • Mapeo de Props

    • Obligar argumentos en componentes

    • Obligar argumentos en rutas

  • React Navigation

    • Stack

    • Drawer

    • Tabs

    • TopTabs

    • MaterialTabs

    • TopScrollableTaps

    • Argumentos entre pantallas

  • Iconos

  • Axios

    • Intancias

    • Middlewares

  • Configuraciones especiales para Mac y Windows con videos específicos

  • Gradientes

  • Diseño Flex, Box Object Model y Position

  • Temas

    • Dark

    • Light

    • Personalizado

  • ContextApi

  • Consumo de APIs

  • CRUDs

  • Carga de imágenes

  • Re-utilización de componentes y hooks

  • Animaciones

  • InfiniteScroll

  • Pull to refresh

  • Slideshows

  • Carruseles

  • Formularios

  • Debouncers

  • Búsquedas

  • Autenticación mediante JWT

  • Despliegues:

    • Apple AppStore

    • Google PlayStore

  • Y mucho más

Mi objetivo con este curso, es que sea lo más completo posible, con todo lo que puedes necesitar para crear aplicaciones móviles nativas y crear un repertorio enorme de ejercicios que te sirvan de documentación para cuando lo necesites, pero a la vez, que puedas tomar el código de esta librería que haremos y lo implementes de forma simple en tus aplicaciones futuras.

Espero que el curso sea de tu agrado y nuevamente gracias por todo tu apoyo y soporte, que permitió la creación del mismo.

Nos vemos en la siguiente clase


Screenshots

React Native: Aplicaciones nativas para IOS y Android
React Native: Aplicaciones nativas para IOS y Android
React Native: Aplicaciones nativas para IOS y Android
React Native: Aplicaciones nativas para IOS y Android

Content

Introducción

Introducción

¿Cómo funcionará el curso?

¿Cómo realizar preguntas?

Instalaciones necesarias y recomendadas

Reforzamiento de las bases - Conocimiento requerido para continuar

Introducción a la sección

Temas puntuales de la sección

¿Por qué TypeScript?

Inicio de proyecto - Introducción React con TypeScript

Preparar proyecto y nuestros primeros Functional Components en TS

Tipos Básicos - TypeScript

Objetos literales e interfaces

Funciones, retorno y argumentos

Hook - useState

Custom Hook - useCounter

Componente Login - Antesala al useReducer

Hook - useReducer

AuthReducer

Login y Logout

Peticiones HTTP - Axios

Establecer el tipo de las respuestas HTTP

Mostrar usuarios en pantalla

Crear una pequeña paginación

Custom Hook - useUsuarios

Siguientes y Anteriores registros - Paginación

Formularios

Custom Hook - useForm <Genericos>

Código fuente de la sección

Instalación y configuración de ReactNative con emuladores y dispositivos físicos

Introducción a la sección

Temas puntuales de la sección

Diferencia entre EXPO CLI y ReactNative CLI

Windows: Instalaciones necesarias

Windows: Crear un dispositivo virtual

Windows: Crear proyecto de React Native

Android físico - Habilitar USB Debugging

Windows: Correr aplicación en dispositivo físico

Mac OSX: Instalaciones necesarias - Android

Mac OSX: Emulador de Android

Mac OSX: Instalaciones necesarias para IOS

Mac OSX: Crear proyecto de React Native

Mac OSX: Android Físico USB Debugging

Mac OSX: Correr App en Android físico

Mac OSX: Correr en simulador de IOS

Mac OSX: Correr en un iPhone físico

Mi primera App en React Native - CounterApp

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - MiPrimeraApp

Hola Mundo

Crear pantallas independientes

Crear un contador

Tip: ¿Cómo ver los ejemplos de la documentación?

TouchableOpacity

StyleSheet

Botón personalizado flotante

Componente personalizado: FAB - Floating Action Button

Enviar funciones y propiedades opcionales

Estilo condicional

Código específico para plataforma

Resumen de lo aprendido hasta el momento

Código fuente de la sección

Flex, Position y Box Object Model

Introducción a la sección

Temas puntuales de la sección

Box Object Model - Fundamentos del diseño en React Native

Continuación de proyecto - Diseños y Flexbox

Padding, Margin, Border, Width y Height

Height, Width porcentual y dimensiones de la pantalla

Position - Fundamentos del diseño en React Native

Posición relativa

Posición absoluta

Flexbox - Fundamentos del diseño en React Native

Flex

Flex Direction

Justify Content

Align Items

Align Self

Flex Wrap

Preparar nuevo componente para la tarea

Tarea sobre diseños

Resolución de la tarea de diseños

Código fuente de la sección

Aplicación - Calculadora de IOS

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - Calculadora

Diseño inicial y pantalla de Calculadora

Textos y mi primer botón

Botón de calculadora y sus filas

Terminar todos los botones y el estilo de la calculadora

Construir el número base

Consideraciones para armar el número

Tarea - Botón de borrar última entrada

Botones de operaciones aritméticas

Realizar el cálculo

Custom Hook: useCalculadora

Código fuente de la sección

NavegaciónApp - Todos los tipos de navegación

Introducción a la sección

Temas puntuales de la sección

Demostración de la sección

Inicio de proyecto - NavegacionApp

Explicación sobre el sistema de navegación

React Navigation - Pre-requisitos

React Navigation - Stack

Navegar a otras pantallas

Estilizando el Stack Navigator

Enviar argumentos entre pantallas

Diferentes formas de colocar el tipo de dato de los argumentos

React Navigation - Drawer

Configurar Drawer básico

Toggle Drawer - Mostar / Ocultar

Drawer personalizado

Navegar desde el MenuLateral personalizado

useSafeAreaInserts

Código fuente de la sección

Tabs, MaterialTabs y Material Top Scrollable Tabs

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto

Explicación sobre el Bottom Tab Navigator

Crear el BottomTabNavigator

Personalizando el BottomTabNavigator

Preparar el espacio para el ícono

Material Bottom Tab Navigator

Material Top Tab Navigator

Personalizando el Material Top Tab Navigator

Iconos en nuestra aplicación - Instalaciones

Instalación de íconos en IOS

Colocando íconos en todo lugar

Código fuente de la sección

Context y estado global de la aplicación

Introducción a la sección

Temas puntuales de la sección

Introducción sobre el Context y estado global de la aplicación

Continuación de proyecto - NavegacionApp

Crear nuestro primer Context en TypeScript

Consumir el context - AuthState

Reducer - useReducer

Disparar acciones

Disparar el SignIn desde otra pantalla

TouchableIcon - Custom Component

Cambiar el ícono favorito - AuthState

Borrar información del AuthState

Cambiar el username

Código fuente de la sección

Aplicación de Películas

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo al final de la sección

Inicio de proyecto - PeliculasApp

Navegación entre pantallas

Obtener películas en cartelera

Tipado de TheMovieDB

useMovies

Mostar el poster de la película

Carousel de tarjetas

FlatList de Películas

Componente HorizontalSlider

Películas populares, mejor calificadas y próximas a salir

Múltiples peticiones de forma simultánea

Navegar a la pantalla de detalles

Diseño inicial de la pantalla de detalles

Sombra e íconos de nuestra aplicación

useMovieDetails - CustomHook

Cargar información de los actores

Detalles de la película

Detalles de la película - Parte 2

Componente para mostrar actores

Lista de actores

Botón para regresar

Código fuente de la sección

Bonus: Gradiente animado - ContextAPI

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - PeliculasApp

Ejercicio para comprender el FadeIn

FadeOut

Fondo con gradiente

Fix: Interface de MovieDB

Obtener los colores de las imágenes

Helper: Obtener colores

Crear un contexto para comunicar el cambio de color

Usar los colores del context

Lógica para cambiar y animar el gradiente

Explicación del cambio de gradiente

Código fuente de la sección

Componentes de ReactNative

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - RNComponents

Crear Stack e instalar iconos

Componente - FlatList

FlatList Separator y Header

FlatListItem y navegación

Animated API

FadeIn y FadeOut

Easing - Bounce

useAnimation

Animated ValueXY

Componente - Switch

Header re-utilizable

CustomSwitch

Uso de multiples switches

Componente - Alert

Componente - Alert Prompt

Prompt IOS y Android

Componente - TextInput

Multiples TextInputs en pantalla

Componente - keyboardavoidingview

useForm - Tarea

Pull to refresh

Personalizando el Refresh Control

Componente - SectionList

Header y Footer de un SectionList

Componente - Modal

Personalizar el modal

InfiniteScroll

InfiniteScroll con imágenes

Animated Image

Enviar estilo desde el padre

Cierre de sección

Código fuente de la sección

Temas y Slideshow de pantalla completa

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto - ComponentsApp

Snap Carousel

Paginación de Slides - ( Puntos indicativos )

Botón en el último Slide

Solución de la tarea con los slides

Theme Light y Dark - Generalidades

Pantalla para cambiar el tema de la aplicación

ThemeContext

ThemeReducer

Consumir el ThemeContext

Cambiar entre Light y Dark

Tarea - Usar el tema en toda la aplicación

Resolución de la tarea - Segunda Parte

Cambio de tema basado en el Sistema Operativo

Código fuente de la sección

Pokedex

Introducción a la sección

Temas puntuales de la sección

Demostración de la sección

Inicio de proyecto - Pokedex

Stack Navigator e íconos

Diseño básico del HomeScreen

Obtener lista de Pokemons en un custom hook

Colocar el tipo de dato que retorna la petición HTTP

Mapear resultado a un arreglo de SimplePokemon

Mostrar pokemons - InfiniteScroll

FadeInImage y useAnimation

PokemonCard - Componente

Terminando el PokemonCard

Colocar el color de fondo de la tarjeta basado en el pokemon

Problema con la actualización de estado

Navegar a la pantalla de detalle

Pantalla del Pokemon

Información completa del Pokemon

Información adicional del Pokemon

Peso y Sprites del Pokemon

Stats y pie de la pantalla

Código fuente de la sección

Debouncer y Búsquedas

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto - Pokedex

Implementar Tabs en nuestra aplicación

SearchComponent - Diseño

Pre-cargar la información para buscar por nombre

Optimizaciones de estilo

useDebounceValue - CustomHook

Filtrando Pokemons basados en el término de búsqueda

Buscar por ID

Detalles estéticos de la pantalla de búsqueda

Código fuente de la sección

RutasApp - Permisos - Aplicación con mapas - Google y Apple Maps

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - RutasApp

Rutas y StackNavigator

Android: Configuración inicial de permisos de GPS

IOS: Configuración inicial de permisos de GPS

Solicitar y revisar permisos - Check y Request Permission

Permission Provider - ContextAPI

Uso del PermissionContext

Revisar el permiso de GPS al regresar a la aplicación

Detectar qué pantalla mostrar al inicio de forma automática

Abrir ajustes de localización si el permiso está bloqueado por el usuario

Botón estilizado

Código fuente de la sección

RutasApp - Aplicación con mapas - Google y Apple Maps

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Continuación de proyecto - MapasApp

Configuración de GoogleMaps

Android: Configuración de GoogleMaps

IOS: Configuración de GoogleMaps

Fix: Loading infinito en ocaciones

React Native Maps - RequireCycle Warning

Marcadores y componente Mapa re-utilizable

MapView - Mostrar la ubicación del usuario

Obtener las coordenadas del usuario

CustomHook - useLocation

FabIcon - Componente personalizado

Mover la cámara a las coordenadas del usuario

Darle seguimiento al usuario (Mover cámara constantemente)

Dejar de seguir y limpiar el watch

Trazar la ruta del usuario

Mostrar y ocultar las polylines

Evitar llamadas al cambio de State cuando el componente esta desmontado

Código fuente de la sección

Autenticación y Productos - Backend

Introducción a la sección

Temas puntuales de la sección

Descargas y configuraciones básicas

Levantando el backend

Probando el backend y grabaciones

Desplegando nuestro backend en Heroku

Autenticación - ProductosApp

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio de proyecto - ProductosApp

Diseño del login

Diseño del login - Parte 2

Formulario y navegación

Diseño de la pantalla de registro

AuthContext

AuthReducer

Conectar AuthContext con el authReducer

Levantar el backend y probarlo

HTTP - Login y obtener el token

Dispatch de la acción de Signup

Manejar errores de login

Async Storage - Guardar Token

Validar el token

Loading Screen y revalidar el token

Logout

Registro de usuarios

Código fuente de la sección

Productos, galería y cámara

Introducción a la sección

Temas puntuales de la sección

Objetivo al final de la sección

Continuación de proyecto

ProductosContext

ProductsNavigator

ProductsScreen - Diseño y data

Navegar a la pantalla de Producto

Diseño de la pantalla de producto

React Native - Picker

Llenar el selector con categorías

Formulario del producto

Mostrar imagen y la categoría del producto

Prepararnos para la grabación o actualización

Crear producto y actualizar producto - Llamar el backend

Pull to refresh

Código fuente de la sección

Cámara, galería y carga de imágenes al backend

Introducción a la sección

Temas puntuales de la sección

Objetivo al final de la sección

Continuación de proyecto - Cámara y galería de imágenes

Abrir la cámara y tomar una fotografía

Probar cámara en dispositivo físico

Subir imagen a nuestro backend

Subir fotografía desde la galería

Código fuente de la sección

Despliegues en Google Play Store y Apple App Store

Introducción a la sección

Temas puntuales de la sección

Preparación de proyecto

Android: ícono y nombre de la aplicación

IOS: ícono y nombre de la aplicación

Android: SplashScreen

Android: Personalizar el SplashScreen

IOS: SplashScreen

Generar Android App Bundle - AAB - APK

Cambiar identificador único de Android

Generar un nuevo AAB - Actualización de llave o actualización de app

Subir AAB a la PlayStore

Configuraciones adicionales en la Google PlayStore

IOS: Identificador único y portal de developer de Apple

Generar identificador y preparar el espacio en la AppStore Connect

Testflight - Probar la aplicación

Despedida del curso

Presentaciones utilizadas

Información adicional sobre React Native

Fin y cierre del curso

Bloopers


Reviews

E
Erik14 April 2021

Excelente curso. Agradecido de todo el conocimiento adquirido, magnifica forma de enseñar de una forma única. Con este curso pude perderle el temor a usar Typescript y desde hoy lo adoptare cada vez que lo necesite. Gracias!

J
José14 April 2021

Recién acabo de comenzar el curso, y el contenido me parece fantástico, así como el humor del profesor hace que la clase sea divertida!!!

O
Omar13 April 2021

Tenia conocimientos en RN, pero este curso Expande aun más, ahora puedo reducir mi código a un 30% o hasta mas.

H
Henrry10 April 2021

Este curso va muy bien estructurado, si lo siguen según como el profesor lo recomienda van a aprender mucho. Es muy metódico y vale oro su contenido. No se arrepentirán.

J
Jorge6 April 2021

Excelente curso. El más completo en Udemy. Y una ventaja enorme trabajar con Typescript. 1000% recomendado.

G
Giovanni6 April 2021

Excelente curso, todo muy bien explicado, y lo mejor que para este curso utiliza TypeScript en lugar de JavaScript

U
Ulises6 April 2021

Ya tomé otros cursos con el instructor, y no tengo más que palabras positivas para con él. Fernando es un crack!

C
Carlos6 April 2021

Aunque apenas estoy comenzando el curso doy esta calificacion por que se de antemano que todos los cursos de Fernando son mejor de lo que uno espera

G
Gabriel5 April 2021

En lo personal tengo varios cursos de Fernando y en particular nunca me decepciona asiq eu opino desde ya que será un curso muy interesante y útil

L
Lander5 April 2021

Como siempre Fernando excelente, muy bien explicado, todo lo que explica lo lleva a la práctica, es muy didáctico, sinceramente se aprende muchisimo con este instructor

B
Briaulin5 April 2021

Es el mejor profesor sin dudas. Gracias a el me puedo dedicar a la programación. Aprendo mucho más con el que en todos los años de carrera.

V
Victor4 April 2021

Excelente curso impartido por el instructor muy bien explicado y me han ayudado bastante. Lo recomiendo.!

A
Adan4 April 2021

Cómo todos los cursos de Fernando la calidad de contenido es increíble y si a eso le sumas la manera de explicar que tiene, es la combinación perfecta!

A
Andrés4 April 2021

Sólo con ver las primeras secciones y analizar la forma como está estructurado todo el contenido del curso denota la buena calidad del mismo y la experiencia del instructor. Muchas gracias por el empeño y esfuerzo puesto en este curso de React Native.

R
Richar4 April 2021

No debería preguntar esto en la primera sección del curso, pero viniendo de Fernando Herrera no espero menos que 5 estrellas y por eso las pongo ya.


Coupons

DateDiscountStatus
4/5/202195% OFFExpired
4/10/202194% OFFExpired
4/19/202195% OFFExpired
5/10/202195% OFFExpired
5/17/202194% OFFExpired
6/4/202195% OFFExpired
6/7/202194% OFFValid

3883590

Udemy ID

3/1/2021

Course created date

4/5/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram