React Native: Aplicaciones IOS y Android

React Native: Aplicaciones nativas Legacy

Este es un curso Legacy, ya no se le da mantenimiento porque existe otro que lo sustituye. Puedes encontrar la nueva versión aquí

Adquirir Ahora Vista previa gratis

Contenido del curso

1. Introducción
  PRUEBA GRATIS
2. ¿Cómo funcionará el curso?
  PRUEBA GRATIS
3. ¿Cómo realizar preguntas?
  PRUEBA GRATIS
4. Instalaciones necesarias y recomendadas
  PRUEBA GRATIS
5. ¡Únete a Nuestra Comunidad de DevTalles en Discord!
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - MiPrimeraApp
5. Deshabilitar Prettier
6. Hola Mundo
  PRUEBA GRATIS
7. Crear pantallas independientes
8. Crear un contador
9. Tip: ¿Cómo ver los ejemplos de la documentación?
10. TouchableOpacity
11. StyleSheet
12. Botón personalizado flotante
13. Componente personalizado: FAB - Floating Action Button
14. Enviar funciones y propiedades opcionales
15. Estilo condicional
16. Código específico para plataforma
17. Resumen de lo aprendido hasta el momento
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Box Object Model - Fundamentos del diseño en React Native
4. Continuación de proyecto - Diseños y Flexbox
5. Padding, Margin, Border, Width y Height
6. Height, Width porcentual y dimensiones de la pantalla
7. Position - Fundamentos del diseño en React Native
8. Posición relativa
9. Posición absoluta
10. Flexbox - Fundamentos del diseño en React Native
11. Flex
12. Flex Direction
13. Justify Content
14. Align Items
15. Align Self
16. Flex Wrap
17. Preparar nuevo componente para la tarea
18. Tarea sobre diseños
19. Resolución de la tarea de diseños
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - Calculadora
5. Diseño inicial y pantalla de Calculadora
6. Textos y mi primer botón
7. Botón de calculadora y sus filas
8. Terminar todos los botones y el estilo de la calculadora
9. Construir el número base
10. Consideraciones para armar el número
11. Tarea - Botón de borrar última entrada
12. Botones de operaciones aritméticas
13. Realizar el cálculo
14. Custom Hook: useCalculadora
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Inicio de proyecto - NavegacionApp
5. Explicación sobre el sistema de navegación
6. React Navigation - Pre-requisitos
7. React Navigation - Stack
8. Navegar a otras pantallas
9. Estilizando el Stack Navigator
10. Enviar argumentos entre pantallas
11. Diferentes formas de colocar el tipo de dato de los argumentos
12. React Navigation - Drawer
13. Nota de actualización
14. Configurar Drawer básico
15. Toggle Drawer - Mostar / Ocultar
16. Drawer personalizado
17. Navegar desde el MenuLateral personalizado
18. useSafeAreaInserts
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Continuación de proyecto
5. Explicación sobre el Bottom Tab Navigator
6. Crear el BottomTabNavigator
7. Personalizando el BottomTabNavigator
8. Preparar el espacio para el ícono
9. Material Bottom Tab Navigator
10. Material Top Tab Navigator
11. Personalizando el Material Top Tab Navigator
12. Iconos en nuestra aplicación - Instalaciones
13. Instalación de íconos en IOS
14. Colocando íconos en todo lugar
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción sobre el Context y estado global de la aplicación
4. Continuación de proyecto - NavegacionApp
5. Crear nuestro primer Context en TypeScript
6. Consumir el context - AuthState
7. Reducer - useReducer
8. Disparar acciones
9. Disparar el SignIn desde otra pantalla
10. TouchableIcon - Custom Component
11. Cambiar el ícono favorito - AuthState
12. Borrar información del AuthState
13. Cambiar el username
14. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo al final de la sección
4. Inicio de proyecto - PeliculasApp
5. Navegación entre pantallas
6. Obtener películas en cartelera
7. Tipado de TheMovieDB
8. useMovies
9. Mostar el poster de la película
10. Carousel de tarjetas
11. FlatList de Películas
12. Componente HorizontalSlider
13. Películas populares, mejor calificadas y próximas a salir
14. Múltiples peticiones de forma simultánea
15. Navegar a la pantalla de detalles
16. Diseño inicial de la pantalla de detalles
17. Sombra e íconos de nuestra aplicación
18. useMovieDetails - CustomHook
19. Cargar información de los actores
20. Detalles de la película
21. Detalles de la película - Parte 2
22. Componente para mostrar actores
23. Lista de actores
24. Botón para regresar
25. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - PeliculasApp
4. Ejercicio para comprender el FadeIn
5. FadeOut
6. Fondo con gradiente
7. Fix: Interface de MovieDB
8. Obtener los colores de las imágenes
9. Helper: Obtener colores
10. Crear un contexto para comunicar el cambio de color
11. Usar los colores del context
12. Lógica para cambiar y animar el gradiente
13. Explicación del cambio de gradiente
14. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de proyecto - RNComponents
5. Crear Stack e instalar iconos
6. Componente - FlatList
7. FlatList Separator y Header
8. FlatListItem y navegación
9. Nota de actualización
10. Animated API
11. FadeIn y FadeOut
12. Easing - Bounce
13. useAnimation
14. Animated ValueXY
15. Componente - Switch
16. Header re-utilizable
17. CustomSwitch
18. Uso de multiples switches
19. Componente - Alert
20. Componente - Alert Prompt
21. Prompt IOS y Android
22. Componente - TextInput
23. Multiples TextInputs en pantalla
24. Componente - keyboardavoidingview
25. useForm - Tarea
26. Pull to refresh
27. Personalizando el Refresh Control
28. Componente - SectionList
29. Header y Footer de un SectionList
30. Componente - Modal
31. Personalizar el modal
32. InfiniteScroll
33. InfiniteScroll con imágenes
34. Animated Image
35. Enviar estilo desde el padre
36. Cierre de sección
37. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Continuación de proyecto - ComponentsApp
5. Snap Carousel
6. Paginación de Slides - ( Puntos indicativos )
7. Botón en el último Slide
8. Solución de la tarea con los slides
9. Theme Light y Dark - Generalidades
10. Pantalla para cambiar el tema de la aplicación
11. ThemeContext
12. ThemeReducer
13. Consumir el ThemeContext
14. Cambiar entre Light y Dark
15. Tarea - Usar el tema en toda la aplicación
16. Resolución de la tarea - Segunda Parte
17. Cambio de tema basado en el Sistema Operativo
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - Pokedex
5. Stack Navigator e íconos
6. Diseño básico del HomeScreen
7. Obtener lista de Pokemons en un custom hook
8. Colocar el tipo de dato que retorna la petición HTTP
9. Mapear resultado a un arreglo de SimplePokemon
10. Mostrar pokemons - InfiniteScroll
11. FadeInImage y useAnimation
12. PokemonCard - Componente
13. Terminando el PokemonCard
14. Colocar el color de fondo de la tarjeta basado en el pokemon
15. Problema con la actualización de estado
16. Navegar a la pantalla de detalle
17. Pantalla del Pokemon
18. Información completa del Pokemon
19. Información adicional del Pokemon
20. Peso y Sprites del Pokemon
21. Stats y pie de la pantalla
22. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Continuación de proyecto - Pokedex
5. Implementar Tabs en nuestra aplicación
6. SearchComponent - Diseño
7. Pre-cargar la información para buscar por nombre
8. Optimizaciones de estilo
9. useDebounceValue - CustomHook
10. Filtrando Pokemons basados en el término de búsqueda
11. Buscar por ID
12. Detalles estéticos de la pantalla de búsqueda
13. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - RutasApp
5. Rutas y StackNavigator
6. Android: Configuración inicial de permisos de GPS
7. IOS: Configuración inicial de permisos de GPS
8. Solicitar y revisar permisos - Check y Request Permission
9. Permission Provider - ContextAPI
10. Uso del PermissionContext
11. Revisar el permiso de GPS al regresar a la aplicación
12. Detectar qué pantalla mostrar al inicio de forma automática
13. Abrir ajustes de localización si el permiso está bloqueado por el usuario
14. Botón estilizado
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
  PRUEBA GRATIS
4. Continuación de proyecto - MapasApp
5. Configuración de GoogleMaps
6. Android: Configuración de GoogleMaps
7. IOS: Configuración de GoogleMaps
8. Fix: Loading infinito en ocasiones
9. React Native Maps - RequireCycle Warning
10. Marcadores y componente Mapa re-utilizable
11. MapView - Mostrar la ubicación del usuario
12. Obtener las coordenadas del usuario
13. CustomHook - useLocation
14. FabIcon - Componente personalizado
15. Mover la cámara a las coordenadas del usuario
16. Darle seguimiento al usuario (Mover cámara constantemente)
17. Dejar de seguir y limpiar el watch
18. Trazar la ruta del usuario
19. Mostrar y ocultar las polylines
20. Evitar llamadas al cambio de State cuando el componente esta desmontado
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Descargas y configuraciones básicas
4. Levantando el backend
5. Probando el backend y grabaciones
6. Desplegando nuestro backend en Heroku
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de proyecto - ProductosApp
5. Diseño del login
6. Diseño del login - Parte 2
7. Formulario y navegación
8. Diseño de la pantalla de registro
9. AuthContext
10. AuthReducer
11. Conectar AuthContext con el authReducer
12. Levantar el backend y probarlo
13. HTTP - Login y obtener el token
14. Dispatch de la acción de Signup
15. Manejar errores de login
16. Async Storage - Guardar Token
17. Validar el token
18. Loading Screen y revalidar el token
19. Logout
20. Registro de usuarios
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Objetivo al final de la sección
4. Continuación de proyecto
5. ProductosContext
6. ProductsNavigator
7. ProductsScreen - Diseño y data
8. Navegar a la pantalla de Producto
9. Diseño de la pantalla de producto
10. React Native - Picker
11. Llenar el selector con categorías
12. Formulario del producto
13. Mostrar imagen y la categoría del producto
14. Prepararnos para la grabación o actualización
15. Crear producto y actualizar producto - Llamar el backend
16. Pull to refresh
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Objetivo al final de la sección
4. Continuación de proyecto - Cámara y galería de imágenes
5. Abrir la cámara y tomar una fotografía
6. Probar cámara en dispositivo físico
7. Subir imagen a nuestro backend
8. Subir fotografía desde la galería
9. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Preparación de proyecto
4. Android: ícono y nombre de la aplicación
5. IOS: ícono y nombre de la aplicación
6. Android: SplashScreen
7. Android: Personalizar el SplashScreen
8. IOS: SplashScreen
9. Generar Android App Bundle - AAB - APK
10. Cambiar identificador único de Android
11. Generar un nuevo AAB - Actualización de llave o actualización de app
12. Subir AAB a la PlayStore
13. Configuraciones adicionales en la Google PlayStore
14. IOS: Identificador único y portal de developer de Apple
15. Generar identificador y preparar el espacio en la AppStore Connect
16. Testflight - Probar la aplicación
1. Presentaciones utilizadas
2. Información adicional sobre React Native
3. Más información sobre nuestros otros cursos
4. Fin y cierre del curso
5. Bloopers

Acerca de este curso

385 lecciones
43.5 horas de contenido en video
USD 50.00

Cursos que podrían intesarte

+DevTalles

Este segmento es exclusivo para sesiones en vivo con Fernando Herrera. Durante estas podrás realizar preguntas relacionadas al contenido de sus cursos y participar de forma interactiva con los panelistas. Se incluyen grabaciones de sesiones pasadas.

Pago único

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos pueden aplicar.

Comprar ahora

Suscripción
Devtalles PRO Mensual

^USD16

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante el mes de vigencia.

Suscripción
DevTalles PRO Trimestral

^USD48

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante 3 meses de vigencia.

Suscripción
DevTalles PRO Semestral

^USD96

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante los 6 meses de vigencia.

Suscripción
DevTalles PRO Anual

^USD176

El mejor precio disponible

Suscribirme ahora

Adquiere 1 año entero de suscripción al precio de 11 meses. Obtienes acceso ilimitado a toda la plataforma, comunidades, cursos, clases en vivo, acceso anticipado a una comunidad exclusiva y cursos en construcción.

¡Explora nuestra comunidad!

Conversa y debate con otros estudiantes sobre los cursos. Únete a nuestra comunidad en Discord. O accede a nuestra comunidad de cursos con Acceso Anticipado desde tu portal de estudiante con tu suscripción DevTalles PRO.

Comunidad Discord Portal de estudiante

React Native: Aplicaciones nativas Legacy

Contenido del curso

Sección 1: Introducción

Sección 2: Reforzamiento de las bases - Conocimiento requerido para continuar

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

Sección 4: Mi primera App en React Native - CounterApp

Sección 5: Flex, Position y Box Object Model

Sección 6: Aplicación - Calculadora de IOS

Sección 7: NavegaciónApp - Todos los tipos de navegación

Sección 8: Tabs, MaterialTabs y Material Top Scrollable Tabs

Sección 9: Context y estado global de la aplicación

Sección 10: Aplicación de Películas

Sección 11: Bonus: Gradiente animado - ContextAPI

Sección 12: Componentes de ReactNative

Sección 13: Temas y Slideshow de pantalla completa

Sección 14: Pokedex

Sección 15: Debouncer y Búsquedas

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

Sección 17: RutasApp - Aplicación con mapas - Google y Apple Maps

Sección 18: Autenticación y Productos - Backend

Sección 19: Autenticación - ProductosApp

Sección 20: Productos, galería y cámara

Sección 21: Cámara, galería y carga de imágenes al backend

Sección 22: Despliegues en Google Play Store y Apple App Store

Sección 23: Despedida del curso

Acerca de este curso

Cursos que podrían intesarte

+DevTalles

React PRO: Lleva tus bases al siguiente nivel

TypeScript: Tu completa guía y manual de mano.

Next.js: El framework de React para producción

Pago único

$50.00

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual

¡Explora nuestra comunidad!

Sección 1: Introducción

Sección 2: Reforzamiento de las bases - Conocimiento requerido para continuar

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

Sección 4: Mi primera App en React Native - CounterApp

Sección 5: Flex, Position y Box Object Model

Sección 6: Aplicación - Calculadora de IOS

Sección 7: NavegaciónApp - Todos los tipos de navegación

Sección 8: Tabs, MaterialTabs y Material Top Scrollable Tabs

Sección 9: Context y estado global de la aplicación

Sección 10: Aplicación de Películas

Sección 11: Bonus: Gradiente animado - ContextAPI

Sección 12: Componentes de ReactNative

Sección 13: Temas y Slideshow de pantalla completa

Sección 14: Pokedex

Sección 15: Debouncer y Búsquedas

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

Sección 17: RutasApp - Aplicación con mapas - Google y Apple Maps

Sección 18: Autenticación y Productos - Backend

Sección 19: Autenticación - ProductosApp

Sección 20: Productos, galería y cámara

Sección 21: Cámara, galería y carga de imágenes al backend

Sección 22: Despliegues en Google Play Store y Apple App Store

Sección 23: Despedida del curso

Acerca de este curso

+DevTalles

React PRO: Lleva tus bases al siguiente nivel

TypeScript: Tu completa guía y manual de mano.

Next.js: El framework de React para producción

$50.00

Suscripción Devtalles PRO Mensual

Suscripción DevTalles PRO Trimestral

Suscripción DevTalles PRO Semestral

Suscripción DevTalles PRO Anual

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual