React Native: Crea aplicaciones móviles reales iOS y Android

Introducción5 clases

PROYECTO: Cotizados de prestamos

PROYECTO: App de cumpleaños + Firebase

PROYECTO: The Movie App

PROYECTO: Chat Realtime

PROYECTO: News + Strapi

Entorno de Desarrollo para MacOS15 clases

Instalando y configurando Xcode

Instalando Node

Instalando Watchman

Instalando Cocoapods

Instalando Yarn

Creando una app de React Native

Ejecutando nuestra app en un emulador iPhone

Ejecutando nuestra app en un iPhone real

Debugger UI

React Devtools

Instalando Java JDK

Instalando Android Studio

Agregando Android al $PATH

Ejecutando nuestra app en un Android real

Ejecutando nuestra app en un emulador Android

Entorno de Desarrollo para Windows7 clases

Instalar Chocolatey

Instalando Node.js, Python y Java JDK

Instalando y configurando Android Studio

Agregando Android al $PATH

Creando una app de React Native

Ejecutando nuestra app en un emulador Android

Debugger UI

Conceptos básicos de React15 clases

¿Qué vamos hacer en esta sección?

Introducción a JSX

Conceptos básicos de React JS

Creando nuestra primera app en React JS

Estructura de React JS

Nuestro primer Componente en React JS

¿Que son los Props de React?

Pasando props básicos entre componentes

Pasando variables y objetos entre componentes por los props

Pasando funciones entre componente por los props

El uso de la Asignación por Destructuring

Props por defecto

Template Strings

Hook de estado - useState

Hook de efecto - useEffect

PROYECTO: Cotizador de prestamos16 clases

Resultado final de la aplicación

Código fuente del proyecto

Creando la app de React Native

Creando la estructura

Colores globales reutilizables

Modificando el StatusBar

Componente con Export Default y Export

Formulario de cotización

Añadiendo un Picker Select

Añadiendo el Diseño y valores al Picker Select

Guardando los datos del formulario en estados

Botón para ejecutar el calculo

Logica para calcular la cotizacion

Mostrando validaciones

Mostrando el resumen de la cotización

Recalculando automaticamente al cambiar algún dato

PROYECTO: App de cumpleaños + Firebase37 clases

Resultado final de la aplicación

Código fuente del proyecto

Creando la app de React Native

Creando una app de Firebase

Conectando React Native con Firebase

Comprobando si el usuario esta logeado

Auth Screen

Control de formularios

Formulario de registro de usuarios

Guardando datos del formulario de registro en un estado

Validando formulario de registro

Registrando usuario en Firebase

Formulario de login

Guardando datos del formulario de registro en un estado

Validando formulario de registro

Registrando usuario en Firebase

Formulario de login

Guardando datos del formulario en un solo estado

Validando formulario de login

Realizando login contra firebase

ActionBar

Añadiendo funcionalidad al ActionBar

Formulario para crear cumpleaños

DatePicker - Selección de fechas

Guardando y mostrando fecha seleccionada

Guardando datos de los Inputs en el estado

Validando formulario de alta de cumpleaños

1/2 - Guardando el cumpleaños en firestore

2/2 - Guardando el cumpleaños en firestore

Separando los datos en firestore por usuarios

Obteniendo lista de cumpleaños

Separando cumpleaños próximos de cumpleaños pasados

Mostrando el listado de cumpleaños

Actualizando lista al crear un nuevo cumpleaños

Diferenciando cumpleaños actuales, próximos y pasados.

Mostrando los días que faltan para los cumpleaños próximos

Eliminando cumpleaños

React Navigation 57 clases

Instalando y configurando React Navigation 5

Creando Screen para la navegación

Navegando entre screens

Creando un TabNavigation

Combinando TabNavigation con StackNavigation

Viajando a una Screen oculta de otro Stack

DrawerNavigation

PROYECTO: The Movie App45 clases

Resultado final de la aplicación

Repositorio de la aplicación

Creando una cuenta en TheMovieDB

Abriendo el debugger-ui

Instalando React Native Paper

Configurando React Native Vector Icons

Instalando React Navigation 5

Creando el sistema de navegación

Botón para abrir el Drawer

Drawer personalizado

Pintando el contenido del Drawer

Configurando DarkTheme y LightTheme

Context con las preferencias de la app

Hook personalizado para obtener el PreferencesContext

Switch para cambiar de tema

Añadiendo el botón del buscador al header

Obteniendo las ultimas películas publicadas

Creando el carousel con React Native Snap Carousel

Solucionando el Warning de React Native Snap Carousel

Pintando las películas en el carousel

Obteniendo lo géneros de una película

Navegando a la screen de la película seleccionada

Obteniendo todos los géneros de películas

Pintando lo géneros disponibles de películas

Obteniendo las películas del genero seleccionado

Mostrando todas las películas obtenidas por genero

Diseño del carousel de películas

Obteniendo los datos de una película por su ID

Creando un modal para videos

Reproductor de Videos de YouTube

Solucionando video en Android

Añadiendo el titulo y el genero de la película

Añadiendo la puntuación de la película

Añadiendo overview y fecha de publicación

Obteniendo las películas populares

Renderizando todas las películas

Añadiendo la información y la puntuación de cada película

Botón para cargar mas películas

Evento de click en las películas

Obteniendo nuevas películas y renderizandolas

Pintando cada uno de las películas

Botón para cargar mas películas

Función para buscar películas

Creando el buscador

Renderizando resultados de la busqueda

PROYECTO: Chat Realtime20 clases

Resultado final de la aplicación

Repositorio de la aplicación

Creando un proyecto en Firebase y configurando Realtime Database

Conectando React Native con Firebase

Implementado NativeBase

Sistema de login y chat

Formulario de login

Guardando nombre de usuario selecionado

Creando el input para enviar mensajes

Obteniendo los datos del mensaje

Enviando mensaje a la base de datos

Android - Warning Setting a timer

Añadiendo el Header del chat

Obteniendo todos los mensajes del chat

Renderizando todos los mensajes del chat

Estructura del mensaje

Diferenciando mensajes

Mostrando la inicial del nombre de los mensajes de otros usuarios

Circulo con color dinamico

Bajando el chat para ver el ultimo mensaje al recibir o enviar uno nuevo

PROYECTO: News + Strapi11 clases

Resultado final de la aplicación

Repositorio de la aplicación

Creando el proyecto de Strapi

Creando el modelo New y endpoints

Estructura de la aplicación móvil

Obteniendo todas las ultimas 100 noticias

Solucionando Warning Network request failed

Renderizando todas las noticias

Dandole forma a la noticia

Abriendo la noticia en el navegador del teléfono

Abriendo la noticia en un navegador interno de nuestra aplicación

Despliegue Android y Google Play Console6 clases

Selecionando una app para desplegar

Cambiar el nombre de la app

Cambiar el icono de la aplicación

Cambiar el package name de la app

Creando el .apk y .aab

Publicando la APP en Google Play

React Native: Crea aplicaciones móviles reales iOS y Android

Contenido del curso

Comentarios de los estudiantes

Valoraciones

Este curso incluye:

Instructor del curso