Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreReact native en español curso completo (APP ACTUALIZADA)
Rating: 3.9 out of 53.9(155 ratings)
548 students
React native en español curso completo (APP ACTUALIZADA)
APP ACTUALIZADA. React Native + Native Base + React Navigation 4 + API REST + Node js + Express + MongoDB + PHP + MYSQL
Created byElio Marcano
Last updated 3/2021
Spanish
Spanish [Auto],
What you'll learn
- React Native
- Expo
- Apps móviles para android e ios
- Estructura y orden
- Javascript Básico
- Native base
- React Navigation 4
- Notificaciones PUSH
- Acceso a hardware (GPS y Camara)
- Agenda
- RN + PHP + MYSQL
- Manejo de una API
- Validación de formularios con JS
- Generar .apk y .ipa
- RN + Node js + Express js + MongoDB
Explore related topics
Course content
11 sections • 76 lectures • 7h 45m total length
- Introducción 20204:01
- Opcional - Javascript nuevo curso gratis 20200:08
- ¿Qué es React Native?7:53
- Instalando React Native Expo9:44
Mi gente una corrección y algo que me falto en el video, no son 3 veces si no 7 veces que debes hacer
click para activar el MODO DE DESARROLLADOR y luego entras en modo de desarrollador y activas
la DEPURACIÓN USB (Y)!. Acá te dejo las guías, recuerda que la guía de CIAPFA esta muy completa:
Guía CIAPFA: https://drive.google.com/drive/folders/18ma_QfzgxESlPznHvaxxkstNmOuLn1pW
Expo guía oficial: https://expo.io/learn
Generar APK de mi proyecto con expo: https://docs.expo.io/versions/latest/distribution/building-standalone-apps/
- ¡Ojo! Han habido actualizaciones1:22
- Componentes, Estilos y Flexbox Parte 19:35
En este video vemos los componentes View, Text y StyleSheet
Lista de Estilos que puedes usar en React Native:
https://github.com/vhpoet/react-native-styling-cheat-sheet
JUego Flexbox: http://flexboxfroggy.com/
Flexbox para RN del articulo del muchacho de filipinas:
https://code.tutsplus.com/es/tutorials/get-started-with-layouts-in-react-native--cms-27418
Doc oficial de RN todos los componentes:
https://facebook.github.io/react-native/docs/components-and-apis.html
DOC oficial de expo todos los componentes:
https://docs.expo.io/versions/v32.0.0/react-native/tutorial/
- Componentes, Estilos y Flexbox Parte 214:52
Aquí vemos los componentes:
Image: https://facebook.github.io/react-native/docs/image
Button: https://facebook.github.io/react-native/docs/button.html
Alert: https://facebook.github.io/react-native/docs/alert
- Componentes, Estilos y Flexbox Parte 312:10
Actualizado: Ahora para utilizar expo debes instalar ejecutando expo install expo-av e importamos como import { Video } from 'expo-av';
Componentes en este video:
ImageBackground: https://facebook.github.io/react-native/docs/imagebackground
Touchables: https://facebook.github.io/react-native/docs/touchablehighlight
TextInput: https://facebook.github.io/react-native/docs/textinput.html
ScrollView: https://facebook.github.io/react-native/docs/scrollview.html
Expo Video: https://docs.expo.io/versions/latest/sdk/video/
GitHub Video Comunnity: https://github.com/react-native-community/react-native-video
Link del ejercicio: https://drive.google.com/drive/folders/18ma_QfzgxESlPznHvaxxkstNmOuLn1pW
- Herramienta de diseño - BuilderX7:53
- Platform - Estilos en Android e IOS3:57
- States7:48
COMO DESAFIO A LA APP QUE REALIZAMOS EN EL VIDEO ANTERIOR VAS AGREGAR UN STATE QUE TENGA UN NOMBRE DE USUARIO POR DEFECTO Y CAMBIE AL ESCRIBIR EN EL INPUT.
- Props10:14
- Estructura y Orden8:58
- FlatList10:12
https://facebook.github.io/react-native/docs/flatlist.html
- Atento a las Nuevas actualizaciones1:35
- Native Base11:20
Native base: https://nativebase.io/
Repositorio en github: https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/CRNA
- Error ENOENT2:48
- Login con native base12:09
- React Navigation6:00
Actualizado: Tal como sugiere la doc oficial si usas expo también deberás instalar gesture handler y reanimated luego de instalar react-navigation.
Ejecuta: expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
StackNavigator debes instalarlo por individual: npm install react-navigation-stack o yarn add react-navigation-stack para aquellos que usan yarn. Y lo importamos de la siguiente manera: import { createStackNavigator } from 'react-navigation-stack';
Recuerda siempre leer la doc oficial cuando te suceda algún error, es muy sencillo ^^!:
https://reactnavigation.org/docs/en/getting-started.html
https://reactnavigation.org/docs/en/hello-react-navigation.html
- Navegando entre pantallas7:09
https://reactnavigation.org/docs/en/navigating.html
https://reactnavigation.org/docs/en/stack-navigator.html
- Get Param3:02
https://reactnavigation.org/docs/en/params.html
- KeyboardAvoidingView1:48
https://facebook.github.io/react-native/docs/keyboardavoidingview
- Mejorar la manera de escribir nuestros estilos6:19
Siempre, no importa que curso tomes o donde aprendas, por ti mismo busca escribir código más limpio, claro y bien estructurado que te permita a ti y tus compañeros entender y adaptarse rápidamente a tu programa o proyecto.
- Switch Navigator (Autenticación de pantalla)9:19
https://reactnavigation.org/docs/en/switch-navigator.html
- Stack Navigator Opciones2:35
https://reactnavigation.org/docs/en/stack-navigator.html
- Status Bar2:42
https://facebook.github.io/react-native/docs/statusbar
- Header personalizado y static navigation options9:50
Actualizado: Para usar constants debemos ejecutar expo install expo-constants e importarlo como import Constants from 'expo-constants';
https://reactnavigation.org/docs/en/headers.html
https://reactnavigation.org/docs/en/navigation-options-resolution.html
- LinearGradient (Gradiente de colores)1:55
Actualizado: Debemos ejecutar expo install expo-linear-gradient para instalarlo e importamos como: import { LinearGradient } from 'expo-linear-gradient';
https://docs.expo.io/versions/latest/sdk/linear-gradient/
- Navigation goBack()1:44
- BottomTabNavigator (Menú horizontal)3:55
Actualizado:
Debes instalar yarn add react-navigation-tabs e importar como import { createBottomTabNavigator } from 'react-navigation-tabs';
Leer doc oficial:
https://reactnavigation.org/docs/en/bottom-tab-navigator.html
- Personalizando nuestro BottomTabNavigator6:43
Fijate en estos tab navigator:
https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html
https://reactnavigation.org/docs/en/material-top-tab-navigator.html
- DrawerNavigator (Menú vertical)7:01
https://reactnavigation.org/docs/en/drawer-navigator.html
- AsyncStorage10:27
¡IMPORTANTE! En el vídeo me he confundido al explicar componentDidMount y te expliqué componentWillMount.. componentDidMount es ejecutado después de que el componente ha sido montado en el DOM. Medium.com tiene un excelente artículo sobre cada uno de los ciclo de vida de los componentes el cual puedes ver accediendo a este link: https://medium.com/@pedroparra/react-js-y-el-ciclo-de-vida-de-los-componentes-5d083e5089c6.
AsyncStorage: https://docs.expo.io/versions/latest/react-native/asyncstorage/
- Creando un loader10:01
Creemos un loader bastante interesante
- IMPORTANTE. Leer antes de continuar3:45
Un artículo corto y preciso sobre conceptos que debes saber para entender las clases que están por venir
- Arrays y Objetos
- Conectando a una API7:57
- Mostrando nuestra API en una FlatList6:46
https://yts.lt/api#list_movies
- Lista de películas3:46
- Ejercicio. Creando una Agenda6:22
- Código Actualizado0:18
- Conectando node js y express a react native7:07
- Estructura y Orden3:19
- Rutas5:14
- Body2:40
- Mejores respuestas5:17
- Login en react native3:34
- MongoDB Atlas - Creando nuestro cluster0:55
- Conectando a mongoDB desde node js5:42
- Login con MongoDB13:39
- Registro de usuario8:36
- Registro - Explicación y Requisitos12:18
Fetch: https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch
Promesas: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Usar_promesas
Asincrono: https://developer.mozilla.org/es/docs/Glossary/As%C3%ADncrono
- Registro de usuario9:56
Json_decode: https://www.php.net/manual/es/function.json-decode.php
File_get_contens:
https://www.php.net/manual/es/function.file-get-contents.php
https://stackoverflow.com/questions/2731297/file-get-contentsphp-input-or-http-raw-post-data-which-one-is-better-to
- Login de usuario7:03
- Recibiendo el valor de fetch post4:13
- Array a JSON con PHP3:43
- Cargando datos en nuestra Agenda13:02
Espero te haya gustado este ejercicio que cree para ti. Sin duda fue algo difícil explicarlos con palabras sencillas pero esta muy fácil, se que lo entenderás rápidamente ;)!
- Long Polling7:40
Con long polling podremos llamar a nuestros datos en tiempo real, es una manera básica de realizar esto pero a la vez bastante útil e interesante.
Apps en tiempo real: https://www.freecodecamp.org/news/5-ways-to-build-real-time-apps-with-javascript-5f4d8fe259f7/
SetInterval: https://developer.mozilla.org/es/docs/Web/API/WindowTimers/setInterval
SetTimeout: https://developer.mozilla.org/es/docs/Web/API/WindowTimers/setTimeout
- Variables y State2:11
- Templates y más librerías UI5:05
https://www.creative-tim.com/product/material-kit-react-native
https://codecanyon.net/category/mobile?page=2&term=expo
https://react-native.shop/
https://reactnativestarter.com/
https://github.com/adib85/expo-react-native-starter
https://www.codeinwp.com/blog/free-react-native-templates/
- TextInputs8:33
- Validar TextInput con JS5:39
- Ver app.json en consola con Constants manifest3:12
https://docs.expo.io/versions/latest/sdk/constants/
- Constante global5:39
- Obtener token11:21
https://docs.expo.io/versions/latest/guides/push-notifications/
- Guardar token2:24
- API/HTTP0:21
- Enviar notificaciones5:30
https://docs.expo.io/versions/latest/guides/push-notifications/
- Notificaciones PUSH en IOS - Primer plano7:52
- Obtener localización de usuario8:46
Geofencing: https://www.tu-app.net/blog/geolocalizacion/
Localización: https://docs.expo.io/versions/latest/sdk/location/
Permisos: https://docs.expo.io/versions/latest/sdk/permissions/#permissionslocation
- Tareas en segundo plano7:53
Task manager: https://docs.expo.io/versions/latest/sdk/task-manager/
Permisos: https://docs.expo.io/versions/latest/sdk/permissions/#permissionslocation
- MapView3:10
https://docs.expo.io/versions/latest/sdk/map-view/
https://github.com/react-native-community/react-native-maps
- Acceso a cámara y galería de fotos10:13
https://docs.expo.io/versions/latest/sdk/imagepicker/
Requirements
- Conocimientos básicos de Javascript
Description
APP ACTUALIZADA. React Native - Curso - Español 2019. Aprenderás a crear tu primera aplicación móvil, con los conocimientos, librerías y componentes necesarios para desarrollar proyectos reales de producción para empresas. El mundo de las aplicaciones móviles es cada vez más grande, desarrolla para android e ios, mejora tu calidad de vida, crece, innova y aumenta tus posibilidades de conseguir empleo. ¿Quieres saber por qué aprender React Native? Visita en youtube el canal ProgramadorIT y mira nuestros vídeos.
Who this course is for:
- Todos los que quieran aprender a desarrollar apps móviles con JS y React Native