Menu

Curso De React Native

Lecciones del Curso Gratuito

Fundamentos: Ciclo de vida de un Componente

Bienvenidos en este vídeo vamos a explicar acerca del ciclo de vida de un componente en riad night ya que es fundamental de que tú sepas cómo funciona el ciclo de vida de un componente para que tú puedas desarrollar aplicaciones de calidad conocer el ciclo de vida de riad es sin duda uno de los requisitos que debemos saber porque el ciclo de vida es quien se encarga de gestionar como los componentes serán montados actualizados y eliminados no conocer el siglo de vida correctamente nos puede causar problemas cuando estemos creando una aplicación cuando hablo de problemas me refiero al código condujo todo esto se debe a que no manejaremos los estados del componente y no sabremos cuándo está creando actualizando o eliminando un ejemplo sería cuando creamos un componente que vaya a tener un listed.

Configurar entorno de trabajo React Native 

Bienvenidos en este vídeo vamos a aprender a configurar el entorno de trabajo en riad night y para realizar la configuración vamos a basarnos en la documentación oficial de rayak para seguir una serie de pasos hasta terminar con la creación de nuestra primera aplicación móvil enría con haití una vez dentro de nuestro navegador vamos a escribir reactive y seguido de esto vamos a dirigirnos aquí donde dice que de started una vez dentro de la documentación vamos a traducir la página para poder leer algunos conceptos que nos van a ir dando esta documentación pero es muy importante que ustedes también aprendan el inglés ya que toda la documentación que nosotros como desarrolladores estamos siempre leyendo está en inglés y es una recomendación que les voy a hacer como el tutorial es en español entonces vamos a traducir esta página una vez hecho esto nosotros vamos a ver qué nos dice esta página te ayudará a instalar y construir su primera aplicación en riad nay tep.

Configurar entorno de trabajo React Native

Como pueden ver yo ya abría android studio ahora lo siguiente que vamos a realizar es darle aquí en configuración y vamos a dirigirnos a lo que sería el sdk manager una vez dentro del sdk manager lo siguiente que vamos a verificar según la documentación vamos a dirigirnos aquí y vamos a dirigirnos en la parte de abajo aquí también te indica cómo debes ingresar a lo que sería el administrador del sdk aquí en línea más abajo nos dice que debemos tener instalado lo que sería el android el sdk platform en lo que sería la versión 28 y también nos sugiere que tengamos instalado lo que sería la imagen cuando nosotros quisiéramos crear un emulador bien esta parte ya es como decir libre ya que cuando tú crees tu emulador tú vas a darle lo que sería la imagen es por eso que acá te sugiere que tú tengas instalado si es que tú no quieres instalar esta imagen no hay problema ya que tú ya cuando creé este emulador vas a tener la opción de elegir qué imagen le vas a dar a tu emulador bien dicho esto para explicarte más a detalle vamos a ingresar aquí lo siguiente que vamos a realizar aquí es vamos a verificar que tengamos instalado lo que sería la versión 28.

Splash Screen 

Bienvenidos en este vídeo vamos a aprender a crear una aplicación que se va a llamar brain apps y esta aplicación va a contar con un splash screen donde va a contener una pantalla que se va a llamar login pero también lo extra que vamos a tener en este vídeo es que vamos a aprender a utilizar los fondos dicho esto vamos a comenzar vamos a crear nuestro proyecto como siempre lo hemos hecho pero aquí le vamos a poner brain apps y vamos a darle enter para que toda la estructura de nuestro proyecto desde cero se comience a crear ya sabemos que aquí va a crear todas las dependencias necesarias básicas que necesita riac.

Splash Screen – parte 2

De momento vamos a hacer lo que sería la consola ya que no vamos a utilizar la consola y vamos a hacerla este archivo vamos a hacerla lo que sería general y vamos a dirigirnos aquí a navigation vamos a crear un archivo que se va a llamar app navigation punto j s como ya dije antes dentro de este archivo vamos a declarar todas las pantallas que vamos a utilizar si hacemos una comparación esto sería igual al manifest que se encuentra en android studio dicho esto vamos a realizar dos imports uno de ellos va a ser a create-a-pepper container que va a ser de rayak navigation bien una vez hecho este importe vamos a copiar esta línea de aquí y también aquí vamos a hacer otro import a lo que sería steak navigation.

Login Screen 

Espera te acuerdas de este splash screen pues ahora aprenderemos a diseñar la pantalla de login screen quédate y sigue aprendiendo [Música] bienvenidos en este nuevo vídeo vamos a aprender a crear un login screen guardando el inicio de sesión del usuario y también vamos a utilizar lo que sería los hooks vamos a estar utilizando el juz state josh effect y también algunos context ya esto lo vamos a ver más adelante mientras nosotros empecemos a trabajar en lo que sería el long y screen vamos a ir viendo estos conceptos seguido de esto vamos a instalar cuatro dependencias que van a ser fundamentales para que nosotros creemos este login screen.

Recuperar Contraseña Screen 

Bienvenidos en este nuevo vídeo vamos a aprender a crear la pantalla recuperar contraseña para esto vamos a dirigirnos al código una vez dentro del código vamos a dirigirnos a lo que sería la carpeta styler y vamos a abrir el archivo styles dentro de este archivo he realizado algunas modificaciones a los estilos y para esto voy a proceder a copiar los estilos que he configurado una vez importado los estilos como podemos ver yo he ido cambiando algunas constantes ya que han sido repetitivas y para esto los estilos repetitivos los almacenados dentro de la constante my style es y seguido de esto seguimos teniendo la misma estructura que ese splash style es y login style es hasta aquí todo está claro entonces una vez hecho este cambio vamos a tener que cambiar aquí en la parte de scripts y vamos a abrir el archivo login screen.

Registrarse Screen 

Bienvenidos en esta parte vamos a crear lo que sería la pantalla registro screen para esto vamos a dirigirnos a la carpeta screens y vamos a crear esta nueva pantalla una vez creado esta pantalla vamos a abrir lo que sería la pantalla de recuperar password y aquí vamos a copiar todo el diseño que ya hemos realizado una vez hecho esto vamos a cambiar los imports o básicamente vamos a agregar algunos imports como pueden ver yo agregado en la parte de estilos ha agregado un nuevo estilo que se llama registro style es y en la parte de abajo de la dependencia real night element también he agregado tres componentes nuevos en este caso el check box el social icon y el button seguido de esto vamos a dirigirnos aquí en donde está el registro password y le vamos a cambiar el nombre por el nombre de la pantalla que vamos a crear registro screen de esto vamos a crear aquí una constante.

Creando useContext 

Recuerdas la aplicación bryant pues llegamos a la meta de 200 suscriptores ahora seguiremos mejorando la aplicación quédate y sigue aprendiendo [Música] anteriormente habíamos creado el diseño para la pantalla de login también para la pantalla de registro y también para lo que sería la pantalla olvidé mi contraseña ahora en esta nueva parte vamos a crear lo que sería ellos este y algunos componentes nuevos que vamos a utilizar en la aplicación para comenzar con la aplicación vamos a dirigirnos a lo que sería la carpeta component y aquí vamos a crear un nuevo componente que se va a llamar my button una vez creado este componente para que el vídeo no sea tan largo ya que aquí es un simple diseño que sólo tenemos un botón vamos a copiar el diseño que tengo preparado y no te preocupes por los estilos por los colores que esto ya hemos configurado anteriormente seguido de esto tenemos lo que sería el componente que se llama my button.

Validando Splash Screen 

Bienvenidos vamos a utilizar ahora lo que sería el usuario contexto que hemos creado anteriormente para esto vamos a cerrar las pantallas y vamos a dirigirnos a lo que sería el archivo app punto js dentro de este archivo vamos a hacer la importación de ese contexto que acabamos de crear luego de esto aquí en esta parte vamos a hacer una pequeña modificación acuérdense que el contexto tiene un proveedor entonces este proveedor tiene que envolver a lo que sería la aplicación un país entonces aquí vamos a hacer uso de lo que sería el usuario provider íbamos a meter o mejor dicho vamos a colocar este navigation dentro del proveedor para que el proveedor pueda suministrar nos todo el estado global de la aplicación luego de esto vamos a ingresar a lo que sería la pantalla que se llama splash screen luego de abrir este archivo vamos a dirigirnos aquí en la parte superior y vamos a hacer uso de lo que sería el just context también vamos a importar el giuseppe.

Validando Login Screen 

Bienvenidos ahora continuaremos con la variación de la pantalla lo he escrito anteriormente habíamos validado la pantalla splash screen entonces ahora en esta parte vamos a dirigirnos a lo que sería el componente de login screen y en esta parte vamos a hacer un importe de componente my button que hemos creado anteriormente entonces aquí en esta parte voy a quitar este importe y yo voy a poner my button también aquí en esta parte le voy a poner muy button y ahora voy a dirigirme a lo que sería la pantalla splash y screen.