Hoy vamos a aprender React Native y vamos a aprenderlo desde cero y para ello vamos a crear una aplicación.
Hoy vamos a aprender esto, que es React Native. Lo aprendes una vez y lo escribes para todos los sitios.
Y es que con React Native podéis crear aplicaciones nativas para Android y para iOS utilizando lo que ya sabéis de React, lo cual es espectacular.
Además lo escribís con una sintaxis que ya conocéis, en el caso que ya sepáis React,
y esto lo que nos va a dar es justamente un rendimiento que está cerca de ser nativo o es casi nativo,
excepto en algunos casos o cosas muy potentes que a lo mejor sí que no puedas hacerlas solo con JavaScript.
Pero lo que es la UI de la aplicación sí que la puedes hacer, vamos, o sea, que sea casi casi nativo.
¿Qué es lo interesante que tiene React Native de parte de todo esto que os estoy comentando?
Claro, pues es que vosotros lo que vais a escribir, vuestro código que vais a escribir, se va a ejecutar de forma nativa,
no solo para el dispositivo que prefiráis, sino que es que va a ser para Android y para iOS, la misma aplicación para las dos.
Pero es que tiene más, porque es que podéis incluso crear componentes que funcionen para un dispositivo en concreto.
O sea, imaginad que por X motivo decís, no, esto, este header tiene que ser diferente en iOS y tiene que ser diferente en Android, ¿no?
Porque muchas veces la UI tiene que ser un poco diferente y ajustarse.
Pues lo podéis conseguir súper fácil, a lo mejor hay un montón de componentes que son los mismos para los dos dispositivos,
pero justamente el header puedes hacer que sea diferente para Android y para iOS.
O sea, tiene unas posibilidades que son brutales, brutales.
Así que yo creo que es algo que si ya sabes React, tienes que aprender.
Si no sabes React, es una cosa que te puede llamar mucha atención para que aprendas React.
Si no sabes React, o sea, tienes que irte a mi canal de YouTube y te ves el curso de React que tenemos, que es totalmente gratis.
Y que, vamos, si no aprendes React con esto, voy a tu casa y te hago un masaje, ¿ok?
Son 11 clases de una hora y media cada una, más o menos, pero con eso aprendes React.
Igualmente, si no sabes React, yo creo que más o menos te puedes ir enterando,
pero te va a entrar el gusanillo de decir, ostras, yo quiero aprender React porque mira la de cosas que se pueden hacer, ¿vale?
Fíjate la de aplicaciones que están, no solo, claro, no solo tiene Facebook detrás, o sea, la aplicación de Facebook está hecha con React Native.
Instagram utiliza React Native, pero mira, fíjate, tenemos Skype de Microsoft, de nuevo.
¿Qué tenemos también? Uber Eats, tenemos Tesla, hay un montón.
Esta creo que es Einstein, ¿no? Es una, a ver, sí, Einstein de Salesforce.
Vale, Pinterest, o sea, hay un montón de aplicaciones que están hechas en React Native y ni te das cuenta.
O sea, que imagínate, imagínate.
Vale, pues ahora que hemos hecho esta pequeña intro, sí, OneDrive seguro que también, ¿eh?
Es que si le dais aquí a Many More, aquí vais a ver un montón.
De Facebook, os podéis imaginar que todo lo que sea de Facebook lo hacen.
Coinbase, estos de hace poco que han pasado de un desarrollo nativo a React Native.
Shopify, Tableau, Flipkart, hay un montón.
No creo que haya, se pueda haber dudas de que es algo que vale mucho la pena de aprender.
Así que, vamos a verlo.
Vamos a, si os parece, vamos a aprenderlo.
A ver, lo tenía por aquí.
Vamos a aprenderlo.
Si, ya te digo, mira, React Native, lo ha dejado por aquí.
¿Cómo vamos a aprender React Native?
Porque, bueno, si le damos al Get Started, aquí, pues nos explican un montón de cosas.
Por cierto, esto es súper interesante, que hay un Playground donde podéis tocar el archivo
y acá a la derecha tenéis como un simulador de cómo se vería.
O sea, de forma nativa, lo cual me parece increíble.
¿Ves?
Esto ya es React Native.
Bueno, vamos a hacerlo un poco por libre, pero voy a ir explicando paso a paso cómo lo vamos a hacer.
¿Vale?
O sea, que no os tenéis que preocupar.
Lo que vamos a hacer, y una cosa que es muy importante, es que vamos a utilizar una cosa que se llama Expo.
¿Vale?
Expo, ¿qué es Expo exactamente?
Porque es que esto de Expo se puede explicar de muchas formas.
Pero Expo es como una plataforma que utiliza React Native y que además le provee, pues, de diferentes librerías, bibliotecas, constantes, mejoras, entorno de desarrollo.
Es una plataforma entera, solo que utiliza React Native.
Justamente para hacer, haz una aplicación y ejecutala en cualquier sitio.
Es porque Expo, por detrás, está utilizando React Native.
De hecho, ¿veis?
Lo tenéis aquí.
Expo, digamos que es la plataforma por defecto para desarrollar en React Native.
No lo es, no es la oficial, pero como podéis ver incluso en la propia documentación de React Native, los ejemplos interactivos, ¿veis?
Expo.
¿Por qué?
Porque es que Expo tiene una plataforma tan brutal para esto y luego lo vamos a ver también con cómo podemos probar nuestra propia aplicación en nuestro dispositivo.
Súper fácil y lo vamos a ver o cómo podemos ejecutarlo en un simulador o incluso en la web.
O sea, Expo es la plataforma, yo creo, la más recomendada para hacerlo.
Lo podéis hacer sin Expo, pero el desarrollo es un poco más tedioso.
Así que vamos a utilizar Expo en este caso, que nos va a ayudar un montón y nos va a quitar un montón de trabajo por delante.
Así que lo primero que vas a necesitar, aparte de ya tener instalado Node y NPM, pero eso espero que ya lo tengas porque en todas las clases que hemos ido haciendo siempre lo hemos utilizado.
NPM install y de forma global instalamos Expo Clip.
Esto lo que nos va a hacer es instalar la línea de comandos, la utilidad de Expo en nuestro ordenador y lo vamos a poder ejecutar allá donde lo necesitemos.
En este caso, bueno, si ya lo tienes instalado, pues es interesante que lo vuelvas a hacer, al menos para que tengas una versión actualizada.
Una vez que tengamos este Clip, lo que vamos a poder hacer es inicializar nuestro proyecto con el nombre que queramos desde cero.
Y utilizaremos la Expo Clip.
Ya está terminando, voy a tomar un buchito, un montón de dependencias.
Es que imaginad, o sea, no soy React Native, soy un montón de cosas nativas.
Vale, ya ha terminado, 33 segundos.
Pues ahora utilizamos Expo Init y aquí le vamos a poner el nombre del proyecto.
Vamos a hacer una aplicación desde cero que va a ser para puntuar repositorios de GitHub.
Lo vamos a hacer desde cero, así que no os preocupéis.
Más adelante, no en esta clase, seguramente en la siguiente, ya haremos la parte del backend.
El backend ya estará hecho, pero interactuaremos con él, te diré cómo lo puedes descargar y todo esto.
Por ahora vamos a llamar RAID Repositori App.
Y esto, lo que nos debería preguntar es qué template queremos utilizar.
Uno totalmente vacío, uno vacío con TypeScript, uno con tabs que ya tiene bastantes páginas hechas,
o uno minimal.
Vamos a utilizar el minimal porque tiene lo esencial para que empecemos y yo creo que con este nos debería servir.
Bueno, vamos a utilizar el blank.
Vamos a utilizar el blank que está más vacío y yo creo que será mejor.
Vamos a utilizar el blank.
Pues esto sigue instalando dependencias de JavaScript, por si le quedaba alguna, por si no lo haya instalado.
Venga, vamos.
Vamos a ver.
¿Veis? Ahora ya me dice que tengo que entrar al nuevo proyecto, Repositori App, y aquí tengo diferentes cosas que voy a hacer.
Un npm start, npm run Android, npm run iOS, npm run web.
Pues vamos a hacer un start.
¿Por qué?
Porque esto lo que va a hacer es abrirnos todo el proyecto y nosotros vamos a poder elegir dónde nos lo abre y todo esto.
¿Vale?
Nos sale esta página.
Vale.
Esta página ya es bastante interesante porque es totalmente distinto a lo que estábamos un poco acostumbrados.
Aquí a la izquierda podemos ver que tenemos un proceso.
Esto es el metro bandler.
Esto sería el bandler de React Native que está ejecutándose y va empaquetando nuestra aplicación.
Luego veremos que tenemos otros procesos aquí cuando vayamos abriendo la aplicación en diferentes sitios.
Aquí es donde podemos ejecutar nuestra aplicación.
Podemos ejecutarla en un dispositivo de Android, en un emulador de Android.
Aunque yo tengo el M1 y no funciona muy bien, así que seguramente yo solo lo ejecutaré en iOS Simulator.
Pero si tienes Android Studio, te funcionará.
¿Vale?
Necesitas instalarte Android Studio, el SDK.
Yo los tengo, pero ya te digo que la imagen del simulador no funciona muy bien.
Te lo descargas, te instalas una imagen y ya lo podrías ejecutar sin ningún problema.
Un iOS Simulator o ejecutarlo en el web browser.
De hecho, le vamos a dar primero aquí para que lo veamos.
¿Vale?
Vale, ahora dice Attempting to Open Project, ¿ves?
Empieza a ejecutar Webpack en modo desarrollo.
Y ahora de repente me abre esta pestaña.
Dice OpenApp.js to start working on your app.
Vale, pues vamos a volver, si os parece, a nuestro código que tenemos por aquí.
Vamos a abrir Visual Studio Code y vamos a empezar a ver código.
Claro que sí, que me da los autores.
Vale, este es el proyecto que justamente me ha generado Expo.
¿Vale?
Cuando yo he hecho el init, este es el proyecto que me ha generado y este es el proyecto que estoy viendo en esta página web.
Una cosa que tienes que tener en cuenta es que, aunque es cierto que, ves que pone aquí el running web browser,
luego lo haré en el simulator de iOS y lo veremos como más nativo.
También puedes incluso compartir el link por correo.
O sea, a alguien le puedes dejar esto o le puedes pasar el código QR.
O sea, es bastante interesante.
Pero, aunque pone aquí que lo puedes abrir en la web, ten en cuenta que esto está en modo beta.
Es una beta abierta.
O sea, que puede haber diferencias respecto a cómo lo ves en un simulador o en el dispositivo.
Solo que lo tengas en cuenta.
Lo interesante, vamos a ver de dónde sale todo esto, ¿no?
Esta frase de OpenApp, no sé qué, no sé cuánto.
Bueno, este es el proyecto que nos ha creado Expo.
En el Package.json, pues ya vemos aquí todos los scripts para Start, para Android, iOS, Web, etc.
Esto es si quieres ejecutar directamente la aplicación en uno de estos dispositivos.
Las dependencias, ya vemos Expo, ExpoStatusBar, React, ReactDom, React Native.
Fíjate que React Native es una URL especial de Expo, ¿vale?
Porque es como una compilación suya propia, tenlo en cuenta.
Y React Native Web es lo que está utilizando justamente para poder renderizar nuestra aplicación de React Native en la web.
Ok, ok, pues ahora que tenemos esto, bueno, Dependency, esto no me importa, muy interesante.
Pero lo importante es esto, en el app.js.
Fíjate, ya empezamos aquí a ver nuestra aplicación y es una aplicación de React.
Así de sencillo, es una aplicación de React, tal cual.
Es verdad que tengo, voy a mover esto aquí, que tiene más sentido.
Import React from React.
Luego, ImportStatusBar from ExpoStatusBar.
Esto es un componente que ya nos ha instalado Expo, entre diferentes cosas,
que podemos ir a la documentación y nos explica un poco lo que hace.
Al final, lo que nos permite es controlar de una forma bastante interesante,
pues lo que sería el status bar, dependiendo de cada uno de los dispositivos.
Hay componentes que son compatibles con diferentes dispositivos.
En este caso, tanto para Android, como iOS, como la web.
O sea, este es para todos.
Pero bueno, este seguramente lo quitaremos, porque lo haremos de otra forma.
Pero es bastante interesante, porque te permite cambiar los colores de la status bar,
la puedes ocultar, puedes hacer un montón de cosas.
Así que, para que lo sepas.
Status bar.
Luego, React Native, y esto luego lo explicaremos, StyleSheet TextView.
Por ahora, quédate que esto es un componente de React,
que estamos renderizando un view con estos estilos que tenemos aquí debajo.
El texto que hemos visto, que lo vamos a cambiar ahora.
Y este status bar, ¿vale?
Si yo voy a la web, claro, si voy a la web, vamos a la web.
¿Ves? Yo he cambiado la mundo y aquí aparece la mundo.
Pero claro, alguien me dirá, bueno, pero mirarlo en la web es un poco raro, ¿no?
Porque, a ver, me has dicho que esto iba a ser nativo.
Bueno, pues vamos a abrirlo, o vamos a intentar abrirlo en IOS Simulator.
Le vamos a dar aquí.
Me abre el simulador de IOS.
Para esto, necesitaréis tener un Mac.
O sea, esto es una pena, pero para utilizar el simulador de IOS,
necesitáis Mac.
Y necesitaréis tener instalado Xcode y instalar el simulador que queráis utilizar.
Esto es la primera vez, aunque hay veces que si cambias dependencias,
haces cambios que hacer, pero bueno, lo importante es que es la primera vez.
¿Ves? Hola, mundo.
Perfecto.
Si ahora me voy aquí a mi código, vámonos a mi código.
Lo dejo por aquí.
Así es como vamos a trabajar más o menos.
Y ahora aquí ponemos hola Twitch y lo guardo.
¿Veis? Instantáneo.
O sea, no ha tardado absolutamente nada.
Para que veáis un poquito cómo funciona la cosa.
Que no nos vamos a tener que preocupar.
Así que ya lo tendríamos en la web y también lo tendríamos aquí en el simulador de IOS.
En este caso es un...
Bueno, esto pone que es un iPod Touch.
Es un poco raro, pero bueno.
Podríamos cambiarlo.
No sé, aquí en Device creo que se podría cambiar.
Bueno, se puede cambiar.
Ahora no recuerdo dónde, pero bueno, no es muy importante para nosotros que lo podamos cambiar.
Lo importante, esto sí, es que tengamos activado el Input, Send Keyboard, Input to Device.
Esto es importante.
Y el Keyboard, tener el Connect Hardware Keyboard.
En el caso de que lo queráis tener ahí en cuenta.
Si no, en Preferences, me imagino.
Bueno, no pasa nada.
Pues lo importante es que sea de IOS y que funcione correctamente.
Luego lo podemos probar en diferentes dispositivos, en iPad, en lo que haga falta.
¿Vale?
Esto, ya tenemos nuestra aplicación aquí.
Ya estamos aquí ejecutando cosas.
Luego, no os preocupéis que os voy a explicar cada uno de los elementos, el text, el view y todo lo que vayamos haciendo.
Pero antes, me gustaría volver a esta URL.
Porque, ¿te acuerdas que te dije aquí que teníamos este proceso en MetroBandler?
Pues fíjate en este, que tenemos ahora el iPod Touch.
Bueno, me he puesto el iPod Touch, es un poco raro, pero al final es como un dispositivo.
¿Veis que aquí pone Running Application on iPod, bla, bla, bla?
Ten en cuenta que aquí, si yo ahora le pongo un Console Lock, vamos a poner aquí un Console Lock.
Fíjate donde aparece el Console Lock.
Hay diferentes formas de hacer esto.
Una, mirar aquí la consola.
También se puede conectar en Safari.
Se puede llegar a conectar a la aplicación y tener las herramientas de desarrollo para ver la consola y tal.
O si no, también se puede tener el React Native Debugger.
Que si queréis, también lo podemos intentar mirar.
A veces puede ser un poco complicado de hacerlo funcionar.
Pero solo para que sepáis, es este proyecto.
React Native Debugger.
¿Vale?
En MacOS es esto lo que veríais.
Esto es lo que queremos, justamente.
Con Homebrew lo tenéis que instalar así con este.
Esto no es obligatorio.
Esto ahora mismo es opcional en el caso de que queráis mejorar un poco a la hora de debugar vuestra aplicación.
De hecho, aquí en nuestra aplicación hay una cosa interesante de Expo.
Y es que si le damos al comando D, ¿ves?
Me sale un menú que esto no es nativo de la máquina.
Esto es la aplicación de Expo, básicamente, que nos está como envolviendo nuestra aplicación y nos está dando un montón de utilidades.
Por ejemplo, podemos copiar al clipboard el enlace por si queremos que alguien lo pueda ver, esta aplicación.
Podemos hacer Disable Far Refresh, cosa que no les recomiendo.
Debug Remote GS, que este es el que deberíamos activar para React Native Debugger.
A ver, un Performance Monitor, que esto no es lo que nos puede ayudar con los FPS, ver si tenemos algún problema de rendimiento.
O Show Element Inspectors, que esto está bastante bien, es muy parecido al que tendríamos a lo mejor en la web, ¿no?
Y puedes ver, pues, cuánto ocupa, cosas así.
Además, puedes ver cuáles son sus estilos.
No está nada mal.
Ahora, ahora le podemos volver a dar Hide, tal.
Muy bien.
Ahora veremos que está funcionando igual.
Para el React Native Debugger, pues, una vez que tenéis todo esto instalado, ¿vale?
Tened en cuenta esto, lo de la versión de React Native, aunque deberías estar instalando la última, que es esta.
Pues, nos vamos aquí.
Y esto, a veces, es un poco tricky.
¿Por qué?
Porque hay que ver, por un lado, aquí, habría que ver en qué versión...
Vale, 19.000.
Entiendo que es la 19.000.
Pues, tendríamos que ejecutar algo así, open, rndebugger, bla, bla, bla, 19.000.
Esto, a veces, a mí me funcionaba antes de gratis.
O sea, no tenía que hacer absolutamente nada.
Sino que detectaba directamente el puerto y ya está.
Pero, no sé, en M1, en Silicon, el procesador que tengo es un poquito más...
No sé si es que tiene algún tema de incompatibilidad o le cuesta un poco más.
Pero, bueno, una vez que lo tienes abierto, aquí le puedes dar al comando D, que será, no sé si será control D, me imagino en Windows.
Y aquí, en Debug, Remote.js, pues, le das...
Vale, y ves, se ha conectado.
De repente se ha conectado.
De forma que ahora tengo aquí el console.log y, además, tengo aquí, pues, todos los elementos.
Y los puedo ver y los puedo...
Aquí, además, en el source, tú podrías, pues, poner todo.
Si tienes alguna forma de parar el código, un debugger o lo que sea, pues, te aparecerá.
También en Nickware puedes ver todas las requests.
Es una forma interesante de debugger.
Te lo explico porque me parece interesante, sobre todo, antes de empezar a ponerse en faena, a escribir código y sin saber, pues, ver las entrañas.
Esto, ya ves que funcionar funciona.
Ahora, lo que te recomiendo es que si lo vas a dejar de utilizar, lo desconectes.
Es porque si cierras antes de desconectarlo, van a empezar a salirte un montón de errores y es una ruina.
Así que lo paras ahí y, entonces, cuando veas que aquí está la conexión cerrada, pues, lo cierras y ya está.
Nosotros lo vamos a hacer así, sin el debugger, porque si no es un poco rollo y tal.
Pero, bueno, si vemos en algún momento que hay algún error que no soy capaz de encontrarlo, pues, nada, le daremos al debugger.
No pasa nada.
Ahora, a mí, ya sabéis que me encanta utilizar un linter antes de ponerme manos a la hora.
Así que voy a utilizar un linter que, si ya me conoces, seguro que lo conoces.
Si me conoces, lo conoces.
NPM install, save dev, ¿vale?
Babel slint.
Y vamos a tener slint config standard.
Este es el que a mí me gusta.
Aunque son un montón de config standard, aunque parece que son un montón de paquetes, es súper normal, ¿eh?
Slint config standard react, slint plugin promise, pero no te asustes, ¿eh?
Que son un montón de instalaciones.
Si quieres te paso la línea, ahora la voy a copiar y la paso en el chat, por si la queréis.
Lo interesante de esto, plugin node, slint plugin react.
Lo interesante de esto es que la configuración es súper sencilla, ¿vale?
Aunque parece que tiene un montón de instalaciones, la dejo ahí en el chat.
Luego la configuración es súper, súper sencilla.
Porque vais aquí, vais al package.json.
Una vez que se ha instalado, todas estas dependencias.
Y ahora aquí, vais a slint config.
Ponéis parser y le decís que es Babel slint.
Y luego aquí, que tiene que extender de standard, standard.jsx y standard.react, ¿vale?
Y con esto ya tenéis el linter configurado y no os tenéis que preocupar de, yo que sé, todas las reglas y todo esto.
A mí me encanta este linter por eso.
¿Ves?
Ya me aparece en el editor con un montón de errores, que le tengo que quitar cosas y tal.
Pues le doy a guardar y como ya tengo que me lo formate todo, pues perfecto.
Y esto cada vez que entre en un componente, pues se me quejará seguramente.
Pero bueno, ya está.
Ya tengo el linter configurado.
Pues venga, vamos con los conceptos básicos de React Native.
Lo primero, vamos a eliminar todo lo que tenemos por aquí.
Vamos a eliminar también todo lo que tenemos.
Vamos a quitar esto.
Vamos a quitar esto de aquí.
Bueno, esto lo vamos a dejar.
Vamos a dejar este.
Espérate.
Vamos a dejar eso.
Vamos a quitar el status bar para que no nos lía.
¿Cuál es la diferencia de React Native con cualquier cosa que conozcas de React?
Básicamente son los componentes que tienes disponibles.
Que no puedes utilizar, como te puedes imaginar aquí, un div.
Ni puedes utilizar aquí un párrafo.
Que es el caso, ¿no?
Pero React Native ya tiene sus propios componentes que más o menos emulan esas funcionalidades.
En el caso del texto, que lo tienes aquí importado, es seguramente el más importante.
Porque, bueno, junto con el view, el text es el más importante porque es el único componente
que puedes utilizar en React Native para poder renderizar texto, ¿vale?
No puedes renderizar texto de cualquier forma que se te ocurra y decir,
ah, pues lo voy a poner aquí este hola Twitch, ¿ves?
Ya se me queja.
Los text strings siempre tienen que estar renderizados dentro de un text component.
Así que el primer componente que tienes que conocer de React Native es text.
Esto es diferente a cómo funciona seguramente React.
Esta es la gran diferencia que tiene.
En el sentido de que en React tú puedes renderizar texto allá donde quieras.
Y además no tienes que importar componentes para renderizar algo en la pantalla.
¿Por qué?
Porque ya utilizarías el p de párrafo.
Y ya está.
O sin p de párrafo.
En este caso, esto no es así.
Tienes que utilizar el text y es el único componente que puede renderizar texto.
Eso a fuego aquí, ¿vale?
A ver, que no pasa nada porque como puedes ver, el sistema de errores de React Native es una gloria.
Pero esto, lo primero, ¿vale?
Así que, hola mundo.
Este el primero y ya lo tenemos aquí, el text.
Luego, aparte del text, que además solo es el text, luego lo que puedes hacer es estilar el text para que parezca un strong, para que parezca un título, para que parezca lo que sea.
Pero eso puedes utilizar el text.
Aparte del text, aquí tenemos el segundo que, si no es tan importante como el text, está cerquita.
Que es el componente básico para crear cualquier interfaz en React Native.
Es el view.
Vista.
Así de simple.
Vista.
Las vistas, ¿qué es lo que hace?
Pues tú puedes componer con las vistas para que tengan textos, para que tengan otras vistas, para que tengan imágenes, otros componentes.
Las vistas es esto.
Para crear la interfaz del usuario.
Es lo más parecido a un div, en el caso que ya sepa React.js o HTML, es lo más parecido a un div, con una salvedad que luego comentaremos.
Y es que el view, por defecto, los views se comportan como un contenedor con Flexbox.
Esto más adelante lo revisaremos, ¿vale?
Pero esa es una de las grandes diferencias.
Otros componentes que son importantes, pues aparte del text y el view, tendríamos el text input, que como te puedes imaginar, es como un input de HTML.
Y otro, como no tenemos un botón, pues tendríamos los touchable, y hay un montón.
Touchable highlight, touchable native feedback, hay un montón, ¿no?
Touchable opacity.
Todos estos son cosas que se ven en la UI que se pueden tocar, ¿vale?
Cuando todos que empiezan por touchable, básicamente es este.
Touchable, touchable.
Son componentes que el usuario puede tocar.
Ahora, en lugar de ser componentes que podamos hacerle un click, tenemos que hacer un on press,
que tiene más sentido con un on click.
Pero es esto, ¿eh?
Es una colección de componentes que el usuario va a poder interactuar con ellos.
No tenemos un botón, lo que tenemos son touchable, without feedback, touchable native, touchable highlight, native feedback, hay un montón.
Opacity.
Ya veremos un poco los que vamos utilizando, pero yo creo que lo mejor es que te pongas a jugar con ellos y verás cuál es el que te gusta más.
Al final todos son muy parecidos, pero son un poco diferentes cuando se interactúa con él.
Ya está.
Eso simplemente.
Lo interesante es que te permiten capturar los eventos de cuando el usuario hace algún tipo de click.
Ahora, otra cosa importante, ¿vale?
Esto es otra diferencia súper importante.
En React, normalmente, cualquier cosa puede ser clickable.
O sea, tú puedes decir que este texto le dices, ah, un on click.
Y ya está.
En React Native esto no es así.
Esto no funciona.
Aquí, para cualquier cosa que sea tocable, siempre tienes que utilizar un touchable lo que sea.
¿Vale?
Todos los componentes que sean touchable.
No puedes hacer que una vista sea tocable ni que un texto sea tocable.
Así que tenlo en cuenta.
A ver, es sencillo porque al final lo único que tienes que hacer es, pues, por ejemplo, aquí touchable y puedes decirle touchable without feedback.
¿Vale?
Lo único que tienes que hacer, pues, sería hacer envolver este hola mundo y ya está.
Ya tendríamos esto, pues, que sería algo que puedes tocar.
Y lo vamos a ver, ¿vale?
Vamos a hacer un pequeño ejemplo.
Aquí, pues, podríamos ponerle un on press, que sería esta prop para detectar cuando el usuario justamente, pues, ha hecho, ha tocado aquí.
¿Ves que aquí me está diciendo la alert y tal?
Mira, vamos a ver cómo se hace la alert, que es el típico ejemplo.
No sé, no funciona así, poniendo una alert y ya está, como si nada.
Así que, en este caso, si no recuerdo mal, y si no, miraremos, no sé si es de React Native.
Sí, es de React Native.
Que a veces me confundo, como expo también tiene un montón de utilidades, pero no, está de React Native.
Y aquí lo que haríamos es un alert, punto, alert.
Y aquí pondríamos, pues, hemos tocado el texto.
¿Vale?
Lo cerramos así.
Parece que el texto, ¿ves?
Es exactamente el mismo que antes, pero fíjate que si le doy, me ha salido una alerta, ¿no?
Hemos detectado que sale, ¿no?
Que le he tocado y entonces creamos una alerta.
Pero cuando le doy el click, no se ve nada.
No aparece, no se ve ningún feedback, que es lo que comentamos, el Touchable Without Feedback.
Si ponemos otro, Touchable Native Feedback.
Vamos a poner este.
Vale.
Ahora, cuando le doy click, fíjate que hace como un efecto, ¿verdad?
Pues eso, que son diferentes componentes y cada uno, pues, tiene este efecto.
Uno que se ve al feedback, otro que no.
Pero lo importante es que cualquier cosa puedes hacer que sea tocable, pero la tienes que envolver con este componente.
No le puedes poner el onpress al texto directamente.
Vale.
Vale.
Pues, venga.
Ahora que ya más o menos conoce los componentes básicos, yo creo que ya podemos empezar a crear nuestra aplicación.
¿Vale?
Así que, más o menos, voy a dejar esto por aquí, así.
Y lo que vamos a hacer es crear un nuevo fichero en source, components, main.js, ¿vale?
El app.js vamos a intentar, luego lo limpiaré, ¿vale?
¿Por qué?
Porque quiero que el app.js quede lo más simple posible.
Y vamos a pasar al main.js, vamos a pasar todo lo que sea la inicialización de nuestra aplicación y todo esto.
Así que vamos a importar React de React y aquí vamos a importar un texto.
Luego os explicaré también el tema del stylesheet.
Por ahora vamos a importar el view de React.
Vale.
Pues vamos a crear main.
Esto lo dejamos así.
Y esto lo único que va a hacer es devolver el view, view export default main.
Y vamos a poner ya nuestro primer texto que va a ser RAID repository application, ¿vale?
Vamos a crear una aplicación para poder botar repositorios de GitHub.
Y esto es solo principio.
Venga.
Vamos a poner esto y este va a ser el que vamos a renderizar aquí.
Así que vamos a poner aquí main.
Y esto, todo esto lo vamos a quitar.
El container lo vamos a dejar.
Importamos main from components source barra components main.
Y así el archivo a.js intentaremos dejarlo quietecito, que ya que está en la raíz, para no tenerlo ahí dándole vueltas y tal.
Bueno, ya tenemos esto.
No tiene mucho sentido que tenga estos estilos.
Se los vamos a quitar también.
Vale.
Estos estilos fuera.
De hecho, el view este es fuera también.
Vamos a dejar el main aquí, que solo renderiza el main.
Y ya está.
Vale.
Porque además vamos a ver el primer problema que tenemos.
Y que es súper interesante en la vida de React Native.
¿Qué ha pasado?
Ahora mismo estamos renderizando solo este componente main.
Pero mira donde me ha dejado el texto.
¿Vale?
Me lo ha dejado aquí debajo de todo.
Y esto, pues, como que no se puede ver, ¿verdad?
Vale.
Esto es súper interesante.
Y es que cuando nosotros estamos renderizando una aplicación, no tenemos en cuenta realmente dónde se renderiza.
En este caso se está renderizando en el punto 0,0, arriba a la izquierda.
Necesitamos nosotros controlar que deje el espacio necesario.
Para esto, ya hemos visto antes que estaba lo del status bar y hay componentes que te solucionan esto.
Pero bueno, nosotros lo vamos a hacer todo desde cero.
Por lo tanto, quiero que veas cómo se puede solucionar y de una forma bastante sencilla.
Una forma de solucionarlo sería importar las constantes del paquete de expo constants.
Esto es un paquete que nos ha instalado expo automáticamente.
Y lo que podemos hacer en este view, básicamente, vamos a ponerle un style.
¿Vale?
Que esta es otra cosa interesante.
Y empezamos ya a estilar.
Todos los elementos no se puede estilar con CSS.
Es una pena, pero no se puede.
A ver, se pueden hacer diferentes cosas, pero de forma nativa no se puede utilizar CSS.
Se puede utilizar un montón de librerías, historias, que al final lo que hacen es compilar de alguna manera.
Pero al final, la forma nativa de hacer estilos es con la propia style.
Entonces, en la propia style lo que puedes hacer, esto es exactamente lo mismo que harías en React con los estilos en línea.
Es tener la propia style.
Y aquí le podríamos poner, por ejemplo, el margin top, que tenga...
Voy a poner por ahora 5.
Y vamos a hacer que tenga un flex grow de 1 y un flex grow de 1.
¿Vale?
Para que ocupe todo el espacio.
Por ahora vamos a dejar esto.
Ahora, si lo guardo, ¿ves que ha bajado un poquito?
Bueno, podría empezar aquí a jugar y decir, venga, va, a ver cuál es el correcto.
¿Cuál es el correcto?
Que vaya bajando y tal.
Bueno, lo que puedes hacer aquí es utilizar constants, punto, y aquí tienes un montón de constantes que expo, ya dependiendo de la plataforma, le ha dado un valor.
En este caso, por ejemplo, tienes el status bar height.
Así que utilizando esto, ¿ves?
Ya me ha dejado exactamente el espacio que necesitamos.
Estas constantes son súper útiles, especialmente por las diferencias que puede haber en Android y que puede haber en iOS.
Que, por cierto, antes de continuar, voy a enseñarte una cosa también súper interesante.
Mira, esto cada vez que tengas errores, este era el de text strings que habíamos hecho antes.
Vale, ¿veis que aquí tengo este código QR enorme y tal?
Y os he dicho, oye, mira, no puedo ejecutarlo en Android porque en Mac Mini M1 este, pues es un poco tal, no sé qué, no pasa nada.
Os podéis instalar la aplicación de expo, os la podéis instalar en vuestro dispositivo, ¿vale?
Y en esto, pues tenéis un scan QR code.
Pues lo que podéis hacer es escanear el código QR, ¿vale?
Como lo estoy saneando yo.
Y directamente, esto empieza a cargar.
Bueno, no sé, voy a poner en primera persona para que lo voy a hacer, pero ¿veis?
Está esto totalmente blanco ahora porque está cargando.
Está haciendo el building JavaScript bundle.
Y eventualmente, empezaré a ver aquí la aplicación que estoy construyendo.
De hecho, fijaos que ahora de repente ya ha detectado un nuevo dispositivo aquí a la izquierda.
¿Lo veis?
Que tengo aquí un nuevo dispositivo.
Este es mi móvil.
Además, aquí tendría también los logs de este dispositivo.
Y podéis empezar aquí a conectar dispositivos, tantos como queráis.
De hecho, lo interesante es que cuando un usuario, pues un amigo tuyo,
estás trabajando en un equipo o lo que sea, le puedes pasar el código QR y ya lo tendrías.
Y de hecho, ahora parece que está todo en blanco, pero yo aquí veo arriba a la izquierda
RAID Repositero Application.
Luego os lo enseñaré cuando vayamos avanzando, ¿vale?
Por ahora lo he dejado así y lo dejo ahí conectado, que tampoco viene mal ir revisando de vez en cuando.
Es súper interesante porque aquí podéis empezar a abrir un montón de dispositivos,
tener tres o cuatro dispositivos aquí en el escritorio e ir viendo cómo van surgiendo los cambios, ¿vale?
Bueno, ya hemos arreglado un poco esto.
Vamos a empezar a darle vida a nuestro proyecto, que ahora mismo se ve el pobre un poco de aquella forma.
Mirad, tengo aquí una lista de repositorios que voy a poner por aquí.
Y luego os explicaré que este style no está bien del todo.
Esta es la forma más chusquera de style, no es la recomendada, luego lo arreglaremos.
No os preocupéis si alguien está poniéndose las manos en la cabeza, que no se preocupe, que lo arreglaremos.
Vamos a crear aquí un Data Repositorios.
Esto luego, más adelante, lo sacaremos de un backend.
Pero por ahora vamos a empezar a darle vidilla a nuestra aplicación, que es lo importante.
Vamos a crear.
He creado esto.
Esto es una red que tiene objetos donde tiene diferentes repositorios,
repositorios de diferente gente, con diferente información y tal.
Y vamos a renderizar esto en nuestra aplicación.
Así que vamos a crear un componente aquí, que le vamos a llamar RepositoryList.jsx.
Vamos a importar React.
Vamos a importar la vista, view, el text, from React Native.
¿Vale?
A ver que no...
Vale.
Que no me haya dejado la cámara.
Es que no se vea el código.
Repositorios from data, repositorios.js.
¿Vale?
Vamos a crear nuestro primer repositorio list.
Mira qué listo esto.
Que ya sabe lo que voy a hacer.
Bueno, casi.
Y aquí vamos a hacer un return.
Vamos a tener una vista.
Y vamos a...
Sí.
Vamos a hacer un repositorios.map.
Y de cada repositorio, pues lo que vamos a hacer aquí es tener una vista con una kill.
Aquí también la sigue necesitando, como si fuese React.
¿Vale?
Donde vamos a tener la id del repositorio.
¿Vale?
Vamos a enseñar por ahora, en lugar del reponame, vamos a enseñar el repoid.
Y cerramos aquí la vista.
Y vamos a ver.
Esto y esto.
A ver que esto me ha cerrado...
Me ha cerrado mal.
Es esto, esto y esto.
Ahí está.
Ahora sí.
Ah, no.
Espérate.
Vale.
Que dé falta este por cerrar.
Repo list.
Export default.
Repos list.
Bueno, lo voy a llamar repositori list.
¿No?
Que es el nombre que le he puesto a nuestro fichero.
Que tenga un poquito más de sentido.
Ahora, en el main, ya que hemos puesto esto, vamos a poner el repolist y lo vamos a importar.
Import repolist from repolist.jx.
Guardamos los cambios.
Bueno, más o menos.
Ya empezamos a ver cositas.
Voy a quitar el texto este que no tiene mucho sentido.
Y por ahora vamos a dejarlo así.
Ya estamos listando nuestros repositorios.
Bueno, algo es algo.
No es...
Uy.
Ahora.
Estamos listando nuestro repositorio.
La ID de nuestros repositorios.
¿Qué pasa con esto?
Bueno, vamos a seguir añadiendo campos.
¿No?
Porque no solo quiero que renderice esto.
Quiero que renderice muchas más cosas.
No solo el repo ID.
Por ejemplo.
Voy a copiar...
Voy a copiar esto unas cuantas veces.
Vale.
Pa, pa, pa, pa, pa, pa.
Y aparte del repo ID, pues tenemos el full name.
¿Qué más tenemos?
Tenemos description.
Tenemos el language.
Tenemos por aquí stars.
Star gathers count.
Tenemos los forks.
La review.
Y el rating.
De cada uno podríamos incluso poner un momento esto.
Para ver cada uno de los campos a que se refiere.
Y vamos a ver el problema que tiene lo que acabamos de hacer.
Vamos a ver que la información aparece.
Pero no funciona como esperábamos.
¿Vale?
Rating.
Venga.
Vale.
Guardo los cambios.
Pues aquí tengo toda la información.
Pero alguien dirá...
Vale.
Que...
Aparte de que es bastante fea.
Pero no os preocupéis.
Que lo vamos a ir arreglando.
Y hoy lo arreglamos.
Y va a quedar bonito.
Bueno.
La información no cabe en la aplicación.
O sea, en el viewport.
En la view.
Y fíjate que yo estoy intentando...
Bueno.
No sé si lo notas.
Pero ya te lo explico yo.
¿Vale?
Estoy intentando hacer un swipe hacia arriba.
Para ver si puedo scrollear.
Y no me permite.
No puedo scrollear.
No puedo ver el resto de la información.
Bueno.
No pasa nada.
Y es que esto de view.
Tal y como está.
No tiene scroll.
¿Vale?
No detecta que tú puedas hacer scroll.
Y de forma mágica.
Pues aquí tienes toda la información.
Y ya está.
No.
No funciona así.
Por desgracia.
Para esto.
Lo que tenemos que utilizar.
Podríamos utilizar dos componentes.
Uno.
Que yo creo que es el más correcto en este caso.
Y otro.
Que no es tan correcto.
Pero bueno.
Es interesante que te lo comente.
Porque más adelante seguro lo utilizamos.
En React Native.
Tenemos un montón de componentes.
Aparte de los que os he dicho.
Que son los básicos.
Pero hay un montón más.
¿Vale?
Yo os he comentado.
El touchable.
El button.
También lo podéis utilizar.
Es verdad que no os lo he comentado.
Bueno.
Pero podéis utilizar el button.
También para que tengan el on press.
Tenéis un montón.
Pero.
Hay dos.
Que te van a permitir hacer scroll.
Uno.
El flat list.
Que es bastante interesante.
Sobre todo.
Para renderizar listas.
Este es el que vamos a utilizar ahora.
Y luego otro.
Sería el scroll view.
¿Vale?
Que es una vista un poco especial.
Que lo que te permite.
Es tener scroll.
En este caso.
Yo creo que lo que es más.
En este.
En este.
En este ejemplo en concreto.
Es interesante.
Que sea el flat list.
¿Por qué?
Porque el flat list.
Pues está más pensado.
Para un tema de rendimiento.
Cuando es una lista de elementos.
Que es el caso.
Y el scroll view.
Es simplemente.
Cuando es una vista.
Que necesita scroll.
Que puede ser por ejemplo.
Texto.
¿No?
Un texto que no cabe.
Y necesitas scroll.
Pues el flat list.
Es una forma.
Performante.
De renderizar una lista de datos.
De hecho.
Le tienes que pasar los datos.
Así que.
Yo creo que esta sería la forma correcta.
Vamos a utilizar el flat list.
¿Cómo se utiliza el flat list?
Vamos a verlo.
Lo primero que vamos a tener que hacer con el flat list.
Es poner aquí.
Flat list.
Y le tenemos que decir.
Cuáles son los datos.
Que queremos renderizar.
Así que le vamos a poner.
Como data.
Vamos a ponerle aquí.
Los repositories.
¿Vale?
Ahora.
Si yo le cambio esto.
Esto sería ideal.
Esto sería la gloria.
Esto sería bendito.
Que esto funcionase.
¿Verdad?
Hacer así.
Y decir.
Ah.
Venga.
Ya está.
Pero no.
Se ha quedado todo en blanco.
Porque esto no funciona así.
Me encantaría.
Pero no funciona así.
¿Cómo funciona?
Vale.
Una vez que ya tienes los datos.
En el flat list.
Le tienes que decir.
Cómo tiene que renderizar.
Cada uno de los items.
No te preocupes.
Porque no es complicado.
Porque básicamente.
Es lo mismo que tenemos aquí.
¿Cómo es?
Pues aquí.
Render item.
Esto va a ser un método.
Que le vamos a decir.
Cómo tienes que renderizar cada item.
¿Vale?
Así que en cada item.
Vamos a hacer algo aquí.
¿Qué es lo que vamos a hacer?
Bueno.
Pues tampoco.
Tampoco es muy raro.
¿No?
Si lo estamos haciendo aquí.
Básicamente.
Para cada item.
En lugar.
Le llamamos item.
Le podemos cambiar el nombre a repo.
Y así.
Podemos recuperar todo esto.
Que habíamos hecho aquí.
Lo pegamos aquí.
Esto.
Ahora.
Lo quitamos de aquí.
Y ya lo tendríamos.
Fíjate que ahora me ha aparecido toda la información.
Y ahora.
Cuando hago scroll.
Pues sigue funcionando correctamente.
¿Vale?
O sea.
Ya está funcionando como esperamos.
Bueno.
Ahora la información está un poco pegada.
También es verdad.
O sea.
No soy capaz de diferenciar.
Cuando termina un item y el otro.
No pasa nada.
Porque también podríamos utilizar aquí.
Un item.
Separator.
Component.
Que hay diferentes formas de hacerlo.
Mejores que las que voy a hacer ahora.
Pero para salir del paso.
Ahora mismo.
Lo que vamos a hacer es meterle un texto vacío.
¿Vale?
Porque como son los dos componentes que conocemos.
Pero hay mejores formas de hacerlo.
Pero bueno.
Ya ves.
¿No?
Ahora ya tenemos cada uno de los items.
Bueno.
El rating.
Veo que no me lo está.
Rating average.
Perdón.
Que es que no estaba poniendo ese.
Y todo lo demás sí que está.
¿No?
Sí.
Vale.
Pues aquí tendríamos un item.
Otro item.
Otro item.
¿Vale?
Y ahora sí.
Lo puedo renderizar.
Y scrollear perfectamente.
Ahora el usuario puede ver toda la información.
Vale.
¿Qué pasa con todo esto?
Bueno.
Que seguramente.
Pues estás diciendo.
Hostia.
Miguel.
Es seguramente la aplicación más fea que me he echado la cara.
No pasa nada.
Yo también lo estaba pensando.
Vamos a darle un poco de vidilla.
Como hemos dicho.
Para estilar.
¿Qué tenemos que hacer?
Pues utilizar style.
Entonces vamos a poner aquí un style.
Y vamos a darle.
Un primer.
Un primer toque de pintura.
¿Vale?
Podemos poner un padding.
¿Cómo tienes que utilizar los estilos?
Tienen que ser en camel case.
En este caso.
Si además.
En el padding.
Te fijarás.
Que no estoy poniendo ningún tipo de unidad.
La unidad.
Es.
Son.
El número de píxeles.
Dependiendo de.
De la resolución que tiene el dispositivo.
Pero son píxeles naturales del dispositivo.
Esto significa.
Son 20 píxeles.
Pero no píxeles reales.
Sino.
Es que dependiendo de si.
Tiene.
Si es retina.
Si no es retina.
Si es por uno.
Por dos.
O por tres.
O sea.
Que la cantidad de píxeles que tiene.
Pero al final son los píxeles.
Que estás viendo.
O sea.
Que está representando el dispositivo.
Así que estos serían 20 píxeles.
Tal y como lo está representando el dispositivo.
Eso te tienes que quedar.
No son 20 píxeles reales.
Porque en el caso del iPhone.
Seguramente serían 60 píxeles reales.
Es un poco raro.
Pero está así como funcionan las pantallas de retina.
Así que son 20 píxeles.
Tal y como lo está representando el dispositivo.
Por lo tanto estos 20.
Puede ser que sean diferentes.
Dependiendo del dispositivo.
Entonces para el padding.
Esto sería que todos los padding.
Fuesen 20 píxeles.
Como lo está.
20 píxeles que representa el dispositivo.
Ahora vamos a poner que padding button.
Sea 5.
Padding top.
Sea 5.
Vale.
Es la forma que tenemos de poder cambiar esto así.
Venga.
Y así le damos un poquito de espacio.
Y ahora del text.
Solo para que veamos cómo funciona.
Aquí le podríamos poner font height.
Font width.
Perdón.
Volt.
Y podríamos poner también.
Que tenga un poquito de espacio hacia abajo.
Y ya está.
¿Vale?
¿Ves?
Y ahora esto ha salido así.
Voy a ponerle un poquito más.
Para que aparezca un poco más interesante.
Vale.
Esto sería un poco los estilos.
¿Qué pasa?
Que en React Native.
Importante.
Todos los valores que van con dimensiones.
He explicado lo del padding y el valor.
Pero esto pasa con el margin.
Con el width.
Con el height.
Todo lo que sea que necesitan valores que sean de espacio.
Pues que sepas también que funciona así.
En el caso de las fuentes.
Pues también va a ser unidades.
Estos valores que te digo que no tienen ningún tipo de unidad.
Son píxeles que son independientes de la densidad.
O sea que lo tengas en cuenta.
Ahora.
Esto queda un poco chof.
¿No?
Demasiada información aquí a saco.
Vamos a hacer una cosa.
Vamos a crear un componente para poder empezar a estilarlo mejor.
Y le vamos a crear al repository item.jx.
Porque así nos ayudará.
Aparte de verlo mejor.
Lo vamos a poder estilar mucho mejor.
Vamos a hacer aquí un const repository item.
¿Vale?
Esto por aquí.
Esto por aquí.
Vamos a importar el view y el text.
From React Native.
¿Qué me queda?
¿Vale?
¿De dónde saca este info?
La debería sacar de...
Bueno, aquí podríamos empezar a sacar cosas, pero voy a ponerle props.
Y vamos a poner todos estos como props.
¿Vale?
Y vamos a importar React.
Porque si no, también se queja de esto.
From React.
Y hacemos un export default de repository item.
¿Vale?
Vale.
Ahora se me queja el linter de un tema de que no tengo prop types y todo esto.
Lo que voy a hacer yo, pero esto cada uno que haga lo que quiera,
la voy a desactivar porque me parece que en este caso no nos va a ayudar
y nos va a dar demasiado rojo.
Así que lo que vamos a hacer es el React prop types lo vamos a poner a off.
Efectivamente.
Off.
¿Vale?
Así que así me quito todo eso y ya está.
Porque no voy a estar poniendo prop types, que si no iríamos demasiado lentos.
Lo importante es que ya lo he separado.
Pues nada, ahora aquí vamos a utilizarlo.
Repository item.
Y vamos a pasarle todo lo del repo y el item.
Lo vamos a importar.
From repository item.
Quitamos el view.
Y ya está.
Al menos ya lo hemos extraído.
Pues ahora vamos a mejorar el tema de los estilos y lo vamos a hacer un poco
separado, que si no era un poco raro.
Vamos con los estilos.
Como os he dicho, podéis estilar con el style.
Pero no es la forma correcta.
En React Native tienes una forma de simular las hojas de estilos de la web.
No funciona exactamente como las hojas de estilos porque nunca las puedes hacer globales.
Pero sí que son hojas de estilos que digamos que puedes hacerlas fuera del componente.
Lo cual hace que tengan mejor rendimiento.
Porque en este caso, este componente lo que va a hacer es crear un objeto cada vez que se renderiza.
Lo cual es cero óptimo.
Luego, además de eso, lo que te va a permitir es un poco abstraerte de lo que está ocurriendo
dentro del componente.
Y dentro del componente podrás hacer otro tema de estilos, como veremos, más interesante
que no crear los estilos.
Porque aquí empieza a no verse muy claro.
Para hacer esto, lo que puedes hacer es utilizar el style sheet.
Que lo tendríamos aquí en React Native.
Y creamos los estilos de esta forma.
Tenemos los styles.
Y decimos style sheet.create.
Y aquí lo que podemos pasarle es un objeto.
En el objeto le vamos a decir que vamos a tener un container.
En el container vamos a tener un padding de 20.
Vamos a tenerle estos estilos.
Padding de 20.
Padding bottom.
De 5.
Padding top.
De 5.
¿Vale?
Y ahora, estos estilos que teníamos aquí, pues ahora los podemos quitar.
Espérate, que no he cerrado esto.
Ahora sí.
Estos estilos que teníamos aquí los podemos quitar.
Y ahora podemos utilizar styles.container.
De esta forma, los estilos que va a utilizar esta vista son los que tiene justamente aquí.
Ya ves que es mucho más cómodo.
Y no tienes que tener los estilos ahí a mano, que es un poco rollo.
Además, aquí podríamos tener uno que se llame strong, por decir uno.
Y tener el color, puedes ponerle el color que tú quieras, que es un hexadecimal, no hay ningún problema.
Fue un width.
Puedes poner bold o podrías poner 200, lo que sea.
Vamos a poner bold.
Y el margin bottom, que habíamos puesto que fuese 5.
¿Vale?
Cerramos aquí.
Styles.strong.
Si guardamos los cambios, pues ves, ahora que ha cambiado el color.
¿Por qué?
Porque le he añadido aquí el color este.
Pero bueno, que esta sería la forma correcta.
Además, con esto puedes hacer millones de cosas.
Puedes extraer esto fuera.
Para que no esté en el mismo componente.
Por ejemplo, esto sería una cosa.
Lo puedes poner debajo.
Esto es una cosa que también hace la gente.
En lugar de ponerlos para que el componente esté arriba, los más arriba posible.
Y los estilos los pones debajo.
Esto cada uno como quiera.
También lo puedes poner en un archivo aparte.
Exportarlos.
Y aquí importarlos.
Un poco a lo style components.
Puedes hacer un montón de cosas.
Pero esta es la forma recomendada de escribir estilos para tu componente.
¿Vale?
No lo hagas con el style.
A veces se te puede escapar alguno.
Pero esta sería la forma correcta.
Y además vamos a ver por qué.
Porque aparte de todo esto, también podrías utilizar algún theme.
Que de hecho es lo que vamos a hacer.
Por ejemplo, vamos a crear un componente.
¿Vale?
Que le vamos a llamar text.
Aquí en components vamos a llamarle style text.jx.
Vamos a ver un poco cómo funciona el tema de los estilos.
Y la posibilidad que tiene a la hora de componetizarlo.
De componetizarlo y de componer estilos.
Que es lo más interesante.
Esto es súper típico sobre todo si tienes un design system.
Así que style.
Vamos a pillar.
Importar el text y el style sheet.
From React Native.
Vamos a crear aquí también los estilos.
¿Vale?
Styles.
Vamos a crear los estilos.
Donde tenemos el texto.
Vamos a poner que el font size sea 12.
Y el color que sea gris.
Esto luego lo arreglaremos.
Lo haremos de otra forma.
Font Gaze.
El bold va a ser bold.
¿Vale?
Pues azul.
Pues que sea azul.
Uno que sea grande.
Pues que tenga un tamaño grande.
¿Vale?
Uno que sea pequeño.
Pues que tenga el tamaño pequeño.
¿Vale?
Y esto por aquí.
Y ya lo tendríamos.
Estos serían los estilos.
Vamos a crear nuestro componente de UI.
De texto.
Que podríamos hacer que sea grande.
Pequeño.
Lo que sea.
Pues vamos a hacer un export default.
Function.
Style.
Text.
Y aquí vamos a tener pues eso.
La posibilidad de que sea blue.
Que sea bold.
Que sea children.
El children va a ser el texto.
Que sea big o sea small.
¿Vale?
Muy bien.
Ahora.
Fíjate que aquí viene la magia.
De cómo se pueden componer los estilos en React Native.
Y esto es súper útil.
Esto lo vas a necesitar.
Y se hace un montón.
No solo para este tipo de estilos.
Sino para cualquier cosa.
Vamos a devolver primero lo que tiene que devolver este componente.
Este componente.
Uy.
Aparece por aquí.
Este componente debería devolver un texto que tuviese un estilo.
Y el estilo va a ser text styles.
¿De dónde sale este text styles?
¿Vale?
Y lo que va a renderizar es el children.
¿Vale?
Porque el componente texto envuelve un texto que va a ser el children.
¿De dónde sale este text styles?
Pues lo vamos a crear nosotros.
Y le vamos a llamar text styles.
Y esto va a ser un array.
Porque la prop de style no solo puede recibir un objeto, como habéis visto.
Sino que puede recibir un objeto.
Un objeto no.
Un array donde puede tener un montón de estilos.
Y así componetizar y componer lo que necesites.
En el caso de text styles podríamos hacer que tenga el color este.
Podríamos poner los estilos a mano.
Pero esto no tiene sentido porque ya hemos hecho todo esto para algo, ¿no?
Pues vamos a usarlo.
Vamos a quitar todo esto.
El primer estilo que siempre va a estar es styles.text.
Este va a ser como el estilo base.
Aparte de esto, vamos a decirle.
Bueno, pues si tiene la prop blue, pues entonces vamos a utilizar styles.blue.
¿Cómo funciona esto?
Esto lo que va a hacer es un short circuited.
Si el blue es false, esto no se va a evaluar y por lo tanto no lo va a añadir.
Y esto lo que hará es que pase a ser false.
¿Vale?
O, bueno, en este caso, undefined.
O sea, que aquí lo que vamos a tener es un valor que no va a reconocer
como un estilo y lo ignorará.
Pero si es true, lo que va a hacer es añadir y evaluar el styles.blue.
Y lo va a añadir en el array.
De esta forma vamos a conseguir que si le pasamos la prop blue,
esto lo que haga es recuperar los estilos de blue.
Y si no se lo pasamos, pues que no lo recupere.
Y esto lo haríamos con todo, ¿vale?
Con el de big, con el de small y con el de bold.
Y con esto ya tendríamos un componente que parece una tontería,
pero ya tenemos un componente reusable para estilar nuestros textos.
De hecho, en el repository item, ¿veis que tenemos aquí text, text, no sé qué?
Vale, pues ahora en lugar de utilizar este text,
vamos a utilizar el style text.
Style text.
Y vamos a utilizarlo aquí.
En lugar de poner aquí el estilo este strong que habíamos puesto aquí a mano,
esto lo podemos quitar.
Y lo que podríamos hacer aquí, por ejemplo,
pues es decirle que esto es bold.
Lo mismo, vamos a hacer que todos utilicen este componente.
Con la diferencia que vamos a poner que este sea small,
este sea small, este sea small.
Venga, estos sean todos small.
Esta parte sea big, este sea blue, este sea bold y este sea blue.
Por poner algo.
¿Vale?
Guardamos los cambios.
Y a ver, sé que ahora mismo eso parece un poco rollo, ¿no?
Pero fíjate, el de arriba, pues es grande y bold.
Pues como lo habíamos puesto.
El de abajo es blue.
El tercero es bold.
El cuarto es blue.
Estos son small.
Con esto lo que estamos haciendo es justamente crear diferentes tipos de componentes
del mismo componente.
Composición de toda la vida, para estos React, justamente, ¿no?
Para el tema de la composición.
Esto está muy bien, pero ya podemos ver que tenemos aquí un montón de valores
que son un poco, que están aquí puestos a fuego.
Esto tampoco es recomendable.
Vamos a ver cómo lo podemos arreglar.
Y vamos a crear nuestro definitivo text en condiciones.
Vamos a ver cómo podemos utilizar un tema o un theme en nuestro caso.
Bueno, en source vamos a crear un archivo que le vamos a llamar theme.js.
Y aquí tenemos una constante que es un objeto que se llama theme.
Vamos a tener colors.
¿Qué colors vamos a tener?
El text primary, que puede ser un hexadecimal, que sea 24, 29, 2e.
Vamos a tener un text secondary.
Ese color mismo, bueno, yo tengo otro por aquí apuntado.
Pues vamos a utilizar el que tengo apuntado para que me quede como lo tengo en la mente,
el color de todo.
Vamos a tener otro primary, pero que no sea para el texto, sino que sea un primary en general.
¿Vale?
Estos sean nuestros colores.
Podemos tener font sizes.
Y en font sizes, pues el body, que sea de 14, por ejemplo.
Y el subheading, y aquí podemos tener diferentes títulos, los que queráis.
¿Vale?
Fuentes.
Por ahora vamos a poner aquí que vamos a tener la fuente del sistema.
Luego veremos más adelante que esto es interesante,
por cómo lo podemos cambiar para cada uno de los dispositivos.
Y por qué es interesante también un theming,
qué nos ayuda para iOS y para Android y todo esto.
Y el bold lo vamos a dejar así a 700.
Ahora que tenemos este theme, lo que podemos hacer justamente es ir a nuestro style text.
Y ahora, así os lo he hecho un poco a saco para ver un ejemplo de cómo podemos componer estilos.
Pero ahora vamos a hacerlo un poquito mejor.
Vamos a importar el theme, from theme.js.
Y ahora del theme, pues vamos a estilar.
Vamos a poner que el color, el color, vamos a poner que por defecto sea theme.colors.textprimary.
Por defecto.
Vale, luego vamos a tener theme.fontsize.
Ay, espérate, porque es que, vale, es que no me estaba haciendo el autocomplete
y es porque no he hecho un export default de esto.
Vale, ya decía yo.
Digo, a ver, a ver, que no me está diciendo cómo es esto.
A ver ahora, theme.
Bueno, tampoco me...
Ahora sí.
Vale, está aquí.
Fontsize.medium.
Por decir, o .medium, era .body.
Espérate.
.body.
Fontsizes.
Me está haciendo un autocompletado de aquella forma.
Font family.
Este sí, fonts.main.
Font height.
Pues vamos a poner aquí theme.fontheize.bold.
No, .bold no, .normal.
El bold solo lo vamos a dejar para el bold.
Vale.
El bold lo vamos a cambiar de nombre.
Bueno, podemos dejar igual.
Font height.bold.
Lo que pasa es que aquí vamos a dejarle theme.fontheize.bold.
El blue este no tiene mucho sentido tampoco.
Big.
En lugar de big le ponemos subheading.
Vale.
Y aquí ponemos que el font size sea theme.fontsizes.subheading.
El small lo podemos dejar...
Bueno, no le he puesto ningún small.
Tampoco lo vamos a facilitar.
Vamos a poner los colores.
El primary del texto va a ser color.
Theme.colors.
Themes.colors.textSecondary.
Y creo que ya está.
Primario, secundario, el subheading y el bold.
Vale.
Cambiamos esto en un momentito.
Solo que ahora la diferencia de todo esto que habíamos hecho aquí
es que el color se lo vamos a poder pasar para tener primario,
secundario, lo que sea.
Así que se lo pasaremos como un string.
Vamos a tener el children, vamos a tener color,
le vamos a poder pasar el font size, el font height y vamos a hacer
que también desde fuera este componente se pueda estilar.
Y vamos a recuperar el resto de las props y esto es una buena idea
para que se pasen al componente de este de text.
O sea, este resto of props se lo vamos a pasar aquí, así.
¿Vale?
Para que este componente, si le pasamos props que no estamos controlando aquí,
pues igualmente se las pasa el text por si el text las soporta por X motivo.
¿Vale?
TextStyles.
Vale.
Si el color que nos pasan como prop es el primario, pues nada.
Styles.color.primary.
Si el color que nos pasan es secundario.
Esto normalmente también a la larga hay otras formas de hacerlo.
Si empieza a hacerse muy, muy grande.
Pero bueno, por ahora vamos a hacerlo así para tener nuestro font size.
Subheading.
Subheading.
Y el font, mira, maravilla.
El auto completado.
Fontwaite bold.
Y entonces tendrá el estilo del bold.
Vamos a adaptar nuestro, otra vez, nuestro estilo de lo que tenemos aquí.
Todo lo que nos ha hecho esto.
Y ya lo dejaremos así.
Y pasaremos a estilar y a hacer el tema de flex.
¿Vale?
Vale.
Vamos a poner esto.
Bueno, props ID, esto para empezar lo vamos a quitar.
¿Vale?
Porque la ID no la vamos a estilar.
Luego full name.
El full name sí que lo vamos a dejar como negrita.
¿Vale?
Y por ahora lo vamos a dejar así.
No pasa nada porque todo lo demás...
Bueno, a ver.
Vamos a poner el sub font...
Vamos a poner el font size.
Font size subheading.
Esto así.
Le vamos a quitar el full name, que esto no tiene mucho sentido.
Y le vamos a quitar la descripción por aquí.
Y luego lo estilaremos un poquito mejor.
¿Vale?
Por ahora ya estamos utilizando nuestro style context.
Vale.
Con esto ya podríamos estar con el text y tal.
Pero vamos a parar ya con el text porque no tiene mucho sentido.
Lo que vamos a ponernos es con el tema del flex.
Porque flexbox, no sé si lo conoces.
Si no lo conoces lo vas a tener que estudiar porque todo en...
O sea, flexbox es la base para estilar en React Native.
Si no lo conoces y no tienes ni idea, yo lo que te recomiendo es que juegues al flexbox froggy este, que es la bomba, y te va a ayudar a entenderlo, a conocerlo, a dominarlo.
Y es súper importante que lo hagas para React Native.
O sea, súper importante.
Porque ya verás que todo, todo, todo se hace con flexbox.
Y tienes que conocerlo bien porque si no te vas a liar mucho.
Entonces, vamos a utilizar flexbox, que es, como te digo, la base.
Si no conoces flexbox, básicamente lo que dices es que tú tienes un contenedor flexible y dentro tienes elementos.
Y esos elementos, pues dependiendo de la configuración que le pongas, siguen un flujo diferente.
Normalmente va por columnas, o sea, va por filas, rows o columnas.
Y también puedes utilizarlas en reverso.
O sea, que vayan al revés o que vayan de abajo a arriba, de arriba a abajo, de derecha a izquierda o de izquierda a derecha.
Aparte de todo esto, puedes hacer que se alineen hacia un eje dependiendo de cómo lo quieras.
Si se ha centrado, por arriba, abajo y todo esto.
Lo vamos a ir viendo ahora, mientras vamos estilando.
Así que no te preocupes si no lo ves muy claro.
Pero ten en cuenta eso, que todos los views que tú ves en React Native, todos, tienen por defecto un display flex.
Súper importante.
Tienes que dominar el display flex.
Lo vamos a hacer.
Vamos a ver, por ejemplo, vamos a estilar el force, el review y el rating.
Vamos a ver cómo lo podemos hacer.
Bueno, y el stars.
Vamos a hacer esto.
Y vamos a empezar a darle un toquecito a nuestra app, que ya le toca, que se está viendo exactamente igual.
Y seguramente la gente está diciendo, me habían prometido que aquí íbamos a verlo de alguna forma.
Bueno, pues vamos a verlo.
Aquí, ves, tenemos estos cuatro.
Vamos a sacarlos de aquí y vamos a cambiarlo.
Vamos a llamar a esto repository stats.
Y a este le pasaremos todas las props para que tenga la información.
Y por ahora lo voy a crear aquí, repository stats, porque no es muy importante dónde se cree.
Y así iremos un poquito más rápido a la hora de hacerlo.
Por ahora voy a hacer que devuelva exactamente lo mismo.
Lo que estaba devolviendo, pues esto.
Lo que pasa es que, como puedes ver, pues no puedes devolver los cuatro, sino que tienen que estar envueltos por un solo elemento.
En este caso el view.
Ahora mismo se ve igual.
O sea, es lo mismo.
Pero vamos a hacer un poquito de magia.
Voy a hacer con los estilos en línea, pero más adelante lo vamos a hacer bien.
Para ir probando, pues puedes hacer los estilos en línea y luego ya los sacarás en el style, en condiciones.
Para empezar, la vista, lo que voy a querer es que estén en fila, ¿vale?
Y que se vean uno encima, o sea, uno al lado del otro.
Quiero que salga stars, false, review y routing uno al lado del otro.
Por lo tanto, si quiero que se vean uno al lado del otro, quiero que vaya de izquierda a derecha.
O sea, que quiero que vaya como si fuesen filas.
O sea, quiero que la dirección sean filas.
Así que aquí hay que ponerle row.
Porque por defecto, y esto es algo que también es diferente en RealNative, la dirección es column.
Esto en HTML es al revés, justamente.
Vale.
Y ahora por ahora vamos a poner que justify content.
El contenido, como se tiene que justificar, es que deje espacio alrededor.
Para eso le ponemos space around.
Bueno, ya veis que hay diferentes, pero bueno, por ahora hacemos este.
Vale.
Ahora mismo no se ve muy bien, pero ya puedes ver que justamente estos de aquí se ven de izquierda a derecha.
En lugar de verse de arriba a abajo.
En lugar de estar en columnas, ahora está por filas.
Vamos a mejorar un poco esto.
Y vamos a ver cómo funciona exactamente Flexbox.
Lo que vamos a hacer es que vamos a separar en cada uno de los textos, vamos a tener vistas dentro.
O sea, vistas fuera, que va a estar envolviendo el texto.
De esta forma, lo que vamos a hacer que vaya de izquierda a derecha, en realidad, va a ser la agrupación en una vista de el texto donde vamos a tener stars y otro texto más,
que vamos a tener justo debajo, donde vamos a tener justamente una propiedad con la cuenta de stars en este caso.
Bueno, esto lo vamos a repetir con el resto.
Vamos a tener aquí el view, aquí otra vez otro view, y aquí otra vez otro view, ¿vale?
¿Qué vamos a hacer aquí?
Movemos esto para aquí, esto lo abrimos aquí, lo movemos aquí, esto aquí y esto aquí.
Vamos a repetir.
Mira, ya se va viendo un poco, ¿ves?
Que se va viendo que va quedando ahí mejor.
Vamos a separar este.
Está el text.
Entonces, le vamos a poner el props este.
Aquí lo mismo, vamos a sacar este y lo vamos a poner abajo.
Y aquí, este es un buen ejemplo para que veas justamente cómo trabaja Flex y cómo está incidiendo la dirección en cada uno de los ejemplos.
Vale, fíjate, esto es justamente un poco el diseño que tengo en mente.
Todavía habría que darle un poquito, por ejemplo, aquí, aquí, ahí, perdón, que la he liado.
Aquí, aquí, aquí, aquí.
Y aquí vamos a hacer que tenga un font height.
Height no, font weight.
Dios mío, qué buena pronunciación.
Ahora, perfecto, un poquito mejor.
Ya se ve un poquito mejor.
Ahora, lo que...
Podremos alinearlo, el texto y todo esto, pero por ahora vamos a dejar así.
Lo importante es que quiero que veas que esta vista, le he dicho que la dirección tenía que ser row.
Y justamente estas vistas que está envolviendo, estas cuatro vistas, van de izquierda a derecha.
Este stars, con sus números, es una vista.
Force y 3123 es otra vista.
Review es cero, es otra vista.
O sea que van de izquierda a derecha.
Pero dentro de esta vista, también tiene elementos.
Esto tendría un display flex, pero aquí, por defecto, está teniendo esto aquí.
Así, de esta forma.
Por eso, aquí estamos viendo que dentro de esta vista, stars está arriba y el número de estrellitas está abajo.
Por eso mismo lo estamos viendo así.
Y por eso funciona justamente como estábamos esperando.
Esto, para que lo tengas claro.
Y cómo se compone Flexbox cuando estamos trabajando en RealNative.
Suele ser un poco rollo en el caso de que muchas veces no te sale justamente lo que querías.
Pero bueno, para que lo sepas.
Ahora que tenemos esto, lo que podríamos hacer también, por ejemplo, sería todo esto.
Todas estas, está el text, está el text.
Vamos a hacer, está el text.
Podríamos poner align center, por ejemplo.
Y esto, pues lo podríamos añadir en style text.
Vamos a ponerle un align que si es igual a center, pues ponemos styles text align center.
Y esto se lo ponemos aquí en los estilos.
Text align center.
Y de esta forma, ahí, ha liado, que no he puesto aquí el align.
Vale, ya está.
¿Ves?
Ahora queda alineado y queda perfecto.
A ver, podríamos hacer un toquecito ya, que sería la bomba, que sería parsear los thousands, estos que salen un poco raros ahí.
Pues los vamos a parsear con el valor.
Lo que vamos a hacer es que si el valor es mayor o igual a mil, pues lo que podemos hacer...
Uy, a ver, ¿qué me recomendaba esto?
No, no está mal.
Podemos hacer un math round donde el valor lo dividimos entre 100.
Luego, mira, eso sí, entre 10 y luego le ponemos una K.
¿Para qué sirve esto?
Esto básicamente lo que estamos haciendo es que vamos a hacer que aparezca 52 punto lo que sea.
52.8 K en lugar de que aparezca todos los números, que se ve un poco raro.
Y ahora esto, pues podríamos aquí, pues, parsear todos los miles de este.
Del force count también.
De las reviews, bueno, de estos no hace falta como tal, pero bueno, vamos a quitarlo.
Vale, ¿veis?
Que ahora se ve así.
Pues ya estaría.
Con esto ya teníamos parseado y ya se empieza a ver un poquito mejor.
Lo ideal, pues ahora esto sería extraerlo en un componente.
Vale, ahora que ya lo tenemos listo, pues nada.
Hacemos un repository stats punto jsx.
Input React from React.
Ya tenemos todo esto.
Export default repository stats.
Vale, y aquí importamos nada.
La vista.
The real native.
Y el style text.
Style text.
Y ya está.
Ya lo tenemos importado.
Solo nos faltaría importarlo aquí también.
De repository stats.
Y ya está.
No quiero perder tiempo haciendo otra vez el style sheet y tal, pero ya os podéis imaginar que tendríais que hacer esto en un style sheet y todo esto.
¿Vale?
Solo que lo tengáis en cuenta.
Esto lo podríamos poner, ahora que lo veo, lo podríamos poner más bien al revés.
Creo que queda mejor al revés.
Pero bueno.
O sea, tener arriba la cuenta.
Vamos a hacer esto.
Vamos a hacer esto.
Pam, pam.
Pam.
Esto lo movemos.
Esto lo movemos.
Esto aquí.
Esto aquí.
Esto aquí.
Ya veréis que en un momento le vamos a dar una vidilla a esto.
Que vaya.
Por ejemplo.
Ahora vamos a estilar el del HTML.
¿Vale?
El del HTML.
Esto lo podemos hacer también súper rápido aquí.
Tendríamos aquí el language.
Y vais a ver algunos estilos que son un poquito más especiales.
Entre comillas.
¿Vale?
Vamos a ver.
Podemos hacer aquí.
Simplemente este sí que lo podemos hacer con los estilos.
Esto lo podemos hacer aquí en un momento.
No hace falta ni siquiera.
Mira.
Language.
Le vamos a poner un padding.
Y vais a ver un error que vamos a tener aquí.
Vamos a ponerle style.
Styles.language.
¿Vale?
Vamos a ponerle un poco de espacio.
Vamos a poner un color.
Colors.white.
Creo que no tengo un white.
Lo añadimos.
Nos vamos a los colores.
White.
Vamos a poner.
¿Por qué se estila?
Claro.
Alguien puede decir.
Pero si es white.
¿Para qué lo pones en el theme?
Bueno.
Porque hay veces que el white para diferentes aplicaciones puede ser un casi white.
Podría ser algo así.
Por ejemplo.
De hecho, podemos ponerlo.
Sí.
O sea, hay veces que el white.
No hay un white puro en una aplicación.
¿Sabes?
Entonces, es como lo que entienden por blanco.
Pero bueno.
Si no os gusta, lo podéis hacer como prefiráis.
Nosotros lo vamos a dejar así.
Y ya está.
Luego.
El background.
Tened en cuenta que no podéis utilizar directamente background.
Esto os dará un error, seguramente.
Si intentáis utilizar colors.primary y directamente el background, esto, ¿ves?
Sospeta.
Background no es válido.
Hay que utilizar background color.
¿Por qué?
Porque no tiene sentido utilizar background.
Y que normalmente en CSS es como que tienes un montón de diferentes propiedades que puedes poner después.
Aquí no se puede.
Aquí tienes que ir una a una.
Así que background color, ¿vale?
Vale.
Lo que veo, style, es que todavía no me está estilando nada.
Vamos a seguir dándole...
Esto queremos que esté en el principio.
Vale.
Vamos a ver...
Espérate, porque esto no me está estilando mi estilo.
Styles.language.
Este, ahí estoy mi color.
Mi, mi, mi...
Ah.
Este style, text.
Style.
Vale.
Ya digo, ¿por qué no me está estilando esto?
Vale.
Porque antes en el style text, ¿veis que he puesto?
He sacado el style.
Pero no he hecho nada con este style.
Lo que podemos hacer con este style, justamente, sería ponerlo aquí.
O, si queremos que machaque todo lo demás, lo podemos poner aquí.
¿Vale?
Ponemos aquí una coma.
¿Ves?
Ahora sí que está pillando los estilos.
Este style es como lo que le permitimos.
Es que este componente tiene todas estas props, pero lo puedo estilar como yo quiero en ese momento.
¿Vale?
Entonces, vamos a poner esto.
Luego, aquí tendríamos...
Claro, aquí os quería enseñar este problema.
Este problema, ¿no?
Que al principio, como todo tiene flex, tenéis que tener en cuenta que si ahora le decimos al language que tenga este background color de primary, fíjate hasta dónde llega.
Entonces, hay diferentes formas de arreglar esto.
Pero yo creo que la ideal en este caso sería utilizar una line self y ponerla aquí, que es que sea flex start.
De esta forma, lo que hace es mover el elemento.
Todo sí mismo se mueve al principio de todo y solo ocupa el espacio que requiere.
También lo podrías mover al final, si quieres, o lo podrías dejar en el centro.
Esto como vosotros prefiráis.
Pero en este caso, pues, haces un flex start y ya el fondo solo utilizaría el espacio que necesita.
El elemento utilizaría el espacio solo que necesita.
¿Vale?
Yo te recomiendo mucho que te muevas con este tipo de cosas, con la line self y todo esto, porque si no, luego si intentas salirte, puedes posicionar de otras formas.
Pero creo que lo mejor es que lo hagas todo con Flexbox.
Vale.
El border radius también se puede utilizar, pero fíjate, ¿no?
Que esto me ha quedado exactamente igual.
Muchas veces en los textos, para que te aparezca correctamente el border radius, o en views y cosas así,
también tienes que acompañarlo de un overflow hidden, ¿vale?
Porque si no, se me ha olvidado la coma.
Si no, no aparece.
Bueno, ya le estamos dando vidita a esto.
Le estamos dando vidita.
Pero ahora nos queda el tema de las imágenes, ¿vale?
¿Por qué?
Porque las imágenes, pues, no estamos viendo ninguna imagen.
Y en cambio, en repositorios, tenemos imágenes, ¿vale?
Tenemos una imagen para mostrar.
¿Ves?
Owner, avatar, URL.
Pues, vamos a cargar una imagen.
Para ello, nos vamos a volver al item.
Y aquí, lo que vamos a hacer es añadir una imagen encima.
Hay un componente en React Native, como te podías imaginar, que ya nos hace el tema de la imagen.
Así que, lo vamos a hacer.
Lo vamos a poner arriba del todo.
Luego ya veremos cómo arreglamos esto.
¿Veis?
Ponemos image.
Y image lo vamos a importar de aquí, de React Native, ¿vale?
Image.
Ahora, vamos a poner styles.image.
Luego la estilaremos.
Vamos a ponerle, en este caso, source.
No src, ¿vale?
Source.
Hay que poner source.
Y en source es un poco especial también.
¿Por qué?
Porque en React Native se puede utilizar diferentes formas de cómo importar imágenes y entonces
ponérselas aquí.
En este caso, en nuestro caso, que tenemos una URI, que es una URL, una dirección, vamos
a ponerle la dirección.
Así que, se le pasaría aquí un objeto, ¿vale?
No se le pasa el string, sino que se le pasa un objeto.
Esto es diferente a cómo funciona en React DOM.
Y en este caso, le pondríamos una URI y la URI la vamos a sacar de props.
Props.
Y aquí, en repo, podríamos ver en repositories, en toda esta información, ¿ves?
Owner, avatar URL.
Pues ese es el que queremos.
Pues lo vamos para aquí.
Props. Owner, avatar URL.
Con esto, deberíamos cargar nuestra imagen.
¿Pero qué pasa con esta imagen?
Aunque la imagen parece, debería estar ahí, no se ve.
¿Por qué no se ve?
Porque no la hemos estilado.
Uno de los problemas que puedes encontrarte en React Native es que no sabe qué espacio
tiene que ocupar una imagen.
Por lo tanto, tienes también un montón de alternativas.
Pero, en este caso, lo mejor, en este caso en concreto, es que le digamos lo que tiene
que ocupar.
Es que le digamos, mira, la imagen, te la voy a estilar.
Pues mira, width de 48, height de 48.
Vamos a poner margin auto.
No sé si esto es margin auto.
Igual no es necesario.
Ahora veremos si no.
Border radius de 4.
Y lo vamos a guardar, ¿vale?
Y ahora sí que tenemos nuestra imagen.
Con eso, ya tenemos nuestra imagen y ya estaría.
Hay otras formas de que lo podríamos hacer.
De hacer que ocupe un espacio y luego que la imagen se utilice como fondo.
Pero creo que esta sería la forma más correcta, sobre todo en este ejemplo, ¿vale?
Ahora que ya tenemos la imagen, pues ya podemos estilar mejor esto, ¿no?
Porque tenemos la imagen, tenemos esto y tal.
Vamos a ver flex, pero al revés.
En lugar de hacerlo por filas, vamos a ver cómo lo podríamos hacer como por
por columnas y vamos a hacer una típica card.
Vamos a hacer en un momentito, ya verás.
Vamos a separar.
¿Ves que tenemos aquí la imagen, el subheader, el description?
¿Vale?
Y el language, todo esto, todo esto lo vamos a sacar de aquí.
Le vamos a llamar repository item header.
¿Vale?
Y le pasamos todas las props.
A ver, antes de que alguien se me ponga nervioso, con el tema de pasarle todas las props.
Ahora os explico una cosa.
Vale, esto por aquí.
Ay, no, es que no hace falta el return.
Que ya lo tengo así.
Vale.
Esto aquí.
Y aquí le vamos a poner una view, porque si no, esto no funciona.
Vale.
A ver, esto de pasarle todas las props, yo normalmente no soy muy fan.
¿Qué es lo que puedes hacer aquí?
Pues al item header, aquí, pues lo que puedes hacer es una de dos.
Bueno, esto también, lo que estoy haciendo es copiar y pegar y ir rápido.
Si no, lo que puedes hacer, si tienes todo el tiempo del mundo y te gusta, que me parece bien,
sería aquí de estructurar y poner owner avatar URL, full name, description, language.
Vale, y te quitas de aquí toda la vez todas las props.
Vale, te las quitas de aquí y ya está.
Esto por un lado.
Luego, por otro lado, esto mismo, en realidad, en lugar de pasar aquí todas las props,
una cosa que podrías hacer es sacarlas de aquí y solo pasarle lo que fuese necesario.
Pero bueno, en este caso lo estamos haciendo así, porque total, esto así nos queda bastante cortito,
bastante limpio, y luego que sea aquí donde estamos desestructurando las props.
No sé si alguien lo había comentado por ahí, pero ya lo sabe.
¿Qué más podemos hacer?
Vamos a estilar mejor la card, la vamos a dejar para lamerla, que está ahora mismo,
que está un poquito a la pobre, de aquella forma.
Entonces, vamos a hacer la view, vamos a estilar, y lo que vamos a hacer aquí
es algo diferente.
Vamos a hacer una card, ¿no?
Y vamos a dejar la imagen a la izquierda y a la derecha.
O sea, quiero dejar la imagen aquí donde está, pero el midf, el bloc de noticias de HTML,
ponerlo a la derecha.
Bueno, pues esto es un poco parecido a lo que hemos hecho antes, porque vamos a querer
que sea row.
Vamos a poner un padding bottom de 2 para que tenga separación un poquito con lo de abajo.
¿Vale?
Ahora esto queda así.
No sé exactamente lo que quiero.
¿Por qué?
Porque cuando le he puesto el row, pues ahora todos los elementos están en fila.
Y yo no quiero esto.
Yo lo que quiero es que sea la imagen y la otra vista, que es la que va a tener todos
los demás, los que estén en fila.
Así que lo movemos así.
Solo con este cambio, fíjate, ya esto empieza a tener un poquito más de buena pinta.
Lo mejor aquí, a lo mejor para dar este a separación, pues podría ser aquí en el
view, pues tener un estilo y que tenga un padding left, que sea, por ejemplo, 4 y hacer algo
así, ¿no?
Y ya empezamos a separarlo.
Yo no sé, vamos a ponerlo un poco más.
Pero te vas a encontrar diferentes problemas.
Aquí, bueno, ¿ves aquí que hay un problemilla ya que sale ahí?
Bueno, no pasa nada.
El tema es que tenemos que decirle exactamente que el espacio que tiene que ocupar este view
tiene que encajar dentro de esta vista de aquí, ¿vale?
¿Cómo lo podemos hacer?
A este view lo que le podemos decir es que tenga un flex grow de 1, ¿vale?
Y a este de aquí la imagen la podemos grapear con otro y le vamos a decir que tenga 1 de 0, ¿vale?
Bueno, en este caso, ay, padding left, me ha puesto una S aquí, ¿vale?
Y le vamos a decir que este tenga flex, he puesto flex grow, le voy a poner flex 1 porque
tampoco, ya les explico esto, ¿vale?
Flex, esto de 0, perdón.
Ay, ¿qué me ha hecho esto?
Espérate, ¿qué me está haciendo esto?
Espérate, que me la ha liado.
La he liado yo con los flex.
¿Ves con los flex cómo los carga el diablo?
Lo he dicho, que los flex los carga el diablo.
A ver, espérate, ¿qué he hecho?
¿Por qué ahora me he cargado esto?
Esto ha sido por el flex este que he puesto aquí.
Espérate, ¿qué he hecho?
Bueno, este flex direction esto da igual porque es exactamente lo mismo.
Lo malo de este flex 0 es que me parece que React Native Web no funciona correctamente.
A ver, vamos a darle para atrás para dejar el padding left.
Que bueno, ahora que he hecho esto, esto lo podríamos poner aquí y ponérselo como right.
Y esto dejarlo aquí, así.
¿Vale?
No sé por qué ahora me pasa esto, pero bueno, está bien descubrir cosas, ¿vale?
Bueno, pues nada.
Ahora me está dejando loco.
Me está dejando loco.
No sé si es por el tema este del...
Del loco.
Qué raro.
A ver, vamos a refrescarlo.
Pero sí, no, no.
¿Ves?
Ahora sí que funciona bien.
Qué raro.
¿Habéis visto que se quedaba como blanco?
Pero veis, ahora sí que ha funcionado correctamente.
O sea, he hecho un refrescar.
Hay veces que a lo mejor el far refresh se vuelve loco.
Pero veis, ahora he refrescado con el flex 1 este y ahora sí que ha hecho el salto.
Esto es lo que le estamos diciendo con flex 1.
Básicamente es que ocupe todo el espacio y que además haga el salto de línea en el caso de que no ocupe.
De que llegue un momento en el que en la caja no llegue a ocupar.
O sea, no llegue a tener suficiente espacio.
Pero no sé por qué antes me estaba dejando como eso en blanco.
Yo supongo que era un problema del far refresh.
Con esto, lo que estamos diciendo de alguna forma es que esta vista que tenemos aquí,
esta que será la imagen, pues que se quede como está y el otro que ocupe todo el espacio que pueda.
Y con esto ya deberíamos tener el salto de línea ese que teníamos, pues más que arreglado.
Podríamos hacer algunos detallitos más.
Por ejemplo, lo del justify content y todo esto.
Bueno, en este de aquí, que ahora me da miedo tocarlo porque lo podríamos centrar.
Que tampoco es que se vea ninguna...
No sé si...
No, justify content.
Pero bueno, claro, es que tampoco...
No sé si se nota mucho.
No, es que no se nota...
No se ve nada.
Bueno, podemos darle un poquito de espacio, si os parece,
que queda un poco muy pegado todo.
Por ejemplo, tendríamos aquí el font, el full name.
Este lo vamos a poner en negrita.
Este lo vamos a poner con el color secundario.
Y el language le podríamos dar más espacio.
Es que tenemos el padding este.
Podríamos poner margin top 4 y margin bottom 4.
Bueno, y al menos ahora sí tenía un poquito más de espacio.
¿Vale?
Ha mejorado un poco, ha mejorado un poco.
Vale.
Ahora podríamos volver a sacar todo este componente,
sacarlo fuera, item header y bla, bla, bla.
Pero ya sabéis que os podéis volver ahí todo lo que queráis.
Luego, es verdad, cuando tenéis este tipo de cosas,
margin top, margin bottom,
o antes habéis visto que he hecho padding bottom, padding top,
una forma de hacer este, porque si no es un rollo,
esto sería para utilizar todo, arriba, derecha, abajo, izquierda.
Y luego hay veces que quieres solo cambiar uno de los dos.
Si quieres cambiar los dos a la vez,
lo que puedes hacer es utilizar margin y utilizar el vertical.
¿Vale?
Que este sería el de arriba, abajo.
O el horizontal y cambiar justamente los que serían de izquierda, derecha.
Y con esto, ay, perdón.
Con esto tendríamos arriba y abajo de una forma mucho más sencilla.
Es como un shortcut, ¿vale?
Y aquí igual.
Ten en cuenta que esto no está en HTML, en CSS.
Así que ten cuidado.
O sea, luego no te lo intentes llevar a tu CSS.
Vale, muy bien.
Pues, a ver, ya estamos estirando esto un poco,
pero justamente para antes de pasar a utilizar lo que sería enrutamiento,
vamos a hacer el último componente visual que vamos a necesitar aquí,
que va a ser la app bar.
¿Vale?
Lo que vamos a hacer es una pequeña top bar aquí arriba,
o app bar, o como le quieras llamar,
donde vamos a ver dónde estamos, dónde podemos ir y todo esto.
Así que vamos a crear la app bar.
Vamos a crear aquí un nuevo componente, app bar.jsx.
Y vamos a importar React desde React.
Además, vamos a ver qué problemillas nos encontramos con esto,
que es bastante interesante también con el tema del scroll,
hasta dónde llega el viewport y todo esto.
Cómo separarlo de arriba.
Vale, vamos a traer el style text.
Nuestro componente style text.
Vamos a importar las constantes porque vamos a necesitar ver justamente
hasta dónde llega este espacio que teníamos aquí.
Lo vamos a necesitar aquí también.
Y lo vamos a quitar del otro lado.
Y vamos a importar el theme.
Vamos a crear los estilos.
Styles de stylesheet.create.
Luego veremos un poco cómo estilamos esto.
Vamos a crear la app bar directamente.
Aquí luego vamos a tener los enlaces cuando hagamos en el enrutamiento.
Tenemos la vista, style.
Vale, style, subbar me gusta, me parece bien.
Vale.
Y dentro, al menos por ahora, vamos a poner un style text.
Style text.
Me encanta que me pone title.
Vamos a ponerle text y font height.
Vamos a ponerle board.
Y en el texto vamos a poner que estamos repositories,
que es donde estamos ahora mismo.
Vamos a hacer un export default de app bar.
Vale.
Y vamos a importar de real native view,
que no sé por qué por ahí no salía.
Y el theme y las constantes la utilizamos ahora.
Para la app bar.
¿Vale?
Este estilo...
Bueno, vamos a llamarle container porque total es un contenedor.
No hace falta que sea semántico el estilo, ¿vale?
O sea, ¿qué más da?
O sea, vamos a poner background color, theme, app bar.primary.
Esto ahora lo pondremos en el theme a ver qué información necesitamos.
El padding top, aquí podemos hacer un cálculo.
Que vamos a decirle que las constantes...
Vamos a leer el status bar height para saber el espacio.
Y vamos a dejarlo un poquito más de espacio.
O sea, por arriba vamos a dejar que tenga bastante espacio,
pero que no se ponga por debajo del status bar.
Y en el bottom lo que vamos a hacer es nada.
Dejar un poquito de espacio, padding left, igual, un poquito de espacio.
Y con el texto vamos con un color theme.appbar.primarytext.
Va.
O...
Primary text, venga.
Me gusta.
Venga.
Y esto aquí.
Ahora sí que no hay ningún problema.
El único problema es que en el theme tenemos que añadir justamente lo que hemos dicho, ¿no?
En el appbar.
Appbar.
Vamos a tener el primary.
Que esto puede ser un color así, 24, 292.
Como medio oscurito.
El text primary que sea blanco.
Este componente no lo estamos viendo todavía, ¿eh?
O sea, lo vamos a poner ahora.
¿Dónde lo ponemos?
Lo vamos a poner en el main.
Aquí teníamos el view con este margin top.
Todo este margin top ya no es necesario.
¿Por qué?
Porque ahora ya este margin top no vamos a querer que esté aquí.
Lo que vamos a querer en este view por ahora es poner la appbar.
Ahora vais a ver que, claro, la appbar va a quedar como un poco espaciada ahí.
No tiene sentido.
Venga.
Appbar.
Vale.
¿Veis que ahora está este hueco aquí?
Claro, no tiene sentido que esté ese hueco aquí.
Así que este margin top, fuera.
Y este constants, fuera.
Al menos aquí.
Ahora sí que estará aquí la appbar.
Este repositorio nos ha quedado negro.
No sé por qué.
Vamos a ver un momento la appbar.
Porque parece que ha quedado...
Este theme.appbar styles.text.
Vamos a ver.
Teníamos aquí un...
No.
Styles.text.appbar.
Primary text.
Yo es que creo que era text primary.
Ahí está.
Ahora sí.
Bueno, ya tenemos esto.
¿Vale?
Luego esto más adelante lo cambiaremos.
Lo haremos que quede bien.
Que ahora veis que queda aquí negrito y tal.
Pues ahora.
¿Os acordáis que os he dicho antes?
Bueno, que es que esto se podía ver en el móvil y que no sé qué.
A ver, ahora ya empieza a tener esto un poquito mejor pinta.
Así que vamos a ver si lo podemos ver.
Efectivamente.
¿Veis?
Que lo estoy viendo en tiempo real en mi móvil.
A la vez que lo estoy haciendo.
De hecho, qué bien se ve en el móvil.
Se ve súper bonito.
Se ve más bonito que ahí.
Me da ganas de utilizar la aplicación y todo.
Vale.
Entonces.
Vale.
Ya hemos quitado el margin top.
Ya tenemos esto.
Bueno, fíjate que ahora tengo este problemilla de aquí.
Este problemilla que está dando ahí un saltito.
Ese es el problema que os comentaba antes.
Que en este caso.
Creo que lo teníamos que arreglar aquí en el mail.
No sé si era.
Hostia.
Otra vez ha quedado.
Otra vez ha quedado.
Vale.
Ya está.
Le ponéis aquí el flex a uno.
Y veis.
Ahora sí que llega hasta abajo del todo.
Que antes no estaba llegando.
Y ahora sí que funciona correctamente.
Y lo podemos scrollear.
Y todo esto.
Vale.
Con esto.
Pues nada.
Podríamos estilar un poco mejor las cars.
Le podríamos dar más espacio y tal.
Pero bueno.
Yo creo que hemos tenido suficiente.
Hemos tenido suficiente ya de estilar.
Así que vamos con el router.
Si os parece.
¿Vale?
Vamos a hacer el router.
Vais a ver un problema que me va a dar.
Sobre todo con React Native.
De hecho no he mirado en React Native Web.
No he mirado cómo va quedando en React Native Web.
Pero lo podemos ver.
¿Veis?
Esto es React Native Web.
Parece que más o menos va funcionando correctamente.
Esto lo ideal.
O sea.
La aplicación que estamos haciendo.
Esto significa que podríamos deployarla a una página web.
Sin ningún problema.
Gracias a React Native Web.
Vamos a ponerle por ejemplo un Moto G4.
¿Vale?
¿Lo veis?
Aquí lo tenemos.
Lo que pasa es que aquí funciona al revés.
Ah no.
No funciona al revés.
Funciona a ver.
Pero bueno.
Aquí tendríamos justamente.
¿Ves?
Aquí no está dejando ningún espacio en el status bar.
Que aquí sí.
Porque no tiene.
Así que.
Perfecto.
Vale.
Ahora vamos a encontrarnos un problema que no es típico.
Pero como está en beta.
Pues lo vamos a tener.
Y bueno.
Puede ser interesante que lo sepáis arreglar.
Por si os encontráis con el problema en algún momento.
Hay diferentes formas de enrutar una aplicación de React Native.
De hecho.
En Expo.
Creo que la.
La que.
A ver si aparece por aquí.
No.
Creo que la forma recomendada en Expo.
Es utilizar React Navigator.
Expo.
React Navigator.
Creo que es.
O Navigation.
Ahora no me acuerdo.
Routing and Navigation.
¿Lo ves?
Recomendation.
React Navigation.
Y React Navigation está bastante bien.
Pero no vamos a utilizar React Navigation.
Como hemos estado viendo.
React Router.
Vamos a utilizar React Router Native.
Y además.
Así podéis aprovechar todo lo que habéis aprendido en el Full Stack Book Camp.
Pero bueno.
Pasar de uno a otro no debería ser complicado.
Y me parece interesante que aprendamos React Router Native.
Porque tiene un problema.
Y lo vais a ver.
¿Ok?
Entonces.
¿Qué es lo que tenemos que hacer?
Lo primero que vamos a hacer es instalar la dependencia que necesitamos.
Que es React Router Native.
Funciona exactamente igual que React Router.
Exactamente igual.
Vas a ver que eso tiene.
Bueno.
Tiene sutiles diferencias.
Muy sutiles.
La instalamos.
Vamos a nuestra aplicación.
Nos vamos a la app.
Vámonos aquí a la app.
Y vamos a hacer un Import Native Router.
Fíjate que esta es la diferencia.
¿Qué pasa?
Que normalmente.
Cuando utilizamos React Router.
Utilizamos el Browser Router.
Pero aquí no tenemos Browser.
¿Vale?
Así que aquí utilizamos el Native Router.
Y ahora nuestra aplicación.
Lo que vamos a hacer es envolverla del Native Router.
Pero.
¿Qué va a pasar?
Que cuando nosotros guardemos este fichero.
Esto funciona bien.
Pero.
Si vamos a React Native Web.
Deja de funcionar.
Aquí tienes dos opciones.
Una.
Deja de utilizar React Native Web.
Porque no te importa.
No te importa la vida.
No te importan los errores.
No te importa que falles las compilaciones.
Duermes bien por las noches con el rojo.
Está bien.
No pasa nada.
O también.
Lo que puedes hacer es arreglarlo.
A enfrentarte al problema.
Y salir victorioso o victoriosa.
Leemos el problema.
Fail to compile.
Vale.
Nos dice que ha fallado a la hora de parsear el módulo.
Y que.
Tiene un unexpected token.
Unexpected token es que ha encontrado un símbolo que no le ha gustado nada.
Y que no lo entiende.
Y te dice.
You might need an appropriate loader.
Esto es el típico error de Webpack.
De hecho ya veis ahí la palabra Webpack.
Y si vamos mirando.
Y vamos mirando.
Veis aquí que dice.
Justamente.
Podemos ver que el error está en el native router.
Y está en el no modules y tal.
Vale.
¿Cuál es el problema?
El origen del problema de aquí.
El problema es que las aplicaciones.
Cuando se ejecutan en iOS o en Android.
Se compilan y se empaquetan.
Y los no de modules.
O sea las dependencias.
También las compila.
Y aquí.
Por eso este react router native.
Da por hecho que va a ser compilado.
Pero no.
No lo va a ser.
Porque react native web.
No sé por qué motivo.
No lo hace.
No sé si está hecho a posta.
No sé si es un error.
No tengo ni idea.
No me meto en las decisiones de terceros.
El caso.
Es que se puede solucionar.
La solución.
No es súper fácil.
Pero yo te la voy a explicar para paso a paso.
Así que haces un npm install de expo barra webpack guión config.
Y lo guardas como dependencia de desarrollo.
¿Vale?
Mira.
Veis que aquí además tenemos el mismo error.
Que ya nos está avisando.
Esto lo que nos va a permitir básicamente es extender la confusión por defecto de expo.
Para eso vamos a irnos a nuestro proyecto y vamos a crear aquí un archivo que es webpack.config.js.
Vamos a crear un archivo de configuración de webpack.
Pero no te preocupes que no tiene mucha historia.
Vamos a requerir el módulo path para los paths.
¿Vale?
Vamos a requerir este create expo webpack config async.
¿Vale?
Y vamos a requerir justamente el paquete que acabo de instalar.
Expo webpack config.
Cerramos aquí.
Ahora hacemos un módulo expo.
Aquí porque en webpack en la configuración.
Bueno.
Estoy utilizando common.js.
Porque seguramente así no me va a dar ningún problema.
Pero no sé si utilizando en Macri Modus debería funcionar.
En principio así funcionaría seguro.
Yo creo que seguramente daría problemas.
Si lo intentábamos utilizar en Macri Modus.
¿Vale?
Ahora lo que estamos haciendo aquí es exportar la configuración de webpack.
Tiene que ser asíncrona.
Ahora veréis por qué.
Y aquí recibimos tanto el environment.
Que es un montón de configuraciones y tal.
Como los argumentos que se utilizan para inicializar la configuración.
Bueno.
Vamos a recuperar la configuración.
Utilizando el create expo webpack config async.
Que es el que hemos importado.
Y le pasamos justamente estos dos parámetros.
El de environment y los argumentos.
Y aquí tendríamos nuestra configuración.
Ahora está la configuración justamente que queremos extender, modificar.
Llámale como quieras.
Vamos a hacer un config.modul.rules.push.
Esto es porque en webpack, si no te has visto la configuración de webpack y tal.
A ver.
Esto hay que hacerlo justamente por este paquete.
Pero te puede pasar por otros.
Sobre todo si quieres utilizar React Native para la web.
Y por eso te lo explico.
Pero esto no es obligatorio.
Sobre todo si quieres hacer una aplicación en iOS y olvidarte.
Pero creo que está bien de saberlo.
Porque si te lo encuentras te puedes asustar y decir.
Buah.
Pues esto es una caca.
Que suele pasar con React Native.
De que hay algún error así y la gente ya.
Vale.
En webpack, en la configuración.
Tú lo que le puedes decir es que para ciertos archivos.
En este caso archivos.js que terminan en .js.
Quiero utilizar un loader en concreto.
En este caso el Babel loader.
Para transformar esos ficheros.
Porque lo que nos está diciendo el error es que no lo entiende.
Y no lo entiende porque ese archivo no está transformado.
Tiene JSX y no se está transformando.
Y JSX no es válido.
Por lo tanto lo que vamos a decirle es.
Pues en los archivos .js utiliza el loader de Babel.
Para transformar estos ficheros.
E incluye todos esos ficheros.
Que estén en path.join.
Y aquí le vamos a decir.
Deer name.
No modules.
Deer name es donde está.
Físicamente en el archivo webpack.com.js.
Que está aquí.
Y ahora vamos a decirle no de modules.
Que está aquí.
Y le vamos a decir.
Barra react router native.
Vale.
Y ahora aquí cerramos el path.
Y solo nos falta aquí devolver la configuración.
Ya estaría.
Con esto ya lo hemos arreglado.
Esto es lo que va a hacer.
Ahora tenemos que refrescar.
Y si lo he hecho todo bien debería funcionar.
Esto es lo que va a hacer.
Básicamente.
Pero fíjate que estamos aprendiendo un poco de webpack también aquí.
¿No es maravilloso?
Esto es lo que está haciendo.
Básicamente es ampliar la configuración por defecto de expo.
Y lo que estamos haciendo es añadir una regla más.
Para forzar que compile las dependencias de real router native.
Solo las de real router native.
Porque las demás funcionan bien.
Esta es la única que es problemática.
Ahora voy a cerrarlo todo.
Voy a cerrar.
No sé.
¿Ves que ahora pone aquí?
Desconecte from the metro.
No sé qué.
No sé cuánto.
Bueno.
Vamos a ver.
Esto a veces es un poco rollo.
Porque una vez que desconectas le cuesta volver a abrir el simulador.
O tienes que cerrarlo.
O abrirlo tú manualmente.
Bueno.
Ahora veremos.
Si nos da algún problema.
Bueno.
Fíjate el código QR que nos sale aquí.
Enorme.
Súper grande.
Bueno.
Aquí veis.
Podéis abrir en Android.
Simulator.
Web.
Recargar la app.
Es bastante útil todo lo que hay por aquí.
Vamos a darle al web browser.
A ver si ahora sí que funciona.
Nos sale aquí que está haciendo lo de webpack.
¿Vale?
Y eventualmente nos abre la pestaña.
Y ahora sí.
¿Veis?
Ahora sí que funciona.
Ahora funciona correctamente.
Podemos ir al run on iOS simulator.
Pero esto normalmente.
Ya os digo.
Simulator ready.
Bueno.
No ha habido ningún cambio.
No sé.
Vamos a hacer algún cambio.
Para ver si.
Si no habrá que salir y volver a entrar.
Porque normalmente no se reconecta solo.
Así como si nada.
Es un poco más quejica.
En este sentido.
A ver.
¿Veis?
Que he cambiado y ahora no hace nada.
Voy a intentar hacer un refresh.
A ver si.
Pero me parece que está entendiendo que es otro.
Ahora sí.
Vale.
Ahora sí.
Repositoris.
Ahora sí.
Para hacer el refresh.
Lo único que hacéis es comando R.
Y lo que hacéis es recargar.
¿Ves?
Es una recarga como obligándolo.
Es como lo que se hace con las páginas web.
Básicamente.
Ahora que ya sé que funciona todo.
Venga.
Vamos a cerrarlo todo.
Vamos a cerrarlo todo.
Todo.
Todo.
Y ahora que sí que está funcionando.
Vamos a volver al main.
Y vamos a empezar con las rutas.
Lo habíamos dejado así.
Con el appbar y todo esto.
El appbar siempre se va a tener que mostrar.
Porque queremos que lo que tiene que cambiar.
Cuando cambiemos de ruta.
Es el contenido de nuestra web.
Así que vamos a utilizar el switch.
Que esto lo hemos visto en clases anteriores.
Lo que es el switch.
Pero.
Básicamente.
Lo que hace el switch.
Es que solo entre en una de las rutas.
En las que.
En las que machea.
¿Vale?
Real router native.
Así que vamos a ponerle las rutas que tiene que hacer.
En este caso tenemos la ruta.
Con el path.
Que esto va a ser la home.
Y decimos que sea exacto.
Y aquí.
Si entramos en esta ruta.
Vamos al repository list.
Y vamos a tener otra ruta.
Vamos a ponerle.
Sink in.
Que sea exacta.
¿Vale?
Por ahora vamos a poner.
Working on it.
Ahí.
Con un h1.
Menos mal.
Que os he dicho 80 veces.
Que no.
Que no se podía utilizar un h1.
Pues nada.
Yo voy a poner un h1 ahí.
Porque yo quiero.
Vale.
Text.
Ahí lo tenemos.
Y también lo que podríamos hacer.
Es hacer una redirección.
Esto.
A ver.
No sé si tiene mucho sentido.
Porque somos nosotros los responsables.
De que no vayan a páginas así.
Pero bueno.
Podemos hacer una redirección.
Vale.
Alguien ahora.
Puede estar diciendo.
¿Pero qué es esto?
Estos son paths de urls.
¿Cómo puede funcionar esto?
A ver.
No es que funcione.
O sea.
Hay que tener en cuenta.
Que el React Router.
Es agnóstico a la plataforma.
O sea.
Puede funcionar con rutas url.
O esto.
Ser rutas.
Entendidas.
Que están en memoria.
No hace falta.
Que sean rutas.
De una página web.
Esto puede ser.
Rutas en memoria.
¿Vale?
Funciona así.
Entonces.
Digamos que ahora.
Lo estamos tratando.
Como que son.
Laves.
En las que nosotros.
Queremos.
Pues.
Movernos.
Y ya está.
¿Ok?
No.
No.
No.
No.
No.
No.
No.
Es tanto como.
Como rutas de urls.
Y cosas así.
Pero bueno.
Es bastante útil.
Tener estas.
Estas rutas.
Aunque sean en memoria.
Para saber en qué ruta estamos.
Compartir esa ruta.
Podríamos hacerlo.
Y podría ser súper útil.
Vamos a modificar nuestro app bar.
Lo habíamos dejado así.
Con nuestros repositorios.
Lo que vamos a hacer aquí.
Pues teníamos.
App bar.
App bar.
Vamos a crear.
App bar.
Tap.
¿Vale?
Que va a decir.
Si está activo.
Si.
Vamos a pasarle el children.
Para renderizar el texto.
Y le vamos a decir.
Donde tiene que ir.
¿Vale?
Si está activo ese tap.
Si el texto que tiene que renderizar.
Y hacia donde tiene que ir.
Lo que vamos a renderizar aquí.
Pues.
Vamos a ver.
Esto lo que va a renderizar.
Es un.
Cada tap.
Va a ser un enlace.
Así que utilizamos el link.
El link es un componente del real router.
Que lo que nos permite.
Es llevar al usuario.
A la ruta que le digamos.
Así que en este caso.
Le decimos el link.
Y le decimos.
Donde tiene que ir.
Pues ya se lo iremos después.
Ahora.
Uy.
Vamos a cerrar esto.
Ahora lo que tenemos que renderizar aquí.
Justamente.
Este es.
Con el style text.
Que no lo tengo todavía.
Así.
Sí que tengo.
Ah mira.
Si es que de hecho lo tengo por aquí.
O sea.
Es exactamente lo mismo que tenemos aquí.
¿Vale?
Con style text y tal.
La única diferencia.
¿Ves?
Ahora este componente que tenemos aquí.
Lo voy a sacar aquí.
Con app bar tab.
Voy a poner que está activo por ahora.
Vamos a poner que es repositories.
Y vamos a poner app bar tab.
¿Vale?
Y así ya puedo poner esto.
Este active ya no hace falta.
Lo dejamos así.
Esto en principio debería funcionar.
Ah bueno.
Aquí esto es children.
Perdón.
El to.
¿Vale?
Y ves.
Ahora tenemos este repositories.
Que parece que es exactamente lo mismo.
Pero si ahora copio esto y lo pego aquí.
Y me pongo aquí que es sing in.
Y nos vamos a sing in.
No sé si ponerlo así o así.
Bueno.
Voy a ponerlo junto.
Lo he puesto tanto junto.
¿Vale?
¿Veis?
Ahora ya me ha salido otro.
De hecho le doy.
Fíjate que ya está navegando.
¿Por qué?
Porque en repositories le he dicho aquí.
Le he dicho que tiene que ir a la barra.
¿Vale?
Y en sing in.
Le he dicho que tiene que ir a sing in.
Y en main.
Como ya le hemos puesto las rutas.
Que va a ser la barra y el sing in.
Y en sing in le he dicho que tiene que renderizar un texto.
Cuando va al sing in.
Pues se pone así.
Pero esto no es mucho que un tab bar.
¿Vale?
Esto es súper típico.
¿No?
De que todo el rato es todo el rato lo mismo.
El tema aquí es que el container este.
Pues aquí deberíamos hacer un flex direction.
Que sea row.
¿No?
Para que salga de izquierda a derecha.
¿Vale?
Esto ya empieza a tener un poquito de mejor pinta.
Pero nos falta un poquito de espacio.
Que bueno.
Lo podríamos poner aquí.
Por ejemplo.
Este font weight.
El style.
De los text.
Pues en el style este.
Podríamos poner un padding horizontal.
De 10.
¿Vale?
Al menos ya tenemos un poquito de esto.
Ahora quitamos esto.
Y bueno.
Pues bueno.
Ya va pintando.
Va pintando un poquito mejor.
De que nos podamos mover.
¿Veis?
Si te fijas.
Cuando le doy.
No sé si se ve mucho.
Pero tiene una opacidad extraña y tal.
¿No?
Esto es porque por defecto.
Este enlace.
Este componente link.
Lo que está haciendo.
Es renderizar uno.
Que tenga el touchable.
Opacity.
No sé qué.
No sé cuánto.
Esto lo puedes tú cambiar.
Le puedes poner component.
Y le puedes decir el componente que tiene que renderizar para el link.
¿Vale?
Le puedes decir el que te dé la gana.
Por ejemplo.
Imaginad que decimos.
No quiero que tenga feedback.
Vale.
Pues le ponemos este.
Y ahora al guardarlo.
Fíjate que cuando le dé.
Bueno.
Cuando le dejas pulsado.
Sí que se ve.
Pero cuando le dé.
Ahora no hace el feedback.
Si lo quito.
Cuando haga el clic.
Se verá.
No es muy perceptible.
Pero veis.
Sí que hace el clic.
¿Veis?
Que se ve ahí.
Pues eso.
Que lo podéis customizar.
Y renderizar como queráis.
Ahora bien.
Alguien también me debe estar diciendo.
Bueno.
Esto está muy bien.
Porque esto es sencillo y tal.
Pero.
Fíjate.
¿Qué pasa?
Si empiezo a añadir.
Más y más y más aplicaciones.
O sea.
Taps.
¿No?
Tengo repositorio.
Singin.
Register.
Sub.
To each account.
¿No?
Más largo.
Midu.
High.
Lo que sea.
¿Veis?
Que tengo aquí un montón.
Y que sale del dispositivo.
Pues aquí.
Tendría que poder scrollear esto.
¿Cómo lo podemos hacer?
Lo vamos a hacer.
No os preocupéis.
Para esto.
A ver.
Es bastante sencillo.
No tiene mucha historia.
Antes os he explicado.
Que existe el flat list.
¿Vale?
Que es para renderizar datos.
Cuando sobre todo estás.
Haciendo un loop.
O un bucle.
De elementos.
Que tienen datos.
Pues un flat list.
Pero cuando es un scroll.
Os he dicho.
Pero scroll view.
También tiene sentido.
Cuando no son datos.
Pero cuando es que necesitas que tengas scroll.
Pues en este caso.
Vamos a utilizar.
El scroll view.
¿Vale?
Utilizamos un scroll view.
Que se importa.
De real native.
¿Vale?
Y este scroll view.
Es lo que va a.
Envolver.
Todo el contenido que queremos.
Que se pueda.
Scrollear.
Pero fíjate.
Que cuando lo he puesto.
Vaya.
He perdido.
Ahora sí que puede hacer scroll.
Pero no tiene mucho sentido que haga scroll.
¿Por qué es esto?
¿Vale?
Lo que está pasando en este caso.
Es que claro.
Este scroll view.
Funciona como de columnas.
Por defecto.
Funciona como si fuese de arriba a abajo.
Pues le tengo que decir que es horizontal.
Una vez que le decimos que es horizontal.
Fíjate.
Ya lo hace horizontal.
Y ahora sí que lo podemos scrollear.
Lo que pasa es que no se ve.
Pero queda un scroll ahí un poco raro.
Que se queda.
Súper.
Súper extraño.
¿No?
Pues podríamos poner aquí un style.
Styles.
Punto scroll.
Por poner algo.
Y vamos a hacer que sea el scroll.
El que tenga el padding bottom.
Le vamos a poner 15.
¿Vale?
Esto ahora habrá.
¿Veis que ahora el scroll está donde debe estar?
Lo que pasa es que a lo mejor aquí.
No sé si esto lo podemos cambiar.
Sí.
Vale.
Ahora queda mucho mejor.
Le he quitado el padding al container.
Le he puesto el padding al scroll.
Y de esta forma ahora.
Es que no se ve mucho.
Pero justo debajo hay un scroll ahí horrible.
Que se ve muy feo.
Sobre todo si pasa por encima del texto.
Y con esto pues al menos tendríamos un scroll.
Y mira.
Pues ya podríamos ir cambiando de páginas.
Y tal.
Pero todavía queda algo más.
¿No?
Porque alguien me dirá.
Bueno.
¿Y cómo pongo?
Pero claro.
Es que todas las páginas parece que están activas.
¿No?
¿Cómo podemos hacer que la página aparezca como que está activa?
¿No?
Como que yo estoy en repositories.
¿Cómo lo noto?
Pues no te preocupes.
Mira.
Yo ya he dejado esta prueba aquí preparadita.
Para que nos diga cuándo está activa.
De hecho lo que podemos hacer es que si está activa.
¿Qué podemos hacer?
Podemos hacer en los estilos.
De hecho ¿cómo lo podemos hacer a esto?
Con los estilos que hemos hecho antes.
Mira.
Text styles.
Habíamos hecho aquí un array.
¿No?
Y habíamos puesto que tuviera unos estilos por defecto.
Styles text.
Pues podemos poner que si es activo.
Pues styles active.
Ponemos aquí active.
Y vamos a poner que esto.
Text primary.
Y si no.
Color.
Theme.
App.
Par.
Text disable.
O secondary.
Vamos a poner secondary.
Vámonos al theme.
En la app bar que habíamos puesto secondary.
Vamos a poner aquí un color más.
Más apagadito.
¿Vale?
Más gris.
Para que al menos.
¿Vale?
Secondary.
Bueno.
Me he pasado.
Me he pasado con el.
Me he pasado.
Con el color.
Con el apagado.
Ahora lo.
Vale.
Active.
Es que he puesto que sean todos active.
Vale.
Quitamos todo.
Vamos a quitar todos los active.
Porque active.
Solo hay uno.
Primero vamos a estilarlo.
Y ahora.
Encontraremos como lo hacemos.
Vale.
Espérate.
Que no me ha dejado.
No me está haciendo ningún color.
Este es el active.
Text secondary.
Text.
Text.
Secondary.
¿Vale?
Incluso podemos hacerle un poli más.
Más.
Más.
Bueno.
Es una idea.
Más o menos.
Para que veáis.
Que ahora se nota.
Se debería notar.
¿No?
Ahora se nota que el repositoris está activo.
Y el singing no está activo.
Vamos a ponerlo un poco más.
Esto se puede estilar de mil millones de formas.
¿Eh?
Pero bueno.
Es una idea para que veamos la diferencia.
Pero ahora lo interesante realmente es.
Vale.
Cuando me voy a singing.
¿Cómo hago que esto esté activo?
Porque fíjate que sigue estando repositoris activo.
Y esto no es lo que quiero.
Yo ahora quiero cuando voy a singing.
Que sea el que está activo.
Pues no te preocupes.
Esto está fácil.
A ver.
En el app bar.
Lo que podemos hacer aquí.
Es recuperar el path name.
En el que estamos.
Y para eso utilizamos un custom hook.
Que se llama use location.
Que de hecho.
Me ha ofrecido auto importarlo.
Y la he ignorado.
El use location.
Que es un hook.
Que viene de real router native.
Así que lo ponemos aquí.
De esta forma vamos a saber en todo momento.
En qué path estamos.
Si estamos en la home.
Si estamos en el que sea.
Ahora.
Aquí podríamos empezar a hacer un montón de lógica de.
Si active es.
Si es el path name.
Es igual igual a esto.
¿Vale?
Esto igual.
Active.
Si es igual a path name.
Igual igual a.
Sink in.
Pero.
¿Qué pasa con esto?
Voy a quitar estos.
Que esto ya no tiene mucho sentido.
¿Vale?
Esto funcionar funciona.
Perfecto.
O sea.
Ya está.
Lo hemos solucionado.
Pero.
No es lo que me gustaría.
¿No?
O sea.
Lo que me gustaría.
Es.
Pues cambiar.
Esto.
Pero de una forma.
Sin repetir.
Esta.
Esta información.
Podemos hacer.
Es crear.
Una pequeña función.
Que se llama.
Get route.
Route.
Bueno.
Route.
Sí.
Route props.
Y aquí.
Le vamos a pasar.
El path name.
Que tenemos.
Y hacia donde tiene que ir.
¿Vale?
A ver.
Incluso esto.
Mira.
Mejor.
Mejor.
Mejor me lo pones.
Vamos a quitar el active.
Vamos a quitar el active.
Vamos a quitar el active de aquí.
Es que es más fácil.
Y este use location.
En lugar de hacerlo aquí.
Lo vamos a hacer aquí.
En lugar de pasárselo por props.
Lo vamos a calcular aquí.
Vamos a hacer esto aquí.
Y vamos a decirle.
Que es active.
En el caso de que el path name.
Sea igual.
Hacia donde tiene que ir.
Y con esto.
Pues ahora.
Debería funcionar.
Con esto tan sencillo.
Claro.
Es que tiene mucho más sentido.
Y es que iba a hacer un.
Iba a hacer un.
Un método y todo.
Pues no.
En el app bar tab.
Ya.
Como ya sabe.
Hacia donde va.
A ir ese tab.
Le podemos decir.
Vale.
Recupero el path name.
Del use location.
Y si el path name.
Es igual.
Hacia donde quieres ir.
Significa que está activo.
Y si está activo.
Pues te lo voy a renderizar.
Como es debido.
Y ya está.
Repositories.
Singing.
Vale.
Ya tenemos estos dos.
Ya tenemos nuestra aplicación.
Que va tomando forma.
Tenemos este singing.
Vamos a revisar aquí.
Nuestro react native web.
Vale.
Que funciona también.
Perfectamente.
Y por supuesto.
Como no.
Aquí en mi pedazo de móvil.
Que le queda un 7% de batería.
O sea que va a ser raudo y veloz.
Pues nada.
Está cargando.
Y si entro.
Creo que es esta.
A ver.
Mira.
Me ha dicho que hay una nueva actualización.
Ya tengo aquí mi.
Mi aplicación.
No sé si se ve.
Pero es la aplicación.
Y que también.
Pues funciona perfectamente.
El cambiar entre.
Entre URLs.
Eso sería.
Eso sería la diferencia.
Y ya lo tendríamos con esto.
Vale.
AppBar.
Voy a guardar aquí los cambios.
Obviamente.
A ver.
Yo estoy creando este AppBar.
Pero dependiendo de cada una de las plataformas.
Y eso lo veremos en la siguiente clase.
Cómo podemos tener diferentes componentes.
Igual el AppBar.
Podemos hacer que en Android y en iOS sean diferentes.
Aunque se llame exactamente igual.
Y podemos hacer que la aplicación de forma totalmente transparente para ti.
Cargue un componente u otro.
Mientras que el resto de aplicación se siga compartiendo.
Lo que es una maravilla.
Flipas.
Madre mía.
¿No?
Vaya tela.
Vaya dos pedazos de horas que hemos estado aquí.
Y le hemos dado mucha caña.
Ah.
Sí.
Elliot me decía que se podía quitar el scroll horizontal.
Podéis quitar.
Mira.
Hay un montón de.
Es que hay un montón de props.
Por ejemplo.
En el scroll view este.
Se puede.
Aquí veréis que hay un montón de props.
Y una de ellas es para quitar el scroll horizontal.
Yo sinceramente no lo recomiendo.
O sea.
Recomiendo que en lugar de quitarlo.
Lo que hagáis es que esté bien adaptado.
Que se vea donde tiene que ser.
Más que nada por un tema de accesibilidad.
Pero bueno.
Que si no os gusta por lo que sea.
Pues lo podéis quitar.
Hay un shows este.
Y le ponéis aquí un false.
¿Vale?
¿El hook use history funciona en React Native?
Sí.
Sí.
El history y todos los hooks.
O sea.
Todos los hooks de React Native.
React.
Router Native.
Los tenéis documentados.
Y el use location.
Use history.
Use params.
Todos funcionan correctamente.
¿Veis?
Los tenéis aquí.
Son exactamente los mismos que ya conocéis.
Para ponerla para abajo al ser de móvil.
¿Cómo la podría poner abajo?
Pues nada.
Está moviéndola abajo.
La hemos puesto arriba.
Pero bueno.
En el caso de abajo.
Igual sí que tienes que jugar más con otro.
Bueno.
Sería lo mismo.
Exactamente lo mismo.
¿Vale?
¿Qué tal?
¿Cómo lo habéis pasado?
¿Os ha gustado?
Hemos estado dos horas pero a full.
Es que no he parado.
Es que ni para beber.
Ni para beber.
Madre mía.
Oye.
Muchas gracias a Guillel Mitou Bigu Mech.
Muchas gracias a todos los que suscribís con Prime.
Que me apoyáis.
Y que hacéis que esto sea posible.
De que me apunte aquí todos los domingos.
Nagas06.
También muchas gracias.
Julio Burgos.
Cinco meses de antigüedad encima.
Sheldred.
Que me ha hecho una raid.
Muchas gracias también.
No me he enterado.
Muchísimas gracias.
Hostia.
Bigu Mech.
Me había apagado desactivar el Inter.
Pero ya sabéis que Full Start Book Camp voy muy a saco.
Porque estoy aquí súper a full.
Porque mucha información en muy poco tiempo.
Y bueno.
Para lo que hemos llegado.
No ha estado mal.
Aquí está nuestra aplicación.
Además hemos hecho rutas.
Hemos explicado React Native.
React Native Web.
No sé.
No está mal.
Hay gente que le gustan más los styles abajo.
Terronz dice.
A mí me encantaría aprender React Native este verano.
¿Cómo lo ves tú?
Yo lo veo genial.
Pero si hoy lo que hemos visto.
Lo hemos visto en dos horas.
Y fíjate todo lo que hemos hecho.
Un montón.
Un montón.
Y sí.
No solo está muy atento en el chat.
No entendí muy bien la parte de los píxeles.
Pues básicamente.
Exactamente en qué afecta.
Pues mira.
Afecta en el sentido de que.
Si tú aquí.
Este scroll.
¿Vale?
El scroll es este.
Este.
De este color gris.
Aquí.
Si le pones 15.
Pues son 15 píxeles.
De lo que representa.
Pero si tú le pones 100.
Pues vas a ver que esto da un salto aquí.
¿Vale?
Para que te des cuenta.
Pues si ponemos.
Esto debe ser unos 480.
¿Ves?
Unos 480.
¿Ves?
480.
Un poquito más.
No sé cuál es la resolución.
Que tiene.
No me acuerdo cuál es la resolución.
A lo mejor son 520.
Lo que sea.
Pero 520 píxeles.
Fíjate que es casi todo.
Si miramos la resolución.
iPhone 12 Resolution.
El iPhone 12.
Por ejemplo.
Tiene.
Como dos resoluciones.
¿Vale?
Tenéis que tener en cuenta.
Que son.
La resolución real.
Que es esta.
Esta es la resolución real.
Pero la resolución real.
Esta.
No es la que representa.
Y claro.
Alguien dirá.
Pero ¿Cómo es esto?
Porque este es el número de píxeles.
Que tiene la pantalla.
Pero a la hora de representar estos píxeles.
Esto es lo que hace.
Es dividirlo entre dos.
Para.
Para justamente.
Ese efecto retina.
Eso de que no se vea el píxel.
¿Ves?
585.
Este es.
La resolución.
Representada.
Y esta es.
La resolución de la pantalla.
¿Vale?
Son dos resoluciones distintas.
Uno.
Lo que ves.
Y otra cosa es.
Lo que puede.
En la pantalla.
Pues.
Representar el número de píxeles.
Pero la que utiliza.
Es esta.
Entonces.
Cuando yo le digo.
Un padding.
Bottom.
De 20.
Lo que estoy diciendo.
Ves.
Aquí me está intentando poner 20.
Pero cuando le digo de 20.
Le estoy diciendo.
De esta resolución.
¿Vale?
Que es una diferencia sutil.
Pero esa es la diferencia.
Bueno.
Ya hemos visto.
Cómo funcionan las rutas.
¿Qué son los tres puntos?
No sé.
Midu.
¿Estás en React 17?
Sí.
Eso sería.
React 17.
Bueno.
Perdonad.
Que no se leído.
Midu.
¿Has probado React Native Desktop.
Para Macos y Windows?
Lo he probado.
Pero con el M1.
Da muchos problemas.
Qué complicado.
Esto si no te lo explican.
No lo solucionas por propia iniciativa.
Bueno.
Petronini.
El problema este que hemos solucionado.
Esto se soluciona mirando.
Hay gente que se queja.
Y hay gente que lo ha solucionado por ahí.
No te creas tú.
Que si o yo.
Más o menos.
O sea.
Cuando vi el problema.
Sí que sabía solucionarlo.
Pero por ejemplo.
Esto.
Esta línea de aquí.
No tenía ni idea.
Cómo poder hacerlo.
Sabía cuál es la solución.
Pero no sabía.
Cómo podía conseguir la configuración.
Y al final.
Busqué.
Cómo se conseguía esta configuración.
Y tampoco era muy difícil.
Copilot.
Sí.
Habéis visto que he estado utilizando Copilot.
Que me ha estado ayudando bastante.
Así que.
Bueno.
He estado utilizando.
Ver cómo pica código es impresionante.
Gracias hombre.
Mira Petronini.
Pa' ti.
A tu salud.
Muchas gracias Michi Arake.
Por suscribirte con Prime.
Tío.
Mola muchísimo tu forma de comentar y de enseñar.
Muchas.
Muchas.
Muchas.
Muchas gracias.
Hombre.
Y encima.
Gracias por suscribirte con Prime.
Gracias tío.
Eres un máquina.
Joder.
Gracias a ti.
Jairo.
A Jairo.
Muy guapa la charla.
Uy.
A tope con el calor.
No.
No tengo calor.
Lo que pasa es que es el brillo de los focos.
Estoy bien.
Se podría coger esa info de una base de datos.
Lo haremos en la siguiente clase.
En la siguiente clase.
Pensad que esto es un proyecto que estamos haciendo.
Que lo seguiremos.
Mira.
Voy a dejar esto como estaba.
Que no sé si era 20.
Esto lo seguiremos haciendo.
Vamos a seguir.
Y haremos que se pueda votar.
Que se pueda iniciar sesión.
Todo esto lo vamos a seguir en siguientes clases aquí en Twitch.
Necesitaba esta clase.
Qué bonita clase.
Pero primero tengo que aprender React.
Hombre.
Sí.
Os recomiendo mucho que primero.
Pues.
A ver.
No pasa nada si queréis aprender React.
Utilizando React Native.
No me parece que esté mal tampoco.
¿Pondrás esto en YouTube?
Sí.
Es mucho temario.
Es mucho temario.
Pero bueno.
He intentado hacerlo rápido.
Pero.
Pero bueno.
Ey Salomón.
¿Cómo estás?
Y sí.
Este vídeo irá para la YouTube a playlist de Bootcamp.
Cato.
Muchas gracias por suscribirte un mes en el nivel 1.
Muchísimas gracias hombre por ese apoyo.
¿Podrías hacerle en algún momento review a la app de Mercadona?
Es que me ha parecido súper bonita y funcional.
Lo tendré en cuenta.
¿En React Native se desmontan y montan los componentes de hacer el ruteo?
Al hacer el ruteo sí.
Claro.
Al hacer el ruteo se desmonta.
En este caso.
Hay otros routers que te ofrecen el stack pile.
En este caso creo que sí que se desmontan.
Tal y como lo estamos haciendo ahora.
En la hora de los impos se necesita poner extensiones.
A mí me gusta normalmente poner extensiones.
Me parece uno que es una buena práctica.
Dos.
Que es como es el spec oficial.
El spec oficial de los Enmax Grid Modules.
Tienes que indicar la extensión.
Piensa que el navegador no es capaz de resolver en tiempo de import si existe ese fichero.
Sería imposible.
Entonces por una buena práctica de intentar estar lo más cerca posible a la spec.
Pues a mí me gusta poner las extensiones.
Pero si estás acostumbrado a ponerlas no las pongas.
¿Qué opinas de los kit UI de los componentes para RealNative?
Me parece súper interesante.
O sea, súper bien.
Yo en este caso.
A ver.
No tiene sentido que se intente enseñar RealNative.
Y empiece a importar cosas de bootstrap.
O como de bootstrap de kit UI.
Prefiero que veáis cómo se haría.
Otra cosa es que luego.
Que pues la hagáis de otra forma.
¿Prefieres RealNative o Swift Kotlin?
A ver.
No es que prefiera uno u otro.
Creo que Swift y Kotlin son súper interesantes a la hora de desarrollar aplicaciones nativas.
Y sobre todo Swift y Swift UI me parecen muy interesantes.
Pero creo que RealNative es muy interesante.
O sea, es que RealNative, todo lo que has aprendido de hacer aplicaciones en la web,
pues puedes hacer las aplicaciones nativas en iOS, en Android.
React web, o sea, en la web.
Y también en desktop.
No sé, es que me parece que es muy genial.
Pero viéndote en directo me siento aún más.
Nada, soy novato en JavaScript, ya ves tú.
Que sí, que este stream se sube a YouTube.
Que sí.
La aplicación la haremos completa.
Sí, seguiremos haciendo más.
Que lo haga Copilot.
Buena vida.
Muchas gracias por suscribirte con Prime.
Tres meses que llevas ya.
Muchas gracias por tu apoyo todo este tiempo.
Muchas, muchas, muchas gracias.
¿Subirás el code a GitHub?
Lo subiré.
En RealNative también usamos UseState totalmente.
De hecho, lo veremos en las siguientes.
Además, tenerte en cuenta una cosa muy interesante de RealNative.
Es que todas las librerías, bibliotecas de React, que sean puramente...
Bueno, de React no, pero que sean puramente de JavaScript, funcionarían sin ningún problema.
Y usaremos UseState, por supuesto.
¿Cuándo Expo y cuándo React Native Clip?
Pues mira, Delete, Fred.
Yo te diré que casi siempre Expo.
O sea, es que la plataforma de Expo es que es demasiado increíble.
Demasi increíble.
Ya lo hemos visto, ¿no?
El hecho de poder tenerlo súper fácil aquí en la aplicación en Android aquí.
O sea, al vuelo.
Es que es increíble.
Además, estoy viendo en tiempo real todos los cambios.
Es increíble.
O sea, yo recomiendo que utilicéis Expo.
O sea, es que mira, aquí está nuestra aplicación que hemos hecho.
La he estado viendo aquí en todo el rato.
¿Y cómo se compila?
Sin ningún problema.
Se puede compilar a una APK.
Se puede compilar...
No sé si lo veremos al final.
Lo intentaré.
A ver.
Lo intentaré.
Me ignoraste.
Macinterocar.
No ignora a nadie.
Pero piensa que hay...
Bueno, antes había más personas.
Hay 222.
Pero piensa que escribimos un montón y es muy difícil.
Es muy difícil que lea todo.
Es imposible.
Imposible.
Una clase muy concentrada.
Buena sesión de RIA.
Muchas gracias.
Gebo Beta.
¿Recomiendas usar la extensión JSX?
Ya os dije en su día que yo creo...
Yo intentaba no utilizarla.
Pero bueno, creo que tiene sentido sobre todo porque mira, pues...
Te ayuda el editor, ¿no?
A salirte estas cosas.
Luego hay bundelizadores y linters que lo pueden tener en cuenta.
De hecho, TypeScript lo tiene en cuenta.
Muy interesante que hayas puesto en React Native cuando quería aprenderlo.
Bueno, buena vida.
Es que lo tengo totalmente ahí.
Actualmente trabajo mucho en React Native y hago cosas en web.
Pero me está gustando mucho la parte móvil.
¿Me recomiendas estudiar un lenguaje nativo o profundizar más en JS?
Hombre, yo creo que cuando estés ya bastante suelto con la parte en JavaScript, yo creo
que un lenguaje nativo es genial.
Además que te va a ayudar a ganar más dinero.
¿Aconseja en JS para hacer una SPA?
Sí.
Flutter versus React Native.
¿Cuál es tu opinión?
Yo ahora mismo, yo ahora, apuesto más por React Native.
A mí me gusta más React Native.
Pero Flutter tiene súper buena pinta.
O sea, tiene muy buena pinta.
Me gusta mucho y, de hecho, quiero aprenderlo aquí en Twitch con todos ustedes.
Pero si yo tuviese ahora mismo que hacer una aplicación.
Y, a ver, hay que tener en cuenta que yo también me desenvuelvo mucho mejor con React.
Pero es un tema también, pensando en el equipo, pensando en la evolución de esta aplicación al corto plazo o al medio plazo,
me quedaría con React.
Pero no niego que Flutter tiene buena pinta.
Pero no sé.
No le veo la madurez.
No sé.
Es un lenguaje...
Es como algo muy de Flutter.
O sea, es que Flutter.
Ya está.
Y entonces, ¿quién te dice a ti que dentro de cinco años...
No sé.
Digamos que históricamente React, pues, tiene mejor pinta.
Pero, bueno, quien dice que dentro de poco, pues, eso cambie.
Pero no sé.
Ahora mismo yo me quedaría con React Native.
Dentro de unos años ya veremos.
Me gustó mucho el stream de hoy.
Gracias, hombre.
¿Las apps creadas en React Native a la hora de sacarlas en Marketplace hay alguna traba?
No, no hay ninguna traba.
Siempre...
Pensad que las aplicaciones en React Native, cuando van al Marketplace y tal, son aplicaciones nativas.
Esto es muy interesante, ¿vale?
Pero lo que estamos haciendo aquí, todo lo que habéis visto, claro, ¿por qué esto tiene ciertas...
Digamos, hay algunas limitaciones, ¿no?
¿Por qué no utilizamos H1 y H2 y P?
¿Por qué no hace eso?
Porque tened en cuenta que cuando hablamos de que se llama React Native, es que es por algo.
Es que es verdaderamente nativo.
O sea, lo que va a hacer React Native, o sea, en este caso React Native, es compilar este código y que realmente...
O sea, esto no es una web, ¿sabes?
Por lo tanto, a un Marketplace, si tened en cuenta que ya se pueden enviar, siempre se han podido enviar, pues aplicaciones hechas con WebViews y tal.
Pero es que esto es una aplicación nativa.
Otra cosa es que no tenga el rendimiento que si lo haces en Swift.
O sea, no hay ninguna traba, más allá de que hagas algo malo como harías en otra app con otro lenguaje.
Hace un tiempo empezamos a sondear Expo y nos dio la impresión que los proyectos pasaban mucho.
No sé cuánto tiempo hace eso, pero ha mejorado bastante el tema del tamaño.
Y lo mejoran.
En la última versión, por ejemplo, lo han seguido mejorando.
Y es verdad que siempre históricamente ha sido un problema, pero están trabajando en ello.
¿Qué nivel necesito de JavaScript para pasar a React?
El mínimo o ninguno.
Puedes empezar con React y aprender JavaScript a la vez.
¿Qué opinas sobre aplicar Snake Case?
Snake Case.
Pues me parece mejor...
A ver, no sé.
¿Snake Case a qué?
¿Al nombre de los archivos?
¿Al de las variables?
Si es al de las variables, no me gusta.
Prefiero CamelCase.
Si estamos hablando de los ficheros, puede tener buena pinta.
¿Verás también en React Native para desktop?
En Twitch, seguro.
En esto, no creo.
O sea, en este minicurso que estamos haciendo en React Native, no.
¿En rendimiento, Flutter y React Native son prácticamente lo mismo?
La verdad es que no tengo ni idea.
¿Estaría bien un debate entre tú y MoureDev sobre qué está por utilizar para desarrollo móvil?
A ver, es que yo no estoy en contra ni de uno ni del otro.
Es que a los dos le veo ventajas y desventajas, ¿sabes?
Entonces, no me parecería mal hacer un desarrollo nativo.
Pero, por ejemplo, para mí no tiene sentido.
Si yo domino React y todo lo que me ofrece React Native y puedo sacarlo en Android, en iOS, en la web y también en desktop, o sea, no tendría sentido.
Sería pegarme un tiro en el pie.
¿Es necesaria alguna librería para hacer fetch o con el fetch de siempre se puede?
A ver, con el fetch de siempre se puede.
Que yo sepa, se puede.
Que yo sepa.
Al final, hay algunas...
Tienes que tener en cuenta que React Native ya te ofrece la fetch API, ¿vale?
Tiene como diferentes cosas que están en la web, pero que al final están disponibles también en React Native.
Puedes utilizar el fetch sin ningún problema porque, de alguna forma, React Native te está poniendo como un polyfill para que lo puedas utilizar.
O sea, que podríamos utilizar fetch y, de hecho, lo utilizaremos y no encontrarían ningún problema.
No me acuerdo de qué más, pero sé que hay otras, no sé cuáles, pero hay otras librerías que también...
No sé si WebSockets...
Hay algunas librerías que solo están en la web, como WebSockets, como fetch y tal, que las puedes utilizar como si estuviesen y ya está.
Aún así, también puedes utilizar axios y cosas así.
Así que no hay ningún problema.
¿Por qué?
Porque tiene toda la parte del XML, HTTP request, fetch y todo esto, como ya tiene el polyfill, pues lo puedes utilizar.
¿Vale?
Porque si no...
¿Qué más?
¿Añadirás TypeScript al proyecto?
Ya hicimos TypeScript con React y la verdad que fue súper interesante.
Pero prefiero enfocarme más en una cosa.
Si pusiera TypeScript en el proyecto, tendría que empezar a explicar también TypeScript con React Native, con no sé qué.
Y prefiero como que vamos a enfocarnos en esto.
Ya hicimos cómo añadir React y TypeScript y lo hicimos aquí, hicimos un curso y estuvo bastante bien.
Pero no creo que a este proyecto de React Native le añadamos TypeScript.
No creo.
¿Covid vacuna la dejarías como produce web app para instalar en el móvil o crees que es mejor pasarla a React Native en el hipotético caso de que crezca más?
Nada, no creo que crezca más.
Es un proyecto cerrado en el que no vamos a seguir haciéndolo más grande.
Y creo que no tiene sentido hacerlo a aplicación móvil.
Creo yo, ¿eh?
¿Apollo Client funcionaría en React Native?
Hostia, pues es una buena pregunta, pero yo me inclino porque sí.
Yo me inclino porque sí.
Hola, Lucas.
Gracias por llamarme guapo.
Muchas gracias, hombre.
Axios para fetch.
Bueno, ya te digo que Axios se podría utilizar, estoy bastante seguro.
No lo he utilizado, pero estoy bastante seguro.
React Query igual, estoy bastante seguro.
A ver, lo podemos buscar, ¿eh?
React Query, React Native.
No lo he usado, pero estoy también bastante seguro que se podría utilizar.
Mira, React Query is designed to work out of the box.
O sea, lo único que no funciona son las DevTools.
Bueno, pero ya me imaginaba que también debía funcionar.
Y Apollo Client, pues es que creo que igual, ¿eh?
Apollo Client, React Native, estoy bastante seguro también.
O sea, pensad que todas estas librerías de React están muy pensadas para que funcionen con React Native seguro.
Si no funcionaban, ahora funcionan seguro.
Vamos con el Bootcamp.
En la clase de hoy vamos a seguir con React Native.
La semana pasada ya aprendimos cositas de React Native.
Y en esta clase, pues vamos a seguir.
Estábamos haciendo una aplicación para valorar repositorios.
Lo hicimos desde cero.
De hecho, si os parece, os lo enseño ya.
¿Vale?
Vamos a hacer, este es nuestro proyecto que está, por cierto, por cierto, por cierto, os lo voy a enseñar.
Que no se diga.
Por si alguien quiere, ¿veis?
Aquí, miduDevRateRepositorio.
Mira, Harrison, que está ahí bien atento.
Le ha dado ya un like, ¿vale?
Pues aquí tenéis el React Repositorio App.
Esta es la aplicación donde estamos haciendo esto de hacer la aplicación de React Native.
Os la podéis descargar si queréis.
Aquí le podéis echar un vistazo.
Hostia, he hecho esto.
¿Esto está bien?
Hostia, esto no sé si esto lo debería haber subido.
Bueno, no pasa nada.
El caso, que aquí está la aplicación.
Todo lo que habíamos hecho en la clase anterior.
Y desde esta clase es que vamos a seguir.
Desde este repositorio.
Así que si queréis, pues lo podéis descargar y le podéis, vamos, podéis partir desde esta base.
Esto es lo que tengo aquí en local.
O sea, no tengo nada más.
Esto es todo lo que tengo.
Así que hago npm run.
Y npm run me va a decir los comandos que tengo para ejecutar.
Pues tenemos Android, iOS, Web, Jack.
En este caso voy a hacer el npm run iOS.
Que total, esto me va a levantar el simulador de iOS.
Como ya lo hicimos la otra vez.
Pero lo importante es que le dais a este botoncito.
Tarda un ratito.
Pero ahora me aparecerá aquí otra pestañita.
Y lo interesante de lo que estábamos haciendo con Expo es que la aplicación.
¿Ves? Aquí tenemos la aplicación.
La aplicación, una vez que la hacéis, es compatible tanto con Android, con iOS, como con web.
Que esto es muy interesante.
Muy, muy interesante.
La clase anterior no está subida todavía a YouTube, pero esta semana la subo.
Lo aseguro.
Bueno, lo aseguro, no lo sé, pero lo intentaré.
Sí, me imagino que petardea por culpa de cuando se pone a compilar y todo esto.
Pero bueno, ahora debería estar mejor, creo, ¿no?
Vale.
Pues esta era la aplicación, ¿no?
Tenemos repositorios, SyncIn.
Esto es con lo que vamos a continuar hoy.
Ver el tema de formularios y todo esto.
Así que nada, vamos a ver estos dos.
Y aquí, pues tenemos también esto.
Y vamos a ver si arreglamos esto un poquito.
¿Veis el status bar?
Con esto vamos a empezar.
Que mucha gente me dijo, oye, pero se quede negro.
Esto no se puede arreglar.
Sí, que se puede arreglar.
No os preocupéis.
Así que lo vamos a arreglar.
¡Lo vamos a arreglar!
¿Vale?
Ok.
Ahora ya debería estar todo funcionando correctamente.
Yo no tengo la versión de Android.
No la tengo aquí en el simulador del PC.
Pero, como ya sabéis, podéis tener aquí vuestra propia aplicación.
Y la podéis hacer en un momentito.
Con la aplicación de Expo.
La voy a abrir.
Le dais a Scan QR Code.
¿Veis?
Ahora me dice de escanear el QR Code.
Y le doy aquí.
Busco el QR.
Me lo bajo.
¿Ves?
Pongo aquí.
Mirar.
Y directamente, pues, me abre la aplicación aquí.
¿Vale?
La voy a tener aquí abierta.
Básicamente, pues, si hay algún problema con la versión de Android o lo que sea.
¿Vale?
Vale.
A ver.
Le está costando.
Es que al principio, la primera vez que se abre, sí que tiene que compilarse y todo esto.
Así que, buscar QR Code.
A ver ahora.
Venga.
Ahora parece que sí.
Venga.
Ahí la dejo.
Perfecto.
De hecho, ¿veis que aquí pone Building JavaScript?
Esto, el Building este, lo hace en tu máquina, pero luego la aplicación te aparece aquí.
No sé si se ve, pero bueno.
Ahí está la aplicación.
¿Vale?
Perfecto.
Pues, venga.
Vamos aquí con nuestro simulador.
Vamos a ver qué de cosas vamos a hacer.
Tenía por aquí este RayRepositories API.
Esto lo tengo por aquí.
Perfecto.
Muy bien.
Pues, este es nuestro proyecto.
Lo primero que quiero hacer, como hemos visto aquí, es el problemilla este del status bar.
¿Veis el status bar?
Que se ve todo negro.
Vale.
Pues, eso se puede arreglar para que se vea bien.
Porque si no, es súper sencillo de arreglar.
Además, es un color que podéis cambiar dependiendo de la página.
Lo podéis cambiar dependiendo de un estado.
O sea, es genial de lo sencillo que es.
Es una cosa que es de Expo.
Esto es una cosa que trae Expo, que es como la plataforma que estamos utilizando para
construir la aplicación, para que lo tengáis en cuenta.
No es una cosa que venga de RealNative, aunque con RealNative también lo podríais conseguir.
Pero es un poquito más complejo.
Nos vamos a ir...
¿Este GraphQL?
¿Esto qué?
Ah, no.
Esto no es.
Esto es el backend.
Esto lo necesitaremos después.
Ahora, vámonos aquí.
Ahora sí.
Esta es la aplicación.
No quiero los últimos cambios.
Vamos por aquí.
Vale.
Ahora sí.
Ahora sí.
Bueno, igual petardea.
Otra vez, cuando se pone con la cosa esta del editor también, pum, se pone a petardear.
Vale.
Ya tenemos aquí el app.js.
Pues vamos a cambiar el status.
El status bar ese que os comentaba.
Lo vamos a dejar aquí para que se vea de fondo.
Vamos a poner esto por aquí.
Vale.
Genial.
Pues tenemos aquí import.reac.
Bla, bla, bla.
Muy bien.
Pues lo primero que tenemos que hacer sería importar un componente que se llama status bar.
Y esto lo vamos a importar de expo status bar.
Esto es un paquete que instala expo automáticamente.
Si vais al paquete de JSON no lo veréis, pero cuando instaláis expo...
Ah, mira, sí.
Aquí sí que lo tengo.
Esto, pues sí que se instala.
Bueno, pues cuando iniciáis el proyecto ya os lo instala automáticamente.
Yo no lo he instalado, pero cuando inicializamos el proyecto ya lo instalo.
No, nosotros no lo hemos instalado, sino que cuando lo generó, pues ya está.
Vale.
Pues el status bar.
Vamos a poner esto aquí.
Le ponemos un fragment.
Y lo que podemos hacer con esto, ¿vale?
Es justamente utilizarlo como si fuese un componente normal y corriente.
De hecho, casi que me lo chiva.
No es bar style, casi.
Ya estaría bien que un copa y lo supera.
Es style, ¿vale?
Le decimos que el style es light.
Y ahora veis que se ha puesto blanquito.
Pues ya está.
A ver, ¿por qué os digo que esto lo podéis cambiar con el estado o con cualquier cosa?
¿Veis?
Ahí se ha quedado oscuro.
Le podéis cambiar aquí con diferentes...
No sé si podremos ver.
Auto, dark, inverted light.
El auto es por defecto, pero el auto, como podéis ver, no es mágico.
¿Vale?
Es auto, pero no es tan auto como parece.
Tenéis que poner que sea light, ¿vale?
Entonces, con light ya lo tenéis.
Ahora, este valor vosotros lo podéis cambiar con un estado.
Imaginad que tenéis un estado ahí y que dependiendo de la página queréis que sea blanco, que sea oscuro, que sea lo que sea.
Pues eso lo podéis hacer sin ningún tipo de problema, ¿vale?
Solo que sepáis eso, que es totalmente dinámico.
Que es bastante útil que sea dinámico.
Ahora que ya tenemos esto arreglado, vamos a arreglar otro tema que es muy interesante.
Con React Native, que también se quedó de la anterior clase.
Y es tener código específico de la plataforma.
Vamos a ver cómo podemos lograr esto y en qué consiste.
Vamos a poner un ejemplo.
¿Veis que aquí tenemos esta etiqueta de color azulito?
Vamos a hacer una cosa.
Vamos al repository item.
Y aquí lo que podemos ver es que el language tiene este background color, que es theme colors primary.
Voy a hacerlo un poquito más grande, ¿vale?
Así.
Tenemos el theme colors primary.
Y este color, pues si yo le pongo que esto es de color rojo, ¿vale?
Pues ahora es rojo.
Pero imaginad que dependiendo de la plataforma, esto es un ejemplo que podéis tener 10.000 millones de ejemplos, el que sea.
Imaginad que dependiendo de la plataforma, si es Android, lo queréis de un color.
Si es iOS, lo queréis de otro color.
Pues esto se puede conseguir muy fácilmente.
Especialmente con los estilos, suele ser muy útil.
Para ello, lo que tenéis que utilizar es de React Native, esto sí que es una cosa que es nativa, de React Native, importar platform.
Y platform te trae, es como un objeto especial que te trae un montón de información de la plataforma en la que estás.
De forma que solo utilizando esto, aquí en el background color, puedes decir, vale, platform, punto.
¿Veis? Aquí tenéis sistema operativo, versión, constante, si es un iPad, si es una televisión, type, un montón de cosas.
Pero con OS puedes decir, vale, pues si es Android, quiero que lo pongas de color rojo.
Y si no, pues me lo pones de color este.
¿Vale?
Entonces, ahora veremos que aquí está en azul, pero yo, no sé si se verá, pero aquí lo estoy viendo rojo.
Justamente esto, yo tengo un Android, un Android de estos, un Realme, chinillo, y yo lo veo rojo.
¿Vale?
Así que con esto simplemente lo podemos hacer.
Pero, ¿qué pasa?
Que esto está bien, pero es un poco, ¿cómo decirlo?
Incómodo.
¿Por qué?
Porque tienes que mirar, el sistema operativo es Android, esto y tal, y con ternarias.
Pues tiene un sistema todavía mejor para hacer esto.
Y además compatible con la web también.
Mirad, podéis hacer platform, bueno, esto también sería compatible con la web, pero aquí también puedes mirar si es Android, pero podéis mirar si es el default y lo que sea.
Pero es más difícil, ¿no?
Cuando tienes tres ya es un poco más complicado.
Vamos a hacerlo de otra forma.
Vamos a hacer platform.select.
Y este método lo que te permite es pasarle un objeto y en el objeto la key sería el dispositivo.
Por ejemplo, aquí podríamos decir, pues Android queremos que tenga the theme colors.primary.
¿Vale?
El color primario que tenemos ya en el theme.
Y luego aquí en iOS, pues podemos hacer que sea de color naranja.
Y por defecto vamos a poner que es púrpura, por decir algo, ¿vale?
Voy a guardar los cambios.
Ahora, como es iOS, lo que ves aquí, pues está en naranja.
Pero si vamos a la web, aquí, ¿ves?
Aquí es púrpura.
Esto es un ejemplo.
O sea, claro, alguien puede decir, bueno, qué tontería cambiar los colores.
No es por eso.
No es por cambiar los colores.
No es solo por cambiar los colores.
De hecho, tiene utilidades mucho más interesantes.
Como, por ejemplo, estilar de forma diferente el status bar, sin ir más lejos, ¿vale?
O, como haremos después, cambiar la fuente de la plataforma.
Porque dependiendo de la plataforma, quieres una fuente diferente.
O quieres la misma en lugar de utilizar la de sistema.
Pues cosas así.
Pero, bueno, al menos para que sepas cómo lo tendrías que hacer.
Con el platform.select.
De hecho, esto es la forma más, digamos, como la más simple de conseguir esto.
Pero, mira, lo voy a dejar como estaba porque queremos que sea el mismo color para todos.
De hecho, vamos a hacerlo de la fuente.
Para que vemos esto también, que también es interesante hacerlo directamente en el tema.
No hacerlo a nivel de componente.
En el tema, ¿vale?
Teníamos aquí el tema.
Tú puedes importar aquí sin problemas el platform.
¿Os acordáis que en la clase anterior vimos esto del theme?
Aquí importamos React Native.
Pues imagínate que teníamos aquí las fuentes.
¿Veis?
Fonts, main, system.
Pues en lugar de utilizar system, podríamos decir, bueno,
pues, mira, vamos a hacer el platform.select.
Y queremos que para ello sea la Arial.
Pero queremos que para Android sea la Roboto.
Y por defecto, pues que sea system.
Esto está bien porque el día de mañana, bueno, también porque puedes hacer aplicaciones para la tele.
Pero veis que he cambiado y ahora ha cambiado.
Ahora es la Arial, la que tenemos aquí.
Y en el resto, pues, estaría bien.
Pero lo podéis hacer en el theme sin ningún tipo de problema.
No hace falta que lo hagáis dentro de componentes.
Quería enseñar esto para que lo hubieseis claro.
Pero esto es la forma más sencilla, la más baja de hacer esta diferenciación.
Porque tiene una forma mucho más potente de conseguir esto.
A ver, el cambio que hay entre dispositivos normalmente de aplicaciones nativas,
normalmente lo más típico es la navegación, ¿verdad?
En Android la navegación suele ser de una forma, con esas pestañas que están subrayadas,
con material design.
Y en iOS suelen ser, bueno, antes estaban abajo, pero bueno, cada vez van cambiando.
Pero imaginad que queréis utilizar dos formas diferentes de tener la app bar.
Pues esto lo podéis hacer de dos formas.
Una es un poco, no voy a decir, no chunga, pero es un poco rollo, ¿vale?
Imaginad, creáis un archivo que sea iosappbar.jsx, ¿vale?
Le ponéis este nombre mismo.
Y voy a copiármelo porque queremos que sea, imagina que son totalmente distintas.
Pero bueno, en este caso lo voy a hacer así porque no hace falta que implementemos toda la diferencia.
Simplemente lo que quería enseñar es cómo podemos cargar una u otra.
Ahora, en la app bar que estábamos cargando aquí, esto lo voy a eliminar.
¿Veis?
Ahora me dice, vale, app bar no está definida.
Lo que voy a hacer en el componente main, que es donde estamos cargando la app bar,
hay una forma de seleccionar qué componente es el que quiera renderizar dependiendo de la plataforma.
O sea, que podemos hacer app bar igual y utilizamos el platform select que hemos utilizado antes.
Pero ahora, para que veáis que esto no solo podéis utilizar en estilos, que esto es potentísimo,
podemos decir, vale, IOS, si es IOS, quiero que hagas un require del archivo iosappbar.jsx.default.
Porque estábamos exportando el default y tienes que ponerle el punto default,
si no, seguramente nos fallaría.
Bueno, ¿veis?
Aquí ya me está diciendo que puede ser Android, no sé qué, no sé cuánto.
Bueno, en este caso no tengo una de Android, tenemos una por defecto.
Y vamos a hacer un require de la que es por defecto appbar.jsx.default.
Este platform lo tenemos que importar aquí de RealNative y ya está.
Guardamos los cambios.
Vale, ¿qué ha pasado con esto?
Que el IOS bar, no sé por qué, me ha pillado.
IOS appbar, pero ¿ves?
Me ha desaparecido.
Las funciones...
Ah, vale, perdón.
¿Por qué?
¿Por qué?
Porque me falta ejecutar la función.
Este platform.select que vemos aquí, esto se tiene que ejecutar.
En este caso, cuando utilizas como componente, por eso me estaba fallando.
Se tiene que ejecutar.
Ahora sí.
¿Vale?
¿Veis que ahora aparece en roja?
Esto es porque el IOS appbar, yo le he puesto que esto era rojo,
pero puede tener más cambios.
Cambios de cómo se ejecuta.
En lugar de tener un scroll view, pues que tenga otro tipo de forma de funcionar,
lo que sea.
Podéis cambiar lo que queráis.
O sea, de verdad.
O sea, podéis hacer lo que queráis aquí y que sean navegaciones totalmente distintas.
¿Veis?
Yo veo.
Y esto yo lo importo aquí.
Y esto debería funcionar.
¿Ves?
Aquí aparece lo veo, pero podría ser iconos, lo que tú quieras.
En cambio, si ahora vamos a la web, ¿ves?
En la web me sigue apareciendo el otro.
Este sería el default.
Y en Android, yo estoy viendo también el que es por defecto.
Esto, como puedes ver, ya me permite importar diferentes componentes dependiendo de la plataforma.
Esto, ¿por qué te quería explicar este?
Este es muy útil, especialmente cuando tienes que cargar componentes o que ya están hechos o tienes que cargar diferentes librerías o cosas así.
Pero no es la forma correcta o no es la que yo te recomendaría cuando eres tú quien puede crear el fichero.
¿Vale?
¿Por qué?
Porque hay una forma mucho más fácil de conseguir esto cuando son ficheros locales que tú tienes.
Esto tiene sentido cuando tienes una third party library y tienes que cargar una cosa u otra.
Pero en este caso, nosotros lo podemos hacer de una forma mucho más sencilla.
Vamos a tirar todo esto para atrás.
¿Vale?
¿Recuerdas que yo estaba haciendo este import app bar, no sé qué, no sé cuánto?
¿Vale?
En este caso hay que quitarle la extensión.
Por ahora.
Vamos a ver si esto sigue funcionando.
Me debería salir la de antes.
Perfecto.
Todo funciona bien.
Le he tenido que quitar la extensión y ahora verás por qué.
Porque tú lo que puedes hacer es crear diferentes versiones del mismo componente.
Y React Native de forma totalmente automática, sin que tú te tengas que preocupar y no tener que verlo en el código de alguna forma,
hacer esta diferenciación que hemos visto, puedes decir, sí, pues tengo la app bar, que sería la versión por defecto.
Y el IOS app bar, lo que voy a hacer es cambiarle el nombre.
Y le voy a poner app bar.ios.jx.
Lo que estamos diciendo aquí es, vale, tú tienes esta, que es la app bar, y tenemos app bar.ios.jsx, que es la versión que sería para IOS.
En este caso, encima, no sé por qué ahora no lo está haciendo, pero debería funcionar.
No sé si aquí lo he cambiado en el main.
Ahora.
Vale, ¿veis que ahora sí que lo he cargado?
Es porque no había guardado los cambios del main, pero ya decía yo, digo, vale.
Pues veis, aquí está cargando la versión de app bar.ios.jsx.
Podemos poner aquí.
Esta es la versión de IOS, ¿vale?
Esta es la versión de IOS.
Y yo aquí en Android sigo viendo la versión de siempre y en web veo esta.
Y esto, pues podríais tener diferentes versiones.
O sea, igual que tenéis la de IOS, pues podríais crear una para Android y diferenciar las dos directamente.
O sea, podéis tener una por defecto, una para IOS, una para Android y tener tres componentes diferentes.
Obviamente, esto tenéis que evitarlo siempre que se pueda.
O sea, no os volváis tarumbas a hacer esto 10.000 millones de veces.
Pero es una forma que te permite fácilmente de sobreescribir un componente en un dispositivo en concreto.
Y aquí es donde está la magia de React Native.
Porque puedes a lo mejor reusar el 80, el 90% de tu código y ese 10% que hace que la funcionalidad en ese dispositivo o en otro se diferencie, lo puedes hacer muy fácilmente.
Pues ya lo sabes, ¿vale?
En este caso, además, me gusta mucho esta forma porque como podéis ver en el main no hemos tenido que cambiar nada.
Solo esto del importar que te tienes que asegurar que no pones la extensión.
Porque con la extensión, ¿ves?
Con la extensión, como tú le estás indicando claramente qué fichero es, pues no lo hace.
Si le quitas la extensión, funciona correctamente.
¿Vale?
Que lo tengáis en cuenta.
Yo es que estoy muy habituado a utilizar la extensión, pero la extensión ya sabéis que es totalmente opcional en muchos de los proyectos que utilizan Webpack.
Así que ya lo sabéis.
Lo genial de esto, pues nada, que es que no tienes que cambiar nada.
Si tiene una versión, la utilizará.
Pero si no tiene una versión, ¿veis?
La borro.
Guardáis y ya está.
Y no la utiliza.
Punto pelota.
Y esto, totalmente transparente para vuestros componentes.
Lo cual, a mí, si me preguntáis, me parece una maravilla.
Muy bien.
Ya sabemos dos cosas.
Cambiar la status bar de color y también cómo podemos hacer cambios en los componentes para cada uno de los dispositivos.
O sea, tener componentes que solo sirvan para un dispositivo en concreto.
Vale.
Ahora, teníamos pendiente el singing.
Y para esto, formularios.
Y ya que vamos a hacer formularios, pues es interesante que no volvamos a hacer otra, porque podría volver a hacer otra vez los formularios con el useState y todo esto.
Pero no lo vamos a hacer así.
Lo que vamos a utilizar es una cosita que se llama Formic, que es súper famosa.
No sé si la conoces, pero si no la conoces, pues la vas a conocer hoy.
Y seguro que una vez que la conoces, la vas a conocer por siempre.
Yo es verdad que cada vez más utilizo React Forms Hooks.
React Hook Form.
Perdón.
Hook Form.
Esta.
Que me parece bastante simple.
Muy fácil de entender.
Está basada en Hooks solo y está genial.
Y además ocupa menos que Formic.
Tiene un montón de ventajas.
A mí cada vez me gusta más React Hook Form.
Pero Formic es verdad que sigue siendo muy popular.
O sea, popular, no popularísima.
Además la utilizan compañías muy potentes.
Mira, Stripe, Booking, Nasdaq.
O sea, un montón.
Un montón.
Docker también lo utilizan.
Lo utilizan un montón de compañías.
Y además han sacado un proyecto que está muy chulo.
Que lo he visto antes.
Que te permite crear tu formulario así con un editor visual.
O sea, me parece genial.
Me parece genial.
¿Ves?
Word, class, react, ese de qué.
Mira, tú pones Formium Form.
Le dices así el Slack y tal.
Y lo puedes, ¿ves?
Puedes hacer una preview de cómo quedaría.
Y luego lo vas publicando.
No sé.
Me ha parecido brutal.
Obviamente es una forma de ganar dinero.
Porque esto sí que tiene un pricing.
Esto sí que tiene dinero para que hagas el formulario.
Y además por cada vez que alguien hace submit.
¡Cling!
Tienes que pasar por caja.
Pero bueno.
Que no hace falta.
Eso es lo que me ha parecido interesante.
Ese producto que habían sacado.
Ya está.
Pero vamos a utilizar Formic que es totalmente gratuito.
¿Veis?
Aquí no pone nada de pricing.
Y al final lo que es Formic es una librería que te permite, pues,
generar formularios y manejarlos de una forma declarativa y mucho más
sencilla que tener que volver a escribir una y otra vez el state y un change y todo esto.
Especialmente se hace interesante y lo veremos hoy con la validación.
¿Vale?
Vamos a ver formularios y vamos a ver también cómo validarlos.
Y veremos que cuando se validen los formularios, cuando tengamos el tema de la validación, pues,
ahí veremos que es bastante útil.
Así que vamos a utilizar Formic.
Para ello, vamos a crear aquí una página.
Pages.
Y le vamos a llamar login.jsx.
Esta página login, ahora si vamos a main, source, components, main.
Aquí teníamos las rutas.
¿Ves?
Por ahora teníamos working on it.
Working on it era aquí en el singing, working on it.
Bueno, pues, esto lo vamos a cambiar y vamos a utilizar el login este.
Vamos a poner import react from react y vamos a hacer export default function login page.
Y aquí, pues, nada, por ahora vamos a poner text y vamos a decirle aquí working on login form import text from react native.
¿Vale?
Perfecto.
Pues, nada, working on login form y esto ahora lo vamos a utilizar aquí.
Así que quitamos esto, ponemos login page.
Ya me lo ha importado automáticamente, ya puedo quitar el text este.
Vale, ahora sale working on login form.
Perfecto.
Así que ya podemos ir aquí y empezar a picar.
Vamos a instalar Formic.
Formic lo instalamos.
Debería rápido e indoloro.
¿Vale?
Ahora todavía no vamos a ver ningún cambio hasta que no empecemos aquí a darle cañita.
¿Qué vamos a importar de Formic?
De Formic, por ahora, pues, vamos a utilizar en sí mismo Formic.
Luego veremos que vamos a utilizar otras cosas, pero por ahora lo vamos a hacer sencillo.
Vamos a utilizar Formic.
Formic, el cómo funciona es que crea un contexto que va a envolver tu formulario y dentro de ese formulario y de los componentes que están dentro de ese formulario, tú vas a poder utilizar los inputs y mil millones de cosas de una forma mucho más sencilla.
Así que vamos a utilizar Formic y vamos a este formulario, vamos a envolverlo con Formic.
Ahora, esto, vamos a quitar esto, por ahora vamos a dejar, bueno, vamos a dejarlo con el text por ahora.
¿Vale?
Ahora lo he envuelto, pero bueno, por ahora se queja porque no tiene absolutamente nada dentro del Formic.
¿Qué es lo primero que tenemos que decirle a un formulario de Formic?
Lo primero que tenemos que decirle son los valores iniciales de nuestro formulario.
Además, el initialValues también te puede servir para saber justamente qué es lo que tiene ese formulario.
En este caso vamos a tener el email con un string vacío y el password con un string vacío también.
Así que este initialValues se lo pasamos a Formic por props.
Le decimos initialValues igual, initialValues.
Ya tenemos esto.
Muy bien.
Ahora, también que necesita Formic, también necesita un método para decirle qué es lo que tiene que hacer cuando se haga submit de ese formulario.
Así que vamos a poner onSubmit y en este caso lo que recibimos aquí son los valores.
Por ahora voy a dejar un console.log values y lo vamos a dejar así.
Por lo que a uno me interesa ahora mismo es ver qué valores tenía el formulario y ya está.
Ahora que tengo esto, pues Formic funciona de una forma, es un poquito especial,
que a mí tengo que decir que ya no me gusta tanto, por eso te decía que me gustaba más React Hook Form.
Y es que tienes que utilizar una cosa que se llama Render Children o como se llama, o Children Function.
Bueno, al final lo que tienes que pasar, como Children es una función, es un poquito raro.
Era algo que se utilizaba mucho cuando no existían los hooks y a ver, si te habituas, pues no pasa nada.
Ahora con hooks igual ya no sería tan necesario.
Al menos no sé si en una nueva versión de Formic esto lo han cambiado, pero a mí me parece que no.
¿Qué significa esto de Render Props?
Le llaman Render Props, aunque en este caso es una Render Children.
Lo que significa es que como Children lo que envuelve Formic en realidad es una función.
Y ahora veremos cómo funciona.
Voy a hidratarme, que Juan Semprun me lo ha apagado.
Vale.
¡Ay! ¡Hidratación! ¡Yes!
¡Fuerza!
Vale.
Como os decía, lo que recibe como Children es una función.
Por lo tanto, vamos a pasarle una función aquí.
Esta función lo que hará es que al ejecutarse, renderizará lo que le pasamos en la función, aquí.
Así que aquí podemos hacer un return de un view.
Y aquí pues tendremos los text input, que ahora veremos cómo se utilizan.
Text input.
Vamos a poner dos, ¿vale?
Text input y text input.
Ya lo tenemos por aquí.
Esto lo vamos a importar de aquí.
De Real Native y el view igual también.
Si vamos a Sync In.
Bueno, pues por ahora parece que no hay nada.
Pero sí que hay algo.
¿Veis ahí que hay algo?
Ahí hay un input.
Mira, mira.
Hay un input.
O sea, que los inputs ya están.
Así que una render props o un render children en este caso,
lo que estamos haciendo es pasarle una función que al ejecutarse devuelve lo que tiene que renderizar.
Y claro, tú me estabas diciendo, pero qué complejidad.
¿Para qué hacen esto, no?
Porque qué tontería es esta.
Esto era un patrón que se utilizaba con React anteriormente a tener hooks
porque te permitía inyectar en estos componentes una funcionalidad a partir de la función.
¿Y qué funcionalidad es esta?
Por lo que le llega por parámetro.
En estos parámetros aquí tienes diferente información.
Por ejemplo, tendrías un handle change.
¿Veis?
Que ya me lo dice.
Handle change.
Un handle submit.
Y values.
Esto, estos parámetros, lo está inyectando formic.
De forma que dentro vas a tener la oportunidad de hacer un handle change,
un handle submit y saber los valores que tiene el formulario.
Esto luego lo cambiaremos, lo haremos de otra forma.
Pero por ahora lo vamos a ver así.
¿Vale?
Es un patrón que se puede utilizar bastante, que podéis ver que todavía se utiliza.
Así que si...
Uy, a ver, espérate.
Aquí me he colado con uno.
Ahí está.
Es un patrón que todavía se utiliza, así que está bien que te suene.
Pero cada vez vas a ver que se utiliza menos y se prefiere utilizar los hooks.
De hecho, nosotros esto lo migraremos a una especie de hooks.
Lo importante, que ahora que tenemos este text input,
pues nada, podemos hacer que playholder, vamos a poner aquí que esto sea el email
y podemos leer el value de values.email, ¿vale?
Value, lo podemos leer de values.email, porque lo tenemos aquí
y le hemos dicho que en initial values tenemos email.
Y luego además, si queremos cambiar, pues cada vez que cambiemos este contenido,
el texto, lo que vamos a hacer es un handle change
y le vamos a decir que lo que estamos cambiando es el campo de email.
Importante decirle el campo, ¿vale?
Así que cuando cambie esta función handle change,
lo que le estamos pasando en realidad es decirle cuál es el campo que cambia.
¿Ves? Está esperando el fill, no el valor.
Porque internamente ya va a cambiarle el valor.
Es una cosa que ya hace fornic por nosotros.
Esta es la interesante, porque si no hiciese esto ya, pues sería un rollo.
Pero algo tendrá que hacer fornic para hacerse interesante.
Y ya veréis que poco a poco vais a verle más sentido.
Esto mismo que hemos hecho aquí, pues lo deberíamos hacer con el password.
Así que vamos a poner aquí password.
En values esto recibiría el password.
Y en handle change vamos a ponerle que tiene aquí el password.
Ahora no se ve mucho, pero bueno, ya veis que tenemos aquí el email
que podría poner, pues, no he dado clic aquí.
Podemos hacer mi duga, ¿vale?
Y el password.
Poco a poco lo vamos a ir arreglando, pero lo importante es que ya tenemos esto.
Nos faltaría al menos un botón, ¿no?
Un botón que hiciese el tema del zumbit.
Así que hacemos aquí login.
En el button lo que hacemos es que cuando lo pulsemos vamos a hacer el handle zumbit.
Ahora que tenemos todo esto, este button lo tenemos que importar.
Importante.
Must be a string.
Ah, title, vale.
Sí, es que no es un children lo que pasa.
Tienes que ponerle un title.
El title es lo que tendrá el botón dentro, ¿vale?
Ahora sí.
¿Veis?
Aquí tenemos nuestro botón.
Lo importante de esto, este handle zumbit lo hemos sacado de aquí.
Vamos a ver si funciona.
Si yo ahora me pongo aquí a poner un mail y aquí en el password me pongo a poner cosas
y le doy a login, parece que no ha hecho nada.
Pero si me voy a la consola, ¿veis?
Aquí tengo un objeto con el email y el password.
Así que ahora ya, por lo menos, estamos justamente capturando el submit del formulario.
Y le doy a login.
¿Ves?
Aquí tengo justamente el email y el password.
Así que vamos avanzando poco a poco.
Parece que no, pero vamos avanzando.
¿Qué pasa con esto?
Pasan dos cosas, ¿no?
Porque si yo ahora me quiero poner a estilar esto, pues va a ser un poco rollo porque
el text input y bueno.
Vamos a hacer muy rápidamente lo que hicimos con el otro.
¿Os acordáis que hicimos este style text?
Pues vamos a tener un style text input punto jsx que esto nos va a permitir poder estilar
súper fácil este componente y más adelante vamos a tener el tema de los errores que
nos va a evitar tener que tenerlo en los formularios.
Y entonces vamos a tener este componente.
¿Cómo estaría el componente cuando tiene un error?
No lo vamos a hacer ahora.
Lo haremos más adelante, pero al menos ya lo tenemos separado y nos va a permitir
justamente simplificar cuando tengamos algún tema de que sí tiene un error, que sí
queremos cambiarle los estilos, que tenga unos estilos por defecto y todo esto.
Así que vamos a importar el text input from React Native.
Y aquí, pues nada, hacemos súper rápido unos estilos más o menos para darle un poco de
gracia al tema este, ¿vale?
Vamos a tener aquí text input, que yo tampoco que sea diseñador, pero al menos para darle
un poco más de gracia.
Que tenga un border, porque yo al menos ahí no soy capaz de ver qué es lo que tiene.
Le vamos a poner un color cualquiera, que esto debería estar en el theme, pero bueno,
lo dejo de deberes.
Padding horizontal le vamos a dejar 20, para que tenga más padding horizontal que del
vertical, que le vamos a poner 10.
Y un margen para que esté un poco más separado.
Estos serían los estilos.
Y ahora vamos a escribir nuestro componente, que sería style, text, input.
Lo que vamos a hacer aquí, bueno, podríamos tener un estilo, un style y luego el resto
de props.
¿Por qué el style?
Porque el style, lo mismo que hicimos con el otro.
No sé si os acordáis, pero lo que hicimos es que tú le podías poner estilos desde
fuera, los que quisieras.
Así que vamos a añadir el input style, lo que serían los estilos que acabamos de
crear, ¿no?
O sea que styles.textinput, esto que acabo de hacer aquí.
Y además también los estilos que le podamos pasar desde fuera.
Y aquí, pues nada, ya devolvemos un textinput que tenga los estilos, estos que hemos creado
por defecto, más los que se le pasen desde fuera, y el resto de props.
Y exportamos esto.
Export default, style, input text.
El style sheet hay que importarlo de real native.
Y ahora vamos a utilizar este componente en un momentito.
Nos vamos aquí al login.
Importamos from components, style, text, input.
Y donde habíamos visto que antes utilizábamos el text input, pues vamos a utilizar esto de
aquí.
Vale.
Más o menos.
Más o menos.
Tampoco es que sea esto, nada, el mejor diseño que hayáis visto.
Pero bueno, al menos algo hemos mejorado, ¿no?
Igual me he pasado con el padding, pero bueno, no importa.
Ahora si no lo arreglamos un poco.
Voy a ponerle un margen al formulario, a esta vista que tenemos aquí.
Claro que alguien dirá, normalmente esto es importante, ¿vale?
Formic normalmente tiene un componente que se llama form.
Pero en React Native no tiene sentido porque un form renderizaría o intentaría
renderizar un form, y eso no tiene sentido, ¿vale?
Formic es totalmente compatible con React Native, pero no podéis utilizar muchos de los componentes
que ya tiene para utilizarse por defecto, como por ejemplo el form o el field, porque
se renderizan como si fuese en HTML.
Pero sí que lo podemos utilizar como la parte más interna de la gestión del formulario.
Así que nada de form, ¿vale?
Vamos a ponerle style, styles.form, para darle aquí una separación.
¡Ay!
Style sheet que no ha importado tampoco.
Vale.
Bueno, ya tenemos esto.
Bueno, un poquito mejor.
Un poquito mejor.
Tampoco es que sea la bomba, pero un poquito mejor.
Vale.
Un problema que ya puedes ver que nos estamos encontrando aquí es que, claro, tú me dirás,
oye, Midu, esto está genial, ¿no?
Pero, a ver, a ver, me has dicho que Formic me iba a simplificar la vida y yo aquí no
veo tampoco que me esté simplificando mucho.
Por lo tanto, dime dónde está el truco.
Yo te lo digo dónde está el truco.
A ver, necesitamos por un lado, para simplificar un poco este código que se ve como, además,
más repetitivo, ¿verdad?
El handle change, demasiado repetitivo.
Y hemos dicho que esto, queríamos utilizar Formic para simplificar esto.
Podemos crear un componente que nos ayude a simplificar esto.
Gracias a dos cosas.
Uno, a componentizar y otro, a los hooks.
Porque Formic tiene hooks.
Y con los hooks vamos a poder recuperar desde dentro de cualquier componente que esté
envuelto por Formic, vamos a poder recuperar los valores, cómo actualizar los campos y
todo esto.
Así que vamos a hacerlo.
Bueno, voy a crearlo aquí, pero bueno, más adelante igual lo sacamos fuera.
Por ahora voy a dejar aquí el componente.
Le vamos a llamar Formic Input Value.
Y vamos a extraer de las props, por un lado, el nombre del campo y el resto de props.
¿No le gusta, no?
Sí, sí que le gusta.
Vale.
¿Ahora qué tenemos que renderizar?
Bueno, pues lo que vamos a renderizar, en este caso, será el style text input.
Voy a pegarme a este mismo.
Por ahora, esto es lo que tiene que renderizar.
Solo que todo lo que estamos viendo aquí ya no tiene tanto sentido como lo hace.
El value, bueno, estos dos sí que tienen sentido, pero lo vamos a sacar de otro sitio.
El playholder es una cosa que le pasaremos desde fuera, ¿vale?
Porque tiene sentido.
Pero ¿de dónde sacamos los valores y el handle change?
¿Se lo pasamos por props?
No, porque si se lo pasamos por props es exactamente el mismo problema que teníamos antes.
Lo que vamos a hacer es que a través de la prop le vamos a decir el nombre del campo.
Le podemos llamar name o le puedes llamar field, como quieras.
Creo que name tiene más sentido.
Ahora, lo que vamos a hacer es utilizar este custom hook que se llama useField.
El useField se importa de Formic, ¿veis?
UseField de Formic.
Y le vamos a pasar el nombre del campo, el name.
Este custom hook devuelve un array de tres posiciones.
En la primera posición tienes el campo, ¿vale?
La información sobre el campo.
Por ejemplo, ¿cuál es el valor del campo que has pasado?
Pues si en name le pasamos email, ¿cuál será el valor?
En fill.value tendremos el valor del email.
Luego, como segundo elemento, tenemos meta.
Meta es como la metainformación del campo.
Y puede tener desde las validaciones, errores que hayas encontrado, cosas así.
Que nos va, ahora no lo vamos a usar, pero más adelante nos va a ayudar.
Y de tercero tenemos lo que se llamarían helpers.
En este caso, ¿cómo actualizamos el campo?
Pues a través de los helpers tenemos el set value.
Pues con el set value lo haremos.
Así que ya os he hecho un poco spoiler de dónde vamos a sacar cada cosa.
El values.email, pues en lugar de values.email vamos a utilizar field.value.
¿Vale?
Field.value.
Porque es el que va a tener el valor del campo que nosotros le indiquemos por las props.
OnChangeText, ¿de dónde vamos a sacar?
Pues de la misma forma vamos a utilizar, aquí tendría el value, sería helpers.
Ya ves que si AD es punto, ¿veis que aquí ya te salen las opciones?
Pues set value.
Y le pasamos el value.
Y con esto ya tendríamos, por un lado, la forma de leer el valor y por otro lado, cuando se cambia este input.
Y solo lo escribimos una vez.
Y esto ya lo podemos reutilizar tantas veces como queramos.
Le pasamos el resto de props, que le llegaría por aquí, para que si le pasamos un playholder o lo que sea, pues lo pueda utilizar.
Y ves que el meta pone que no lo usamos.
Bueno, luego lo usaremos, el meta, ¿vale?
Así que ahora este styleTextInput, en lugar de esto, vamos a utilizar el formicInputValue, el playholder, este lo dejamos, pero le quitamos lo demás.
Lo que le tenemos que decir ahora es que el name de este campo es email.
Y el name de este campo es password.
Y con esto vamos a tener la gestión del estado de esos valores sin necesidad de utilizar el handleChange que tenemos aquí, ni los values que tenemos aquí.
Y, hombre, ya empieza a mejorar, ¿no?
Ya se ve un poquito mejor.
De hecho, vamos a ver si esto funciona correctamente.
Vamos a ver, esto por aquí.
Probando, probando, hacemos login.
Y si vamos al console.log, pues aquí tenemos el objeto, ¿vale?
Lo interesante es que esto que he creado aquí lo vamos a utilizar en este formulario y cualquier formulario más adelante que necesitemos.
Así que ya lo tendríamos resuelto en un solo sitio y ya está.
Vale, pues ya hemos renderizado esto, ya tenemos el formicValue.
Bueno, hay un tema que esto es el password, se supone, ¿vale?
No tiene mucho sentido enseñar el password.
Hay un campo que se llama SecureTextEntry, que este campo que le pasamos aquí al formicInputValue vendría por aquí como prop.
Y las props se la pasaría a StartTextInput y StartTextInput se lo pasaría finalmente al TextInput, que es un campo del TextInput, ¿vale?
El TextInput es nativo de React Native y le puedes pasar este SecureTextValue, TextEntry, perdón, que lo que hace es justamente ocultarlo, ¿vale?
Como si fuese TypePassword de HTML normal y corriente.
Bueno, pues hasta aquí el tema del formulario, pero obviamente esto, si yo le paso aquí mi Duga o mi Dev y no le paso bien un mail, pues parece ser que por ahora podemos enviar este formulario.
Esto no tiene ningún sentido y vamos a ver cómo lo podemos solucionar, ¿vale?
Pero antes os voy a leer un ratito, un momentito, y os voy a ver qué me contáis.
Les voy a dar las gracias a toda la gente que se ha suscrito, que está escuchando la musiquita.
Hysteria9, que además me ha dicho que enhorabuena por el GDE.
A Sito Bill, que renueva la suscripción con Prime y ya tiene dos meses de antigüedad.
Y Yomar Sánchez, que se ha suscrito durante un mes en nivel 1.
Desorder también se ha suscrito con nivel 1.
Se ha suscrito Sachiel Code, con Prime también.
ByteLovers, que renueva 5 meses.
Madre mía, qué cracks.
Oye, muchas gracias a todos los que me apoyáis.
Juan Pablo Solana también se ha suscrito y te ayuda 4 meses.
Y el Mango, que tenéis aquí, el nuevo...
Mira, aquí está.
Este soy yo, con la tacita del This is Fine.
Y ahí estoy temblando de la emoción de que el Mango 80 también se ha suscrito.
En el Meta irían los ARIA.
En el Meta irían los ARIA.
Esto no es que...
O sea, en los Meta no es que fuesen los ARIA.
O sea, la información del Meta que veis ahí es más la información...
Lo podemos mirar un poco en Formique.
No sé toda la información porque yo solo la utilizo como para el tema de los errores.
¿Vale?
Ves que pone aquí Feel Meta.
Vale, por ejemplo...
Mira, os enseño esto.
Ves que pone Feel Meta.
Por ejemplo, para saber si se ha tocado ese input.
Ahí tenéis esa información en el Meta.
Pero yo creo que...
Feel Meta Props.
Mira, vamos a ver aquí los valores que tiene esto.
A ver, ¿dónde está el buscador?
Aquí.
Feel Meta Props.
Aquí tenemos.
Error, Initial Touch, Initial Value, Touch y Value.
O sea, no.
Es que Meta es...
Es como información relevante del propio campo.
¿Vale?
Del campo en el que estamos trabajando.
Por ejemplo, si tiene un error.
¿Qué error es?
Cosas así.
No tiene nada que ver con poner ahí los áreas o temas de accesibilidad.
Que eso sería un tema más del text input nativo.
¿Utilizarás Jap?
Yep, yep.
Sí, lo utilizaremos.
¿Hay mucha diferencia entre React y React Native Web?
No, no hay mucha.
Pero sí que es verdad que hay alguna.
Y os las intento ir explicando.
Por ejemplo, en React Native el único campo, el único componente que podéis utilizar para renderizar texto es Text.
En React tenéis todo el HTML, el h1, el h2, el h3.
Hace mucho que arranqué.
Hace una hora casi.
Y sí que os subiré a mi canal de YouTube.
En midu.tv.
Si queremos poner el ojo en el input de la contraseña para ver lo que escribimos, lo podemos poner en React Native.
Si queremos poner el ojo...
Sí, claro.
Eso no da ningún problema.
Se pueden estilar los inputs.
A ver, no lo he estilado ni los vamos a estilar.
Pero bueno.
¿Recomiendas Dart y Flutter?
¿Cómo me preguntas esas cosas cuando estamos hablando de React Native?
Vamos a ver.
Vamos a ver.
A ver.
Sí, no los he tocado.
Por lo tanto, no tengo ni idea.
A ver, Dart por sí mismo es un lenguaje de programación.
Entiendo que es más la pregunta por Flutter.
Pues puede ser.
Me imagino que depende de muchas cosas.
No, hombre.
Van, no.
Van.
Venga, va.
Van.
Currupipi...
Nah, broma.
Currupipi Mix.
Yo tenía ese disco, por cierto.
Yo tenía ese disco.
A ver, Formic es genial.
Sí, es genial.
Pero es verdad que React Hookform está muy chulo.
Y además, al estar basado en hooks, es totalmente compatible con React Native.
Si os gusta más React Hookform, pues adelante.
Que no hay ningún problema.
¿Vale?
¿Vale?
También soporta lo mismo cambiando el nombre a iOS.
Sí, Mateo.
Muy bien, Mateo.
Ahí estaba súper atento en lo que he explicado, justamente.
Que poniendo el sufijo de .ios y .andrew también funciona.
Pero os quería comentar los dos justamente porque me parece interesante.
¿Harás animaciones?
Yo creo que no.
¿Aún usas el Copilot?
Pues lo estáis viendo, ¿no?
No, ya lo habéis estado viendo.
¡Ey, Redo!
Muchas gracias por tu sub.
Cinco meses ya.
Qué crack.
Muchísimas gracias.
Pues venga, vamos a darle.
Vamos a darle.
¿Qué fachero?
Andas con tu Midu camisa.
Es verdad.
Tengo...
Mira.
Tengo una camisa de Midu.
De MiduDev.
A ver, se ve ahí.
Mi logo.
Genial.
Vale.
Vamos a seguir.
Va.
Vamos a seguir.
Vamos a seguir.
A ver que sabemos esto.
Esto fuera.
Voy cerrando.
Voy cerrando por aquí.
Vamos con el tema de las validaciones.
¿Vale?
El tema de las validaciones.
Os voy a enseñar cómo se puede hacer de una forma nativa.
A ver, ya sabéis que a mí me gusta enseñaros...
O sea, no...
Toma, Jup.
Ya está.
Si no, me gusta enseñaros un poco las opciones que tenéis.
¿Por qué se utiliza uno?
¿Qué es la ventaja que te da uno u otro?
Y cosas así.
Así que, bueno, vamos a verlo.
En Formic puedes validar de dos formas distintas.
Una que sería la más nativa o más custom o como le quieras llamar.
¿Vale?
¿En qué trata esto?
Pues que tú puedes tener, por ejemplo, una función,
la vamos a llamar validate, que va a recibir todos los valores
del formulario.
Todos.
Y aquí vamos a tener los errores en un objeto y vamos a decir,
mira, si el email no está entre los valores,
vamos a decir que errors.email, pues es required.
¿Vale?
Tenemos un error en el campo email.
Y es que hemos dicho, email is required, por ejemplo.
Aunque yo creo que es required.
Bueno, vamos a dejarla así.
No tiene mucha historia, pero ahora veremos cuál es la diferencia de estos dos.
Esto si no existe el email, pero si existe el email,
lo que podemos mirar es hacer este pedazo de churro,
que básicamente lo que va a hacer es asegurarnos que el campo email
tiene un valor que es un email.
¿Vale?
Perfecto.
Ahora, si el campo email no sigue esta regex,
que esta regex se supone que lo que hace es mirar que el campo sea un email,
o sea, que tienes un arroba, que tienes punto, lo que sea,
y todo esto, de hecho, a ver, tampoco es muy complicado.
Aquí tienes todo el texto, luego el arroba, todo el texto,
en algún punto tienes que tener un punto, lo veis aquí,
y luego el dominio, bueno, el dominio.
Luego el punto com o lo que sea.
Puede ser punto es o esto que sean cuatro,
no estoy muy de acuerdo porque punto line existe.
O sea que este es el problema de las regex,
que las tienes que ir arreglando.
Igualmente, que vamos a decir que error es email,
pues invalid email address.
¿Ok?
Vamos a poner un console.log de los errors por ahora,
porque si no, no vamos a enterarnos,
y vamos a devolver los errores.
Ahora, este método validate es una forma de validar.
¿Dónde hay que utilizarlo?
Pues nada, en formic tiene una prop que es validate,
le pasamos validate,
y así tú puedes validar los campos a mano,
uno a uno, como tú quieras.
¿Ok?
Esto es como tú lo puedes hacer.
Bueno, os paso la regex,
que alguien me ha dicho que la pegue,
por si a alguien le interesa,
pero seguramente podéis utilizar una regex mejor,
y de hecho luego no la vamos a utilizar.
Ya lo digo yo, spoiler.
De hecho ya veréis cómo lo hacemos.
Ahora que tenemos esto,
vámonos a nuestra app,
vamos a poner aquí bla, bla, bla, lo que sea,
le voy a dar a login,
me voy a la consola,
y fíjate lo que me pone, ¿vale?
Todos los errores.
Email y require,
invalid email address.
¿Por qué require?
Porque claro, yo cuando he borrado,
me dice email y require,
pero si me pongo a escribir,
pues invalid email address.
O sea que,
esto no funciona,
en el sentido de que se ha hecho la validación,
pero no estoy viendo absolutamente nada aquí.
Esto lo tenemos que arreglar,
obviamente.
Vamos a hacer dos cosas para hacer que esto funcione,
para que visualmente la aplicación lo podamos ver
y tenga todo el sentido del mundo.
Aquí en el formic input value,
lo primero que vamos a hacer es un fragment aquí,
y aquí lo que vamos a mirar es el meta.
¿Por qué?
Porque con el meta,
podemos hacer meta.error,
y aquí tenemos styled text.
Styled text es un componente que ya teníamos.
Mira,
está el color red.
Lo que pasa es que este style no es exactamente así,
pero bueno,
está bien intentado.
Vamos a ponerlo aquí.
Error.
Vamos a poner aquí el color,
que sea red.
Color red.
Y aquí le vamos a poner styles.error.
Meta error.
Vale.
Tengo que importar esto,
que no lo he importado.
Este componente con los textos,
components,
style text input.
Vale.
Volvemos aquí.
Vale.
Lo que he hecho simplemente es,
si el meta,
que es el que os decía,
que es un objeto que tiene la meta información del campo,
entre esa información está si tiene algún error.
Si tiene algún error,
lo que vamos a hacer es enseñar un mensajillo debajo,
que con un estilo en concreto,
en rojo,
nos enseñe el error.
Vale.
Voy a poner esto para que se lea un poco mejor.
Así.
Vale.
Me está,
esto está pasando un poco de mí.
Me está cambiando.
A ver.
Pues nada,
lo dejo como estaba.
En una línea.
Porque me está formateando y se vuelve loco.
Así que,
si yo ahora escribo,
vale,
fíjate,
invalid email address.
Y si borro,
email is required.
A ver,
tendríamos que mejorar un poquito los estilos.
¿Eh?
Que he puesto error.
Vamos a poner aquí font size,
un poquito más pequeño.
Margin,
bottom 20.
Margin top.
Bueno,
esto da igual.
No sé si se puede,
a ver,
¿se pongo menos 10?
Hostia,
sí,
qué bueno.
No sabía,
no me acordaba,
se podían poner negativos.
Vale,
al menos esto,
¿no?
Ahora sí que tenemos,
bueno,
igual me he pasado de pequeño,
¿vale?
Pero vamos a ponerle 12.
Un poquito mejor.
Nos falta un detallito,
y es el input,
el borde.
Vamos a hacer esto también en un momento.
Para arreglar esto,
deberíamos ir más al style text input.
Podríamos tener una proc que fuese error,
de forma que si tenemos un error,
pues el border color sea red,
¿vale?
Error,
esto lo voy a cambiar a un array,
porque ya sabíais que los estilos pueden ser arrays,
también,
y es mucho más fácil que sea un objeto.
Así lo que podemos hacer es pasarle styles,
text input,
style,
y le podemos pasar el error,
solo si es cierto que
tenemos un error como prop.
O sea,
si la prop esta,
se la estamos informando,
lo que va a hacer es añadir
styles punto error.
Vamos a guardar los cambios,
y ahora me faltaría pasarle aquí,
obviamente,
la prop error,
que sí tiene un meta punto error,
¿vale?
Vale,
esto por aquí.
Vale,
ahora ya tenemos el borde,
¿vale?
Rojito,
como está mucho mejor,
¿no?
Si pongo uno bueno,
pues se deja de quejar.
Pues con esto ya tendríamos la validación,
aunque fuese un poquito manual,
un poquito bastante manual.
Esto no suele escalar muy bien,
especialmente,
a ver,
puede sacarte de un apuro,
en el caso uno,
que ya tengas las validaciones de otro formulario,
te las que vas a traer,
y estén hechas en JavaScript,
y lo que sea,
o sean campos muy complejos,
ya raro es,
pero bueno,
puede ocurrir,
pues es una forma de hacerlo.
Para formularios que sean muy sencillos,
a lo mejor te puede servir,
hacer este tipo de validación.
Pero bueno,
podríamos añadir la validación del formulario,
o sea,
del campo,
del password,
y pues empezaría esto a crecer,
a crecer,
y no nos iríamos a comer.
Así que,
y hay muchos formularios por delante.
Bueno,
tenemos este login,
el registro,
y luego otro más,
así que vamos a hacer otra cosa.
Vamos a utilizar
job,
o job,
o job,
o como se diga,
¿vale?
Job,
job,
es un creador,
de esquemas de validación,
para,
en este caso,
para formularios,
pero pueden ser para validaciones de objetos,
de 2.000 millones de historias,
¿vale?
Lo que te permite es,
utilizando un objeto,
puedes ir diciendo,
vale,
quiero que,
lo que quiero validar,
tiene que ser de este tipo,
y tiene que tener esta forma,
y tiene que tener estos tipos,
y tiene que ser un email,
y tiene que ser esto,
y tú además,
le puedes,
puedes crear incluso funciones,
para,
por si quieres,
validar de forma manual,
tienes un montón de formas,
pero lo interesante de esto,
es lo fácil que se lee,
y lo bien,
que puedes concatenar,
además,
veis,
que job,
punto string,
punto require,
o sea,
que al final,
puedes ir concatenando,
todas las validaciones,
nada,
tienes que escribir,
es mucho más declarativo,
que justamente con React,
es lo que nos interesa,
así que es mucho más fácil,
de entender,
de manejar,
no tienes que preocuparte,
tanto de validar,
de escribir,
así que,
es el que vamos a utilizar,
y es totalmente compatible,
con Formic,
vamos a ver,
lo único que tienes que hacer,
npm install job,
además,
no es muy grande,
es una,
paquete bastante chiquitito,
y ahora tenemos que escribir,
una validación,
para el esquema,
que el esquema,
tienes que entender,
que es como un contrato,
de lo que queremos,
lo que esperamos,
en el formulario,
en el formulario,
si miramos en initial values,
es un objeto,
donde tenemos dos campos,
email y password,
que son strings,
y ahora,
esos strings,
vamos a querer,
o sean requeridos,
o que no sean requeridos,
y que tengan,
más o menos,
longitud de string,
y que uno sea un email,
y cosas así,
pues eso es lo que vamos a hacer,
vamos a crear aquí,
una nueva carpeta,
le vamos a llamar,
validation schemas,
barra,
login punto js,
y aquí vamos a importar,
todo lo que,
exporta,
japp,
como japp,
y vamos a crear,
nuestro esquema,
para que nos sirva,
de validación,
lo vamos a exportar,
esta constante,
que es,
login validation esquema,
que es lo que tiene,
mira,
si es que ya lo sabe,
ya lo sabe esto,
ya lo sabe,
que es lo que esperamos,
que tenga el formulario,
en los values,
esperamos un objeto,
que tenga una forma,
entonces japp.object,
y ahora le hicimos,
la forma de este objeto,
este objeto,
hemos dicho que tiene,
por un lado el email,
y el email que tiene que ser,
pues tiene que ser,
japp.string,
y esto,
a mí me gusta hacerlo así,
aquí cada uno,
que como quiera,
a mí me gusta,
hacer aquí un salto,
y digo,
es un string,
también quiero que sea,
un email,
y además,
es requerido,
ahora,
si por lo que sea,
quieres,
mira,
voy a cerrar por aquí,
para que deje de dar errores,
si por lo que sea,
esto serían,
todas las validaciones,
que va a hacer,
sobre el campo email,
así que cualquier validación,
que no pase,
pues fallará,
si por lo que sea,
hay alguna,
alguna de estas validaciones,
que quieres que dé un error,
en concreto,
común,
o sea personalizado,
porque ya tiene sus propios errores,
pero a lo mejor tú quieres,
no sé,
cambiarle el error,
le puedes pasar un string,
por ejemplo,
require,
pues ponemos,
email is required,
y así veremos la diferencia,
entre el error del email,
que no lo hemos personalizado,
y ya tiene uno,
por defecto,
y el de require,
que le hemos puesto nosotros,
el que hemos querido,
vale,
lo mismo que email,
pues la forma,
que tiene este objeto,
tiene password,
yap,
es un string,
y aquí podemos decir,
pues como mínimo,
que tenga cinco caracteres,
y si no,
le decimos que es demasiado corto,
si falla,
como máximo,
pues podemos decir,
que tenga mil,
y porque yo que sé,
no podemos,
por lo que sea,
no podemos introducir,
passwords en la base de datos,
que sean de mil,
más de mil carácteres,
a ver,
que no tiene por qué pasar,
pero podemos decir,
que sea required,
y entonces aquí,
pues decir un password,
is required,
vale,
y esto sería una validación,
un esquema,
súper sencillo,
y además,
reutilizable,
muy fácilmente,
lo puedes reutilizar,
puedes ir separando esto,
podrías hacer,
que esto estuviese aparte,
y siempre tenga,
las mismas validaciones,
para los campos de email,
lo podrías hacer,
sin ningún problema,
o sea,
que es muy,
componentizable,
también este tipo de validaciones,
y es muy sencilla,
de entender,
y de,
y de mantener,
así que,
así lo vamos a hacer,
este login validation schema,
vamos al login,
vamos a eliminar,
este validate,
que habíamos hecho,
fíjate,
la de código,
nos quitamos en un momento,
vamos a importar,
el login validation schema,
de barra,
login,
a ver,
que esto me la da sobre,
validation schemas,
barra,
login.js,
y aquí viene un cambio,
¿vale?
En lugar de validate,
en la prop validate,
aquí tiene otra prop for me,
que es validation schema,
este,
validation schema,
y le pasamos justamente,
el validation schema,
que hemos creado,
guardamos los cambios,
y ahora aquí,
vale,
voy escribiendo,
el email is required,
este error,
lo he puesto yo,
¿vale?
Este error,
de que fuese requerido,
de esta forma,
lo he puesto yo,
de hecho,
lo podríamos cambiar,
para que veas,
le pongo aquí,
un montón de exclamaciones,
vale,
¿veis?
que ahora pone todas las exclamaciones,
pero el que sea,
un email válido,
por ejemplo,
cuando escrito,
este email,
vas via valid email,
esto no lo he escrito yo,
por lo tanto,
esto lo podríamos poner aquí,
nosotros lo podríamos cambiar,
y podemos decir,
vale,
pues el mensaje es,
escribe un mail válido,
hombre,
por ejemplo,
¿vale?
Entonces ahora cuando escribamos,
pues cambia,
lo que queráis,
en este caso,
le vamos a dejar por defecto,
pero para que sepas que está esta opción,
y fíjate que el password,
pues también se está quejando,
con esto,
ya tendríamos la validación,
estaría funcionando bastante bien,
dentro de lo que cabe,
o sea,
que ya tendríamos esto,
y luego aquí,
pues lo mismo,
¿no?
Estamos escribiendo demasiado corto,
luego voy escribiendo,
y ya está bien,
podrías poner cosas,
ya esto podría darme para una clase entera de JAP,
de hacer validaciones custom,
de ver si tiene símbolos,
si tiene todo tipo de cosas,
de hecho,
JAP también puedes tener subpaquetes,
o plugins,
que la gente hace para añadir más validaciones,
o sea,
hay mil millones de historias,
pero con esto,
ya tendríamos la validación del formulario,
que es lo que nos interesaba,
y ya está,
así que vamos a cerrar todo esto,
lo que hemos dejado por aquí,
cerramos todo,
y ahora vamos con la comunicación,
con el servidor,
vamos a ver cómo con RealNative,
podemos primero utilizar Fetch,
cómo lo deberíamos hacer,
qué problemas nos podemos encontrar,
trabajando en local,
y aquí,
que todavía tengo mi aplicación,
qué problema me puedo encontrar con el móvil,
si lo utilizo desde fuera,
y también vamos a ver cómo instalar Apollo Client,
y inicializar,
porque es una cosa que me preguntaste,
es la otra clase,
cómo se podía estudiar Apollo,
y vais a ver que es súper fácil,
el backend no lo vamos a hacer,
el backend ya viene hecho,
así esto que nos quitamos también,
porque,
porque bueno,
ya hemos hecho un montón de clases de backend,
y sería volver a repetir exactamente lo mismo,
y no creo que valga la pena,
así que el backend,
la URL es esta,
que vamos a utilizar,
fullstack,
guión,
hd1,
2020,
barra,
repositorio,
API,
os la dejo en el chat,
y en la descripción,
por si lo queréis,
vale,
y vamos a ver cómo se tendría un poco que configurar,
y si conseguimos configurarlo,
y todo esto,
me la voy a aclarar aquí,
git clone,
y aquí tendríamos el git,
arroba github,
que me lo he puesto de aquí,
de code,
¿veis?
Yo tengo un ssh,
cada uno,
a lo mejor,
hay gente que lo puede tener en http,
entramos,
e instalo todas las dependencias,
de hecho aquí creo que salen todos los pasos que hay que dar,
vale,
funciona con la API de github,
solo tiene 60 requests por hora,
a ver,
si no la vais a utilizar mucho,
a lo mejor es suficiente,
pero si no,
ya te dice por aquí,
que lo ideal sería hacerse una aplicación,
la voy a hacer en un momento,
para que no nos dé ningún problema,
de,
no sé,
algún error,
o lo que sea,
este sería el proyecto,
no lo vamos a mirar,
lo interesante,
más bien está en .env,
.template,
ya os digo que tiene tanto una REST API,
como un GraphQL,
una GraphQL,
que es así,
que lo vamos a ir utilizando,
y que vamos a tenerle que poner unas variables de entorno,
así que voy a crear aquí el .env,
voy a copiar el template,
y aquí,
ah,
que maravilla este plugin,
¿veis?
no se ven los valores de las cosas,
genial,
vale,
voy a crear en un momento la aplicación,
me voy aquí a settings,
developer settings,
OAuth apps,
y creo una nueva aplicación,
la voy a,
vamos a ver como la llamo,
la voy a llamar,
jade repository app,
vamos a poner cualquier URL,
no hace falta que sea ninguna en concreto,
aunque la authorization callback,
esto sí que puede ser importante,
¿vale?
Vamos a poner el puerto en el que se inicializa,
el backend,
que es el puerto 5000,
en principio no debería dar ningún problema,
pero por si acaso lo vamos a hacer así,
que sea justamente el mismo puerto que sé que inicia el backend,
registramos la aplicación,
y aquí vamos a tener dos ideas,
el client ID,
que este me lo copio,
y lo voy a pegar por aquí,
y el secret,
el secret que,
un momento,
que ahí sí que se ve,
y sería,
voy a generarlo,
me pide la contraseña,
vale,
copiar,
y ahora aquí sí que debería poder pegarlo sin que se vea,
bueno,
eso parece,
bueno,
ya lo he configurado como debía,
ahora vamos a ver qué más cositas,
ay,
no me digas que he cerrado,
he cerrado la URL,
aquí,
perdón,
aquí estamos,
ahora hay otros pasos,
¿vale?
¿qué es?
Hacer un mpn run build,
porque por ahora utiliza una base de datos de SQLite,
que a nosotros no nos importa,
pero lo importante es que la tenemos que inicializar,
así que mpn run build,
luego lo vamos a inicializar con una información que trae de una semilla,
básicamente es información que ya tiene ahí,
y va a añadirle pues unos repositorios,
información que,
para que nuestra aplicación no esté vacía,
claro,
bueno,
se ha quedado,
se ha quedado,
se ha quedado,
se ha quedado,
se ha quedado pinchado,
a ver,
otra vez,
he puesto el mismo,
mpn run,
sit,
run,
a ver,
ahora sí,
no sé,
se había quedado,
ahora sí,
run,
treat,
sit,
cuando se habla de sit,
es semilla,
y esto muchas veces cuando estás en una API y cosas así,
te pueden dar como unos datos de ejemplo,
de prueba,
para que tu aplicación,
tu API no esté vacía,
entonces ejecutas este fichero semilla,
que ya tiene como un montón de información de prueba,
o de ejemplo,
o de lo que sea,
vale,
ya hemos hecho estos tres,
pues ya podemos inicializar la API,
vamos a ver,
mira que interesante,
en más click modules,
este paquete SM,
vale,
pues ahora que ya tenemos esto,
en el puerto 5000,
fíjate,
ya tenemos aquí la API,
y ya podemos hacer una llamada,
y esta sería la información que nos devuelve,
podemos mirar en los docs,
a ver todas las queries que tiene,
para mirar los repositorios,
los usuarios,
los usuarios autorizados,
repositorios,
mutaciones para crear usuarios,
todo esto lo vamos a hacer,
crear la review,
borrar una review,
todo esto es lo que vamos a necesitar,
para nuestra aplicación de RealNative,
también aparte de esto,
tiene justamente,
si no recuerdo mal,
en el puerto 5000,
tiene una REST API,
que es con la que vamos a empezar,
y lo que hace es devolvernos,
pues la lista de repositorios,
porque si recuerdas,
los repositorios que ahora mismo estamos viendo aquí,
estos repositorios en realidad,
son trampa,
¿por qué?
porque estos repositorios,
en realidad están aquí,
están en un archivo javascript,
y esto no es la forma de funcionar,
normalmente,
claro,
vamos a hacer,
vamos a hacer que esto,
traiga los datos del backend,
como tiene que ser,
vamos a hacer un custom hook,
y vamos a ver,
qué problemas nos podemos encontrar con esto,
vamos a componentes,
nos vamos a repository list,
si no me equivoco,
vale,
en esta línea,
ves esta línea,
aquí se está haciendo el import,
de los repositorios de este fichero,
bueno,
pues esta línea,
fuera,
lo que pasa es que ahora el repositorio está vacío,
vamos a arreglar esto fácilmente,
repositories,
y hacemos esto,
vale,
ahora no tenemos repositorios,
lo que tenemos que hacer,
pues es hacer una llamada a nuestro backend,
vamos a ir encrechendo,
vale,
lo hago aquí,
luego lo extraigo,
luego veo un poco qué problemas nos podemos encontrar,
y todo esto,
vamos a inicializar un estado,
set repository,
mira,
muy bien,
muy bien,
Gihaco Pilot,
vas mejorando,
vas mejorando,
vale,
yo sé,
set,
primero los repositorios,
es una arribación,
ahora lo que vamos a querer hacer,
pues sería un fetch repositories,
vamos a hacer que esto es una función asíncrona,
y de dónde vamos a hacer el fetch,
esto es una cosa que es súper interesante,
de React Native,
y que mucha gente,
mira,
joder,
me está diciendo casi todo lo que quiero hacer,
fetch,
y
XMLHttpRequest,
están disponibles,
son APIs,
que están disponibles en React Native,
¿qué quiere decir esto?
Que podéis utilizar fetch,
y podéis utilizar
axios,
podríais instalar axios,
y utilizar axios,
si queréis,
entonces,
¿qué significa esto?
pues nada,
vamos a hacer response,
de la wait,
de global.fetch,
bueno,
voy a utilizar fetch,
y os voy a explicar por qué utilizo el tema de global,
¿vale?
Fetch,
y aquí,
tendríamos que utilizar la URL,
que justamente utilizo aquí,
localhost 5000,
AppleRepositories,
que es la que me va a devolver toda la información de los repositorios,
y nada,
vamos a transformar esto a un JSON,
y hacemos un setRepositories JSON,
y ahora en los repositorios tendremos el JSON,
pero este método lo tenemos que llamar antes,
¿dónde lo llamamos?
useEffect,
llamamos este método,
y lo llamamos solo la primera vez que se renderiza,
después de renderizarse,
cuando se monta,
entre comillas,
¿vale?
Muy bien,
con esto deberíamos tener ya nuestros,
a ver,
por aquí,
nuestros repositorios,
vamos a guardar los cambios,
ah,
me falta una cosa,
me falta una cosa,
importante,
porque si miramos la API,
veremos que esto nos devuelve edge,
node,
o sea,
nos devuelve como,
no nos devuelve aplanados los repositorios,
sino que tenemos que mapear la información,
así que para tener realmente los repositorios,
tenemos que poner aquí repository nodes,
y si tenemos repositorios,
vamos a mapearlos,
vamos a hacer un repositories,
repositories,
repositories.edge,
¿vale?
porque veis que pone edge,
pues dentro de edge,
por cada edge,
vamos a mapear,
y de cada edge,
lo que queremos es devolver el node,
¿vale?
el nodo,
¿veis?
aquí tenemos todo,
se llama node,
esto es porque se parece al contrato que devolverá GraphQL,
y está bien porque este mapeo nos ayudará después también,
y si no,
pues una arribación,
y este repository nodes,
lo vamos a devolver aquí,
y este is not defined,
es porque lo he escrito mal,
¿verdad?
sí,
ahora sí,
ahora sí que debería funcionar,
vale,
and the fun is not a node yet,
and the fun is not a node yet,
cuando hacemos repositorios,
no sé en cuanto,
claro,
es que esto,
esto que he puesto en array vacío,
yo creo que lo mejor sería poner null,
porque si no va a intentar hacer esto,
¿vale?
ahora sí que funciona,
estos son datos que vienen del backend,
así que esto ya,
ya viene de un backend,
ya está recuperando información,
cuando os decía que delante de fetch,
pongo global,
justamente es,
veis que yo tengo el linter que me dice,
fetch is not defined,
porque no encuentra fetch de donde viene,
siempre que se utilice una propiedad,
o un método,
que venga de un objeto global,
lo mejor,
o al menos a mí me parece buena práctica,
es indicar de donde aparece eso,
aunque sea fetch,
aunque todo el mundo conozca fetch,
pues bueno,
global.fetch,
¿por qué global no window?
porque se supone que en React Native,
no existe window,
pero sí que existe global,
que es el objeto global,
que en la web,
es justamente window,
pero en node,
pues puede ser global,
puede ser global,
en otro sitio puede ser global disk,
pero bueno,
es un objeto global,
de hecho lo ideal,
debería ser utilizar global disk,
porque global disk,
es el que a partir de ahora,
va a ser siempre el mismo,
en todos los entornos,
en html,
pues será global disk,
en node,
pues será global disk,
cosas así,
¿vale?
No sé si global disk funciona correctamente,
vale,
pues con esto ya tendríamos este tema,
a ver,
sacar esto en un custom hook,
es súper fácil,
y os insto a que lo hagáis,
¿vale?
siempre que veáis un use effect,
muchos estados,
además que claramente se puede reutilizar,
es súper fácil extraerlo a un custom hook,
lo que tenéis que hacer es,
seleccionar básicamente,
lo que es solo propiamente,
de esa lógica,
que no tiene nada que ver con el componente,
lo sacáis,
use repositories,
mira,
lo ponemos aquí,
lo copiamos,
y lo único que tienes que asegurarte,
es que el custom hook devuelva información,
así que,
vamos a devolver como repositories,
los repository nodes,
¿por qué es importante esto?
y ahora lo veréis,
veréis cuál es la utilidad,
que tiene esto que vamos a hacer,
¿vale?
y obviamente tenemos que utilizarlo en el componente,
repositories,
y este repository,
lo ponemos aquí,
y está bien,
vale,
la utilidad que tiene esto,
ahora mismo está en el mismo componente,
no está bien,
tenemos que crear una carpeta hooks,
barra,
use repositories.js,
¿vale?
vamos a extraerlo aquí,
vamos a importar esto,
y ahora te explico,
cuál es justamente la ventaja,
que tiene,
importantísima,
de hacer este tipo de cosas,
que aunque parezca una tontería,
es que puede marcar un montón la diferencia,
al menos esto me parece lo mínimo,
lo mínimo de lo mínimo,
que fíjate lo limpio que queda el componente,
use repositories from,
ah mira,
ya me la ha cargado automáticamente,
vale,
lo ideal,
lo importante de esto,
es lo importante,
es que ahora,
tu custom hook,
tú no sabes,
si hace un fetch,
si está utilizando GraphQL,
si está trayéndolo,
de local storage,
si se lo está inventando,
si yo que sé,
cualquier cosa,
lo importante de esto,
como tal,
es que tu componente,
no sabe cómo se trae la información,
esto también lo podéis utilizar,
un montón con Redux,
con un montón de este tipo de cosas,
o sea,
lo interesante es separar,
que tu componente no sepa,
de dónde traes la información,
un error también muy común,
es en el que este fetch repositories,
o detalles de la implementación,
salen del custom hook,
por ejemplo,
cuando se pone aquí,
use GraphQL query,
esto es un error,
porque lo que estás haciendo aquí,
es que este custom hook,
ya está como,
sacando las tripas,
hacia afuera,
tú lo que tienes que entender aquí,
es que tiene que ser agnóstico,
de cómo se esté recuperando la información,
por ejemplo,
use fetch,
o lo que sea,
no sé,
evitad sacar,
la implementación,
del custom hook,
hacia afuera,
porque no tiene sentido,
tiene que ser más,
como si fuese una caja negra,
que desde fuera,
lo puedas utilizar,
ya sea para recuperar los datos,
para cambiarlos,
para lo que sea,
pero sin necesidad,
de saber exactamente,
cómo funciona,
súper importante,
y esto lo puedes hacer,
para,
por ejemplo,
el dispatch,
pues este es otro tema,
cuando un custom hook,
te saca un dispatch,
pues es que,
no hace falta,
que saque el dispatch,
porque si el día de mañana,
cambiáis eso,
y en lugar de hacer un dispatch,
hacé otra cosa,
pues ya caca,
vale,
ahora está funcionando correctamente,
piru,
piru,
fíjate que,
bueno,
fíjate no,
porque justo me lo he cargado,
pero no,
no funciona bien en Android,
no funciona bien aquí,
y por qué no funciona,
a ver,
si ahora,
es que,
en Android tienes que,
bueno,
en Android,
en el dispositivo,
tienes que agitarlo,
para que actualice,
pero bueno,
no lo veis,
pero se ve la pantalla en blanco,
está la pantalla en blanco,
y claro,
me preguntaréis,
pero por qué,
por qué esta pantalla en blanco,
si ahí estoy viendo que funciona bien,
si la parte web funciona bien,
si yo voy aquí,
en la parte web,
que a ver dónde he dejado,
aquí,
esta parte,
ves,
aquí funciona bien,
por qué no me funciona en Android,
vale,
este es un error,
este es un error súper común,
y súper importante,
que entiendas,
cómo lo tienes que arreglar,
es muy sencillo,
no es complicado,
pero el problema,
que estamos teniendo,
a ver si encuentro aquí,
el problema,
que estamos teniendo,
es que,
este simulador,
y,
esta pestaña de aquí,
tienen acceso,
al localhost,
ves,
que yo estoy utilizando aquí,
localhost,
como si no era mañana,
pero el problema,
es que mi dispositivo,
cuando intenta acceder,
al localhost,
no se está encontrando,
el backend,
tenéis dos soluciones,
una sería utilizar,
en grog,
que bueno,
está bien,
pero puede ser un poco rollo,
y una bastante más sencilla,
es utilizar la IP,
en lugar del localhost,
si vais aquí,
a esta pestaña,
ves aquí,
que tenemos,
192,
168,
188,
esta es la IP,
que tiene,
mi máquina,
en la red,
y como Android,
está también conectado,
a la misma red,
justamente,
tiene acceso,
a esta IP,
por lo tanto,
en lugar de tirar,
del localhost,
que esto sería,
192,
168,
0.1,
si no recuerdo mal,
o 1.1,
no me acuerdo,
bueno,
que el localhost,
es mi propia máquina,
vamos a tirar directamente,
del IP,
del IP,
que tiene mi máquina,
así que cuando haga,
192,
168,
1,
188,
va a referirse,
a esa IP,
de esta máquina,
que tiene levantado,
el backend,
y una vez que lo guardemos,
ahora sí,
que me funciona aquí,
correctamente,
bueno,
aparte me está escribiendo,
aquí un montón de gente,
pero aparte de la gente,
que me escribe,
ahora sí que está funcionando,
aquí la aplicación,
esto es bastante importante,
vale,
que si en algún momento,
queréis utilizar,
esta forma,
de ir probando,
vuestra aplicación,
no podéis utilizar localhost,
o tenéis que utilizar,
esta IP,
o podéis utilizar en Glock,
pero bueno,
solo para que lo sepáis,
ahora,
me preguntabais,
un montón,
el otro día,
bueno,
pero se puede utilizar,
GraphQL,
Apolo,
no sé qué,
pues claro que sí,
guapi,
aquí se puede utilizar de todo,
mira,
NPM install,
vamos a instalar aquí,
NPM install,
Apolo Boost,
para hacer menos configuración,
Apolo Boost,
es un paquete de Apolo,
que te permite,
bueno,
que básicamente la configuración,
muy típica por defecto,
ya te viene hecha,
y así te deja escribir menos,
Apolo Client,
y GraphQL,
vale,
instalamos estos paquetes,
y vas a ver que es,
Easy Breezy,
en un momento,
lo vamos a tener arreglado,
y aquí en Source,
por aquí,
Source,
vale,
en Source,
vamos a crear,
Utils,
barra,
Apolo Client,
punto JS,
vamos a crear aquí,
la configuración,
que se va a conectar a Apolo Client,
vale,
Apolo Client,
Apolo Boost,
vale,
importamos de Apolo Boost,
vamos a crear la conexión,
el Apolo Client,
y este método,
a ver,
a ver lo que hace,
oh,
está mal,
casi,
vamos a hacerlo diferente,
New,
Apolo Client,
y aquí lo que vamos a pasarle,
es la configuración,
vale,
aquí lo mismo,
exactamente lo mismo,
en la URI,
normalmente ves,
podrías poner,
HTTP,
punto,
punto,
localhost,
5000,
barra,
GraphQL,
en lugar de eso,
lo que tenéis que utilizar,
es la IP,
si no vais a tener exactamente,
el mismo problema,
así que,
localhost,
vale,
pues todo PC del puerto,
para que llegue a buen puerto,
que quede claro,
vale,
pues este lo exportamos,
por defecto,
y ya simplemente,
lo que tenemos que hacer,
para utilizar GraphQL,
en el app.js,
pues,
nada,
importar cositas,
hay que importar,
el Apolo Provider,
de Apolo Boost,
o Apolo Client,
yo creo que es de Apolo Client,
sí,
Apolo Boost,
yo creo que es solo para la conexión,
ves que aquí he utilizado Apolo Boost,
porque aquí,
pues ya no haces el HTTP link,
el in-memory caché,
no sé qué,
no tienes que hacer nada,
es mucho más sencillo,
de hecho,
mira,
es que queda tan bien,
que lo podéis hacer hasta así,
con dos líneas,
con una línea,
o sea,
es que es maravilloso,
vale,
el Apolo Provider,
esto seguro,
vamos a necesitar el Apolo,
ves,
no necesitas,
create HTTP link y todo esto,
lo que vamos a editar,
es el Apolo este,
Apolo Client,
create Apolo Client,
esto lo tenemos en barra,
source,
barra,
utils,
barra,
Apolo Client,
vale,
y ahora que tenemos esto,
pues nada,
tenemos que crear Apolo Client,
que esto es un método,
que es el que hemos creado,
lo ejecutamos,
ya tenemos nuestro Apolo Client,
y al Apolo Provider,
vamos a utilizar este,
Apolo Provider,
vamos a utilizar como client,
el Apolo Client,
lo tenemos aquí,
esto aquí,
esto acá,
en principio,
no tengo ningún cambio,
perfecto,
o sea,
que ya tenemos nuestra aplicación,
con el Provider de Apolo,
con el cliente de Apolo,
simplemente se está conectando,
en el GraphQL que tenemos aquí,
en el Locahost,
Puerto 5000,
GraphQL,
ya podríamos ver,
cómo recuperar los repositorios,
aunque ya tengo aquí,
justamente el Playground,
esto lo vimos,
si no sabes de GraphQL,
y dices,
debería aprender GraphQL,
sí,
deberías aprender GraphQL,
¿qué haces,
que no estás aprendiendo GraphQL?
GraphQL es lo máximo,
es increíble,
es soberbio,
no en serio,
es la leche,
está muy,
muy,
muy bien,
y te lo recomiendo un montón,
pues te vas a mi canal de YouTube,
a ver lista de reproducción completa,
y aquí entre todas las clases que tenemos,
que ya tenemos 33 clases,
pues,
ah,
no están todavía las de GraphQL,
pero estarán,
así que,
haces push,
le dices,
Midu,
a ver si subes ya las clases de GraphQL,
que es que parece mentira,
pero es que va a subir atrasado,
¿de verdad no están aquí todavía?
Pues no,
todavía no están,
madre mía,
pues sí que voy atrasado,
pero estarán,
si no también tengo,
ya tengo un curso de GraphQL,
¿ves?
MiduDev,
GraphQL,
introducción a GraphQL en español,
mira,
aquí lo hice con Horacio Herrera,
y hacemos,
son 35 minutos,
o más así,
te explico que GraphQL,
cómo utilizarlo con React,
esto mientras esperas al del Full Start Book Camp,
pues para que sepas que tengo ahí contenido,
que vamos,
que te puedes informar,
bueno,
pues el tema,
que ya nos hemos conectado a esto,
ya deberíamos ser capaces justamente,
de utilizar GraphQL,
y es muy sencillo,
o sea que,
vamos a,
en source,
vamos a crear un GraphQL barra,
queries punto JS,
y aquí,
vamos a tener todas las queries,
de nuestro proyecto,
voy a importar GQL,
siempre se me olvida,
cómo se escribe GQL,
de Apollo Boost,
creo que se puede,
de Apollo Boost,
de Apollo Client,
de GraphQL también,
creo que están todos,
bueno,
vamos a hacerlo de Apollo Boost,
vamos a exportar,
una constante,
que tenga el GetRepositories,
GetRepositories,
utilizamos el template engine,
de GQL,
que es GraphQL,
GraphQL,
GraphQL,
GraphQL Query Language,
Graph Query Language,
y aquí tenemos el template testing,
ahora tenemos que decirle,
la query que queremos utilizar,
pues bueno,
ya tengo aquí,
esta sería una query,
la query,
para recuperar los repositorios,
todo en la search,
el nodo,
y esta será toda la información,
según la información que pongo aquí,
pues como puedes ver,
me devolverá más o menos,
pero como queremos que sea exactamente igual,
a la REST API que tenía aquí,
¿ves?
Edge,
Node,
y aquí toda esta información,
pues ya he puesto aquí,
ID,
Name,
Owner Name,
todos los campos que ya me estaba devolviendo la API,
así que,
con esto,
ya lo tendría,
voy a copiarme todo este,
pam,
toda esta query,
me la voy a poner por aquí,
importante aquí,
esto,
aquí hay que ponerle query,
que creo que si no,
no funciona,
y se está quejando aquí de esto,
query,
esto cierra por aquí,
este,
este copy ha sido,
a ver,
un,
dos,
es que veis que,
está mal,
a ver,
este aquí,
voy a dejar este aquí,
este cierra aquí,
este cierra aquí,
esto es lo malo de copiar,
que uno se pone ahí,
y,
bueno,
yo creo que la query está bien,
si no,
ya se quejará de algo,
que estas cosas pasan,
lo interesante de esto,
porque,
Midu,
vaya chapa me has dado,
y con el custom hook,
de antes,
me has dado la chapa de la vida,
te la he dado,
porque quiero que veas,
cuál es la gracia,
de esto del custom hook,
solo tocando el custom hook,
bueno,
a ver,
hemos tocado también,
le hemos añadido la conexión a GraphQL,
es normal,
pero solo tocando ahora mismo,
el custom hook,
debería,
el componente visual,
funcionar exactamente igual,
de forma totalmente transparente,
y es lo que hace que sea,
pues,
maravilloso,
podemos utilizar use query,
que está en Apollo Client,
este sí que está en Apollo Client,
y en use query,
le,
bueno,
tenemos que importar el get repositories,
que acabo de crear,
que es el que tiene justamente,
GraphQL,
la que tiene la query,
y en use query,
le digo,
mira,
¿sabes qué?
que quiero justamente,
bueno,
esto voy a dejar un objeto vacío por ahora,
use query,
use get repositories,
utiliza esta query,
¿y qué me devuelve esto?
mira,
esto me devuelve,
la data,
que voy a ponerle un objeto vacío,
para inicializarla,
porque esto al principio,
pues es null o undefined,
pues le ponemos un objeto vacío,
que nos ayudará,
luego también nos devuelve,
loading,
y nos devuelve una posibilidad,
de hacer un refresh,
por si necesitamos hacer un refresh,
para volver a recuperar los repositorios,
con todo,
con esta línea de aquí,
simplemente con esta línea,
nos lo podemos quitar casi todo,
porque mira,
de data,
recuperamos los repositorios,
repositorios,
vamos a decir,
que si no vienen,
pues que sea null,
y todo esto que habíamos hecho aquí,
esto ya lo podemos quitar,
este map,
sí que lo tenemos que hacer igual,
de forma que,
si tenemos repositorios,
o sea,
que esto fuese un array vacío,
o sea,
fuese true,
pero si no hay data,
pues esto será null,
por lo tanto será un array vacío,
si no es null,
si no es falsi,
pues entonces intentará,
aquí podríamos incluso mirar,
si tiene los edge y tal,
pero yo creo que así ya funcionará,
y lo mapeamos,
y ya está,
y encima podemos tener el loading,
y podemos hacer el refresh,
que el refresh,
como ves,
yo aquí,
hacer un refresh,
o un refresh,
que antes he dicho,
ah,
porque no se vea el refresh,
pero refresh significa como pedir otra vez la información,
no es,
we use GraphQL to refresh,
que esto estaría mal,
refresh es,
volver a pedir la información,
y ya está,
con todo esto que hemos hecho,
yo creo que esto debería funcionar,
funciona,
pues ya está,
podemos ver que los datos son diferentes,
a los que tenía antes,
porque ahora no los estamos sacando del,
no los estamos sacando del,
del repositorio,
del rest,
sino estamos utilizando el de GraphQL,
que el de GraphQL,
pues a lo mejor saca la información de otro sitio,
de hecho creo que ahora sí que está utilizando la API,
que antes no la estaba utilizando,
y aquí tendríamos la lista de repositorio,
todo con,
ya ves tú,
con tres líneas de código que hemos cambiado aquí,
ya totalmente,
mira,
no necesitamos el useEffect,
ni el useState,
y solo hemos tenido que tocar el custom hook,
es totalmente transparente para los componentes de React,
de cómo tiene que funcionar el resto de las cosas,
con esto ya lo tendríamos,
¿vale?
Buenas,
soy nuevo,
¿para qué se usa Apolo?
Pues tienes una clase buenísima,
que hicimos aquí en Twitch,
que te explico,
Apolo es de cero,
pero básicamente Apolo es un cliente,
para conectarte a servidores de GraphQL,
para utilizar GraphQL,
¿prefieres incluir los estilos en el mismo archivo,
por algo en específico?
No,
o sea,
en este caso lo hemos hecho,
porque vamos más rápido,
tampoco me quiero meter en comentaros de,
meterlo aparte,
no sé qué,
a ver,
creo que en React Native puede estar bien,
si React Native es tan bueno,
Mido,
explícame,
¿cuándo uso React pelado?
A ver,
pues cuando vayas al peluquero,
y te haya pelado,
pues lo usarás así pelado,
a ver,
React,
no tiene,
no tiene mucho sentido la pregunta,
en el sentido de,
React es ideal,
cuando lo utilizas para la web,
para la web React tal cual,
de hecho no utiliza React,
utiliza React y React DOM,
React,
lo que es el core,
es totalmente agnóstico,
de,
de dónde lo utilizas,
el core de React,
es el mismo para React DOM,
que para React Native,
para React Web,
para React 3D,
para React Terminal,
es el mismo,
es exactamente el mismo,
la única diferencia,
están en una cosa que le llaman bindings,
que básicamente son las conexiones,
¿dónde se renderiza React?
Pues React DOM,
es el que utilizas para renderizarlo,
justamente en el DOM,
React Native,
es el que lo haces para renderizarlo,
en aplicaciones nativas,
¿vale?
Esa es la diferencia,
esa es la única diferencia,
entonces,
cuando me dices,
si es tan bueno,
¿cuál es mejor?
Pues yo te diría,
que para la web,
si solo vas a hacer una página web,
y lo tienes clarísimo,
que utilizar React,
el que conoces,
ya está,
si lo que quieres hacer,
es una aplicación nativa,
obviamente React Native,
¿se puede hacer con React?
Sí,
pero entonces lo que estarías renderizando en tu aplicación,
sería una web,
no sería una app,
esa es la diferencia,
vale,
¿cuál es la mejor manera de detectar el tipo de dispositivo en React,
con una librería o a mano?
El tipo de dispositivo en React Native,
es totalmente fácil,
utilizando como hemos visto antes,
el platform,
si no usas UseState o UseEffect,
¿no sería más como un helper,
que un hook?
No,
a ver,
un custom hook,
no significa que tengas que utilizar un UseState o un,
un custom hook,
en este caso,
ya utilizas este hook,
UseQuery es un hook,
que a su vez,
si pudiéramos verlo por dentro,
seguramente,
tendría un UseState,
aquí porque no lo podemos ver,
pero si lo pudiéramos ver,
seguramente tendría su propio UseState,
y su propio UseEffect,
¿vale?
O sea,
al final,
tienes que entender que los hooks,
igual que los componentes,
son,
se pueden componer,
por lo tanto,
este UseQuery,
por dentro,
tendrá un UseState,
un UseEffect,
y este custom hook,
pues se utiliza ya el UseQuery,
y ya está,
y ya está como envolviendo esta lógica,
no hace falta que un custom hook,
utilice un UseState,
o un UseEffect,
para que sea un custom hook,
vale.
Agus,
¿algún consejo para alguien que recién empieza en React?
Que me sigas en YouTube.
Tengo un curso ahí de React,
que vamos,
buenísimo.
Y más allá de eso,
que recién empieza,
que,
bueno,
que practiques mucho.
No sé,
¿sobre qué quieres el consejo?
Saludos desde Argentina,
una consulta,
¿cuál es tu opinión sobre las Progresive Web App?
que nunca terminan de despegar.
Creo que las Progresive Web App
durante mucho tiempo parecía,
sonaba,
que era muy interesante,
pero por un lado,
el hecho de que Apple
no le dé ningún tipo de,
no tiene mucho interés por ellas,
y la propia Google,
tampoco a veces,
depende,
da la sensación que Google tiene como dos,
no sé,
alter egos,
no sé,
Jekyll,
Dr. Jekyll a Mr. Hyde.
En el,
en un lado,
está Jekyll,
¿no?
Que sí que le gustan las Progresive Web Apps en Google,
y luego está Mr. Hyde,
en la que no le gusta.
Y le gustan más las aplicaciones nativas.
¿Por qué?
Porque hay veces,
que sí que hacen pasos súper interesantes,
para que te instales Progresive Web Apps,
y tengan relevancia,
y todo esto,
y luego de repente,
cuando entras a una página web,
que es una Progresive Web App,
lo primero que hace,
es intentar que te instales la aplicación nativa.
Entonces,
es información un poco contradictoria.
Me da la sensación,
que el problema es que las Progresive Web Apps,
no repercuten beneficios,
en las stores,
de Android y de iOS.
Les está quitando,
de alguna forma,
una parte del mercado.
Entonces,
es una tecnología que me gusta mucho,
pero por otro lado,
me da la sensación,
que las empresas,
pues no terminan de,
de darle todo el cariño que se merece.
Y por lo tanto,
hace que vaya,
no que vaya desapareciendo,
pero que no veamos un empuje,
o una apuesta más directa.
Y con NextGest,
tienes la posibilidad de crear una.
Sí,
tienes un plugin,
que es el Next Progresive Web App,
que te la hace bastante fácil.
React o Angular.
No lo habían preguntado nunca,
Razer,
Padawan.
Pero voy a decirte que React,
porque,
a ver,
me parece que los dos son geniales,
pero creo que React,
aparte de que la comunidad es más grande,
hay muchas oportunidades laborables,
laborales,
y creo que está teniendo,
es el que está tirando el carro de los frameworks.
Me da la sensación.
Por ejemplo,
Vue me parece súper interesante,
pero a veces,
entonces,
muchas de las ideas que vemos en Vue,
también es de,
también,
vienen,
por ejemplo,
la Composition API,
viene de los hooks.
Y me parece que React ahora,
pues,
trae cosas bastante interesantes,
sobre todo,
especialmente con el tema de,
es que NextDS,
que es un framework tan potente,
y ha traído cosas tan interesantes.
Midu,
se me hizo imposible configurar Standard Computer
para renderizar componentes con el Ternary.
No me funciona lo de desactivar la regla.
No lo sé,
un poco raro.
Yo sí que tengo por ahí Standard Computer.
Tendrías que utilizar Slint Pre-tier,
seguramente,
para desactivar las reglas.
Mowredev,
es más por apostar código nativo
que con React Native.
¿Tú qué opinas?
¿Es igual de fluido que una app nativa?
Bueno,
entiendo a Mowredev 100%,
porque,
bueno,
se siente más cómodo con código nativo.
Yo,
la verdad,
o sea,
es que si una persona me dice,
¿qué es mejor?
¿Código nativo o React Native?
¿O Flutter?
¿O no sé qué?
Es que da igual.
Es que,
¿qué importa?
Si es que al usuario final
le importa tres pepinos,
que lo hayas hecho con código nativo,
que lo hayas hecho con Flutter,
o que lo hayas hecho con React Native.
Y yo creo que el mejor,
o sea,
¿cuál es la elección?
La elección es con lo que te sientas mejor
y puedas darle una experiencia del usuario
que sea ideal.
Punto.
Si con React Native,
si tuviera un problema de rendimiento
que no me lo parece,
pues hombre,
claro que te diría,
pues siempre es nativo.
Pero,
claro que es igual de fluido.
Otra cosa es que hagas ciertas aplicaciones
muy en concreto
que te puedan dar algún problema en React Native.
Pero React Native se puede conectar
con código nativo sin ningún problema.
Puedes crear componentes
y funcionalidad
que esté basada en código nativo.
O sea,
yo creo que a día de hoy
es muy difícil
que puedas llegar a diferenciar
si está bien hecha una aplicación
con React Native,
que puedas diferenciar realmente
que no está hecha con código nativo.
Porque es que React Native
luego se renderiza con código nativo.
O sea,
nosotros escribimos JavaScript,
pero esto funciona con código nativo.
O sea,
la compilación que hace es código nativo.
Entonces,
o sea,
me parece bien lo de Moure
porque es que él estará mucho más cómodo
con código nativo.
Pero si yo ahora me pusiera a hacer una aplicación
no tendría sentido
que hiciese código nativo,
me estaría meses
cuando con React
lo podría hacer mucho más rápido.
Y creo que el usuario,
pues a lo mejor
no nota la diferencia.
Además de las ventajas
que puede tener
que si es un equipo pequeño
y sabe React
y haces una aplicación
y te funciona en Android,
te funciona en iOS
y te puede funcionar en web,
pues es que
cada uno tiene sus cosas.
Cuando trabajas con Apple Ress
con más de 30 en Pons,
¿recomiendas Axios
o alguna otra herramienta de librería?
Soy Jimmy.
Si un Apple Ress
tiene más de 30 endpoints,
normalmente lo mejor
es más bien
utilizar GraphQL.
Eso te diría yo
porque
tiene mala pinta.
Mala pinta
en el sentido
de que es muy fácil,
que necesitas componer
llamadas
y con las redes
de APIs
eso no escala bien.
Así que
mi consejo sería
echarle un vistazo
a GraphQL.
Con los hooks
y el manejo del contexto
¿puedo evitar usar
o no necesitar Redux?
Sí,
pero tienes que entender
que el contexto
llega hasta donde llega.
O sea,
te puede dar algunos problemas
en el sentido de que
a ver,
los hooks
por sí mismos
no te quitan Redux,
¿vale?
Pero
hooks y contexto
te puede quitar
en algunos casos Redux.
Pero Redux
sobre todo
para estados
grandes
y que cambian mucho
va a ser mucho más potente
que context y hooks.
Tendrías que ser
tendrías
no escala muy bien
el contexto de React
para utilizarlo
como un estado global.
Tendrían que ser
cosas muy específicas.
Pero si no
puedes utilizar
Jotai
y cosas así
que funcionan muy bien.
¿Cuándo es necesario
usar un estado global?
Cuando necesites
tener información
de forma global.
Por ejemplo,
imagínate
que el usuario
tenga la sesión iniciada
o no.
Eso es un estado global
porque afecta
por igual
a todos los componentes
o puede afectar
por igual
a todos los componentes
independientemente
de donde estén.
Eso sería
claramente
un estado global.
¿Cuándo no?
Pues cuando el estado
no es global.
Cuando no te interesa.
Y de hecho
tienes que intentar
siempre que puedas
que no sea global.
Siempre que puedas
intenta que tu estado
no sea global.
Por ejemplo,
una cosa que se hacía
mucho en estados globales
eran los formularios.
Un formulario
no tiene mucho sentido
que sea un estado global
a no ser que afecte
a toda la página.
Pero es que no...
Formic
creo que lo hace muy bien
porque el estado
el estado global
que te...
No es un estado global
es un estado
que solo
te afecta
a esa parte
del formulario.
No fuera del formulario.
¿Qué tal la librería
de React Query?
Pues muy bien
pero yo no he podido
trabajar muchísimo
con ella
y me gustaría
me gustaría trabajar
con ella
y lo haremos en Twitch
para que aprendamos
todos.
Angulac
o
Reangular
¿Eres team perro
o gatos?
Por igual
me encantan
los perros
y los gatos
muy empatado
no soy team perro
o gatos
me gustan mucho
a veces más los perros
a veces más los gatos
es que también depende
de cada uno
de cada gato
y de cada perro
¿Alguna Big Company
que use Angular?
Google
Google sé que usa Angular
pero
más allá de Google
o sea
Big Company
seguro
¿Eh?
Who uses Angular
A ver
Office
Office
Esta tengo dudas
puede ser verdad
pero Office
ya os digo yo
que utiliza
React Native
en todos lados
Gmail
Paypal
pero es que Paypal
es que Paypal
es como decir Spotify
a ver
Paypal
debe utilizarlas todas
y Paypal
hasta donde yo sé
creo que
no es la principal
Angular seguro
¿Qué pasa?
Que muchas veces
Angular
se utiliza más
en los back offices
es más cerrado
más
más estricto
de cómo se tiene que utilizar
y cosas así
y a lo mejor
por eso
no hay tantas
páginas
que la utilicen
para su web
me da
por eso a lo mejor
no vemos tantos ejemplos
pero lo utiliza
un montón de compañías
con tu curso de Next
estoy armando
una plataforma
para procesar
XML
fiscales
madre mía
Juan Pablo Solana
eres un crack
tú eres un crack
ya
pero con hacer
el fixa estándar
le vale tres pepitos
el slint
pretier
que raro eso
ah
es que
claro
es que a lo mejor
no deberías utilizar
estándar
deberías utilizar
slint
y utilizar
en lugar de estándar
el comando
de estándar
lo que deberías utilizar
es
la configuración
de estándar
que existe
mira te la voy a enseñar
te la voy a enseñar
slint
standard
config
claro igual tú lo que quieres
es más bien utilizar
slint
con la configuración
de estándar
y entonces con esto
tú utilizas
ves
npx
slint
y así
tendrías la regla
pues
configurada
correctamente
podrías convertir
esta app
a una progressive web app
usando el mismo
codebase
seguramente
sí
que se podría
porque hay que tener
en cuenta
que la web
o sea
la app
que estamos haciendo
sirve tanto para web
como para IOS
para Android
la parte de web
seguramente se podría hacer
se podría hacer
que fuese progressive web app
podríamos mirar
más adelante
podrías
un map
dentro de otro map
me regresa una promesa
hay forma de hacer async un map
no hay forma de hacer async un map
pero fíjate
que buena pregunta
una pregunta tan buena
que tiene respuesta en mi blog
de hecho hace poco
mira
como usar async await
en el método .map
de los arrays
pues mira
aquí tienes un artículo
donde te lo explica
ves
que
si alguna vez has intentado
utilizar array.map
con una función asíncrona
pues habrás visto
que no puedes
que es el problema
que te estás encontrando
entonces ves
aquí te dice
pues como lo puedes hacer
ves
usando promisor
usando for off
y aquí te lo explico
súper bien
y de hecho hice un reto
aquí en youtube
muy interesante
donde te explico este problema
y la gente pues tenía que decir
bueno
¿qué esperas que de esto
esto y esto?
pues
ahí tienes tu respuesta
te lo dejo en el chat
¿qué desayunaste hoy?
joder
con las preguntas raras
hoy desayuné
pues me hice una tortita
una tortita
con jamón y queso
la hizo mi pareja
más buena
ya volviste al running
volví al running
pero se fue corriendo
fue muy fuerte
no he vuelto con todas las ganas
que necesitaría
o que me gustaría
pero gracias por recordarme
que debería hacer otra vez
deporte
hoy he ido a andar
he ido a andar
y la semana pasada
fui a andar 20 kilómetros
estoy andando
estoy andando poco a poco
Firebase usa Angular
cierto es
Firebase usa Angular
¿has ocupado hasta el components
en alguno de tus proyectos?
sí
y está bastante bien
si queremos trabajar con mapas
¿recomiendas alguna librería
para React Native?
creo que
Expo
tenía un componente
Expo React Components Maps
MapView
mira
Expo
que es la plataforma
que estamos utilizando
para crear la aplicación
tiene un montón de componentes
súper interesantes
súper súper interesantes
y uno de ellos es
React Native Apps
que React Native Apps
a su vez
creo que es
un componente
que no tiene nada que ver
con Expo
pero bueno
el tema es que tiene una compatibilidad
con Android
Android
iOS
pero no con web
fíjate
y con esto
mira
igual podemos ver aquí el ejemplo
esto es genial
este
try this example
en Snack
Snack es un playground
que tienes aquí
en Tap to Play
y esto lo que hace
es instalar una aplicación
en un simulador
y aquí tendríamos la
y ahora veremos
el ejemplo del mapa
y yo este es el que te recomendaría
mira aquí tenemos el mapa
así que
súper fácil
con MapView
ahí lo tienes
React Native Maps
GitHub
está en React
¿no?
no
GitHub está
a ver
GitHub utiliza un montón
de
de diferentes
tecnologías
ha hecho alguna
landing con
Vue
ha hecho otra
con
con lo que sea
pero GitHub
en sí misma
está hecha
HTML y Web Components
de hecho se pueden ver
los Web Components
por ahí
a ver
si no recuerdo mal
no sé si en su día
estaba hecha
con
incluso
a ver si
creo que el
14 días ago
este
mira veis
es un Web Component
es un Web Component
ahí tenéis
Web Components
creo que es de las pocas
que utilizan Web Components
de una forma
tan en crudo
porque está hecho en crudo
¿ves su utilidad
en Style Components
en React Native?
ya tenés
algo muy similar
yo no utilizaría
no sé
me imagino
que se puede utilizar
no lo he utilizado
pero es que
con StyleSheet
punto create
ya está
bastante bien
¿a qué te referís
con que no es la principal?
por ejemplo
Angular
¿hay casos
que se pueden usar
múltiples tecnologías
de Frontend?
no
a ver
es que
piensa
Sacastro06
yo lo que me refiero
es
hay un montón
de
piensa que
Spotify
Spotify
tú lo que ves
es el reproductor
o Facebook
tú lo que ves
es la app
pero
Facebook
tiene
cientos
cientos
de páginas
y de proyectos
por ejemplo
Facebook Business
Facebook
editor de páginas
Facebook
no sé qué
Facebook Groups
Facebook
no sé cuántos
lo mismo pasa
con Gmail
por ejemplo
YouTube
YouTube
tú ves YouTube
pero tienes
YouTube Studio
y ahí en YouTube
no sé qué
o sea
hay un montón
de páginas
y también
muchas de estas
compañías
tienen back offices
que son internos
para la propia empresa
por eso te digo
que no es la principal
me refiero a
PayPal
hasta donde yo sé
creo que es
Ember
o React
no me acuerdo
pero puede ser
que PayPal
tiene back offices
o partes
landings
de sus webs
que sean angular
puede ser
pero el producto
principal
el que más vemos
que yo sepa
no es angular
eso es lo que quiero decir
en tu curso de Udemy
madre mía
soy franza
mi curso de Udemy
cuando haces el proyecto
de Search Movies
después de
el doble de Search
funciona todo ok
pero hoy en día
solo acepta peticiones
HTTPS
a la API
hay alguna forma
de solucionarlo
conoces algún otro server
claro soy Franz
o sea tienes otro
claro en su día
piensa que esto lo hice
hace tiempo
no existía ni siquiera
Vercell
hoy en día
utiliza Vercell
para tus proyectos
y no me llevo dinero
más quisiera yo
llevarme dinero
pero utiliza Vercell
utiliza Vercell
utiliza Vercell
hazte el favor
Vercell es
la gloria bendita
y es tan fácil
de utilizar como Search
si no incluso
un poquito más
esto es Vercell
bueno no sé
si alguien
no lo conoce
todavía
pero
que utilice Vercell
básicamente
que gratis
funciona súper bien
y puedes
deployar desde
la línea de comandos
o integrarlo
con GitHub
y va
muy muy muy bien
así que utiliza Vercell
por si no te he dicho
Midu
¿cómo conectarías
una app de NextGS
con Real Native?
¿harías un bug
que comunique ambas?
hombre
tiene pinta ¿no?
no sé cómo
la comunicaría si no
pero con un bug
o sea con el backend
lo puedes tener NextGS
de hecho hace poco
mirad
hice el otro día
una cosa
que no he dado
mucha
mucha
mucha
mucha historia
pero veis
esto es un artículo
mío de mi blog
pues
si vamos aquí
al car validator este
ay vaya por dios
es que estoy
vale vale
car preview
twitter
car validator este
¿veis esta imagen
que veis aquí?
pues esta imagen
está hecha
a partir de un endpoint
de NextGS
y esto lo estoy haciendo
con
puppeteer
y esto es una página
que hace un screenshot
y entonces genera
la imagen al vuelo
y esto lo estoy haciendo
con una
no con NextGS
pero con el backend
en Vercell
porque puedes tener
en Vercell
puedes hacer endpoints
y tal
así que sí
claro
puedes hacer endpoints
y conectarlos
con RealNatives
en ningún plano
que majo el chaval
que hizo ese blog
muchas gracias
en Midway
en Midway
versión móvil
no aparece el buscador
cierto es
y tengo que decir
que una persona
muy
muy maja
me hizo una PR
lo que pasa es que
como no me estoy quieto
con el blog
creo que ya no
pero me hizo una PR
mira
Nico20
me hizo una PR
por si pensaba
que no la había visto
me hizo esta PR
en la que
fíjate
sí que sale el buscador
y aquí pues salían
así los
me parece una idea
muy buena
lo pondré
lo pondré
no te preocupes
lo pondré
¿cambiaste la fuente
del Visual Studio Code?
no
la actualicé
es la misma
es Cascade Add Code
lo que pasa
es que ahora
si te fijas
tiene
cursivas
es una cosa nueva
que tiene la nueva versión
¿para cuándo
un challenge
con tu pariente
directo?
no creo que haya
challenge
con mi parienta
pero
pero bueno
gracias por la idea
no creo que haga
muchos challenge
no me gusta
pasar estrés
bueno
actualmente estoy estudiando
diseño multimedia
y tengo un gran foco
en programación
uff
Facuscuderi
en breve vamos a ver
PHP
¿qué me recomendarías
aprender para poder
complementar de la mejor
forma a todo?
el mundo es infinito
Facuscuderi
depende de la vida
es que
vamos a ver
¿qué me recomendarías
aprender para poder
complementar
de la mejor
forma a todo?
pero os dais cuenta
que las preguntas
son chungas
¿verdad?
os dais cuenta
cuando las hacéis
que son difíciles
a ver
vamos a ver
¿qué aprende
para complementar
de la mejor
forma a todo?
pues a ver
si
bootstrap
y jQuery
yo la verdad
es que me parece
un poco
a ver
pues React
React
es la hostia
aprende React
oye
no sé
es que de verdad
es que depende
Facu
de lo que quieras
hacer
lo que te guste más
hacia dónde
quieres ir
frontend
backend
para complementarlo
todo
pues a ver
HTML, CSS y JavaScript
es que a lo mejor
con bootstrap y jQuery
pues a lo mejor
tienes suficiente
pero complementarlo todo
pues igual sería interesante
conocer más
deploy
cómo desplegar
tus propias aplicaciones
esa sería interesante
¿os gusta
la camiseta?
para la gente
que sea de España
la puede encontrar
ya
la he subido
a Amazon
mira
os la enseño
va
lo que pasa
es que
quería darle
unas
vueltecillas
pero mira
aquí está
1899
la Midu
Def
Camiseta
Coding
Camiseta
mira
os la dejo
por ahí
por si os animáis
que
ahí la tenéis
disponible
hay de hombres
mujeres
hay un montón
de colores
oye
esta azul es muy bonita
igual esta azul
hay un montón
de colores
del logo
¿qué recomiendas
para iniciar
un proyecto de React
sin necesidad
de NextDS?
Vite
utiliza Vite
¿para cuándo
la Mark?
pues a ver
estoy probando
estoy probando
y tal
pero me gustaría hacerlo
¿qué se hizo hoy?
pues aprender React Native
¿merece la pena
la versión Pro de Vercell?
no es que merezca la pena
es que yo la tuve que pagar
o sea
no es que merezca la pena
es que yo me pasé
de los límites
de la gratuita
si uso Vercell
¿debe ser si os he una app
de Next?
no
no debe ser si os he una app
de Next
de hecho mi blog
no es NextDS
ni lo va a ser
seguramente nunca
y
y ya está
con Vercell
con Vercell
puedes poner
proyectos
de Vue
puedes
de Next
de NextDS
Hugo
archivos estáticos
es que puedes hacer
de casi
no todo
pero bastantes cosas
Midu
has cambiado Cascada Code
de Visual Studio Code
de Visual Studio Code
que hoy
que la cursiva
era como diferentes
o me equivoco
Miguel Martelo
no he cambiado
no he cambiado
la fuente
la he actualizado
y al actualizarla
resulta que Cascada Code
ha incorporado
las cursivas
entonces os habréis dado cuenta
que en algún punto
pues salen las cursivas
por ejemplo aquí
¿veis?
antes salía
así
lo cual
a mí me gusta
bastante la cursiva
o sea
gratis
genial
me gusta
Midu pide a gritos
que lo patrocine Vercell
madre mía
que se le pide a gritos
lo sabe Dios
es que me parece
un producto tan increíble
me encanta tanto
me cuesta tan poco
promocionarlo
y deciros a todos
utilizad Vercell
yo lo utilizo
en todos los sitios
ojalá
ojalá
me patrocinases
que no podría
tener mejor patrocinio
vamos
o sea
sería
un sueño
un sueño hecho realidad
vamos
sería tan feliz
¿cómo se genera esa miniatura
desde los sitios web?
¿para las redes?
sí
para las redes
¿un vídeo donde le enseñes
a programar a tu pareja?
mi pareja no necesita
que le enseñe a programar
sabe programar ella
perfectamente
y es bastante
bastante apañada
así que no
no hace falta
que haga yo un vídeo
para enseñarle
¿nos enseñar a instalar
este tipo de letras?
si está tirado
ya lo enseñaré
hoy no
pero
os la enseñaré
es muy fácil
tengo ganas
de instruccionarme
más en React
ya veis el back
y ya me está aburriendo
no me extraña
espero hacerme el tiempo
para meterle duro
dale
no puede ser
yo la quiero
bueno ahí la tenéis disponible
la podéis comprar ya
¿qué haremos en la próxima clase?
en la próxima clase
Carlos
vamos a seguir
con el tema de la comunicación
en el servidor
y cómo guardar
vamos a ver
cómo guardar datos
en el dispositivo
porque en React Native
es interesante
ver cómo podemos guardar datos
en el propio dispositivo
como en local storage
vamos a ver variables
de entorno también
vamos a ver
cómo puede iniciar sesión
el usuario
cómo registrarse
y
a ver
voy a ver
pero creo que
eso es todo
si no recuerdo mal
a ver
que parece poco
ah
y vamos a ver testing
vamos a ver testing también
ya sabéis que
soy súper fan del test
y vamos a ver testing
en React Native
con Jest
así que
vamos a ver React Context
también
para el tema del
de laud
o sea de autenticación
de usuario
vale
almacenamiento
ya os lo he dicho
como local storage
de React Native
y eso
vamos a ver
paginación
también vamos a ver
paginación
desplazamiento infinito
vale
infinity scroll
también lo vamos a ver
y creo que ya está
no sé si os parece poco
pero bueno
no está mal
no está mal
con Vite
tuve problemas
configurando estándar
pues yo he utilizado
un montón de veces
Vite con estándar
y súper bien
en Vercel
se puede montar
hasta Vue
efectivamente
soy nuevo
en el mundo de la programación
hasta ahora
sé programar
solo en Python
¿qué más me hace falta
aprender?
depende
igual si eres
buenísimo en Python
igual no hace falta
que aprendas nada más
el problema es
que tienes que ser muy bueno
si solo quieres aprender Python
a ver
hay mucho trabajo de Python
de minería de datos
de temas de estudiar datos
pero bueno
si
¿qué más me hace falta aprender?
cuanto más mejor
pero si solo quieres Python
no es imposible
se puede desplegar
Node en Vercel
Node no
pero puedes tener endpoints
endpoints
eso sí
hola Víctor
que acabas de llegar
si no fuera Ria
¿cuál sería el siguiente
en tu stack?
Svelte
o sea Svelte
me encanta
me encanta
pero en CiberSell
¿qué es?
Vercel
es una plataforma
en la que puedes hacer
hosting de tus proyectos
es SuperSell
ni más
ni menos
bueno
en más
porque no solo puedes
hacer hosting
de tus proyectos
puedes hacer
lambdas
puedes hacer
funciones en la nube
también
de una forma súper sencilla
¿qué limitaciones tiene Expo
para irme por el CLI?
todo lo contrario
las limitaciones
las tiene más el CLI
que Expo
más que limitación
te puedo hablar
de desventajas
yo no creo que haya limitaciones
se ha hecho todo lo contrario
Expo
yo si desarrollase algo
en React Native
lo haría con Expo
pero seguro
seguro
porque es que
el CLI
sí está muy limitado
lo que sí que te puedo decir
es que tiene desventajas
por ejemplo
pues que te casas
con esta plataforma
y que está versionada
o sea que van sacando versiones
y hay veces que quieras o no
tienes que hacer migraciones
eso sí
pero
limitaciones
yo te diría que no
¿mañana habrá stream?
sí
guayco
mañana habrá stream
espero verte aquí
¿base de datos de SQLite?
bueno
eso tenía el backend
justamente
y sí
esto se sube a YouTube
¿un vídeo donde tu pareja
te enseña a programar?
pues igual no enseña más
que yo a ella
¿testing aburrido
pero te salva?
sí
bueno aburrido
pero todo lo que sea aburrido
que luego te haga dormir mejor
a mí me gusta
si no conoces
cómo funciona
la parte de un código
¿dónde suele buscar info?
hombre
depende
si es algo
que pueda leer documentación
pues a la documentación
pero si es de un código
que ha hecho alguien
normalmente intento
refactorizarlo
o ponerle test
para entenderlo
¿qué sistema recomiendas
para el manejo de estados?
context o redax
los dos
es que
uno no quita al otro
madre mía
es que me habéis dejado
un montón de preguntas
madre mía
madre mía
yo dejé de usar
Vercell
que me tumbaron mi porfolio
¿y eso por qué?
¿por qué te tumbaron el porfolio?
cuéntame
¿tienes algún vídeo
de autenticación
con Next?
pues sí
claro que sí
a ver
lo que pasa es que
tengo uno
pero es justamente
más pensado
para Firebase
a ver
Next
Out
Firebase
pero bueno
igual te puede ayudar
en
tengo
es que tengo
tengo de todo
tengo de todo
tengo
el de
el del curso de NextDS
mira que lo tengo aquí
el del curso de NextDS
que es con Github
Github con Firebase
mira que contento salgo
luego si no
tengo
en Middle Life
Middle Life
subí uno
que era con
Firebase en general
que bueno
ya en Firebase en general
es bastante genial
a ver
lo puse por aquí
lo puse por aquí
aquí
Firebase
este
no le vamos a dar funcionalidad
¿ves?
un montón
¿me recomiendas?
¿qué me das para pasar
al siguiente nivel de RIA?
por ejemplo
aprender cosas avanzadas
aprender los hooks avanzados
y las cosas
en pocas palabras
subir de nivel
es que depende
Miguel
¿en qué nivel estás?
yo lo que
creo
que es interesante
de RIA
para subir de nivel
hombre
conocerte todos los hooks
y cómo funcionan
hombre
es importante
como puedes utilizar
el UREF
UseMemo
UseCallback
a partir de ahí
el problema de RIA
que es que
tampoco
tiene mucha historia
¿sabes?
o sea
RIA cuando se vuelve
muy avanzado
normalmente es más
cómo se integra
con otras cosas
cómo se integra
con el router
cómo se integra
con Redux
con Apolo
con todo este tipo
de cosas
porque RIA
avanzados
es que RIA
es bastante sencillo
hombre
saber cómo funciona
todo
¿sabes?
saber cómo funcionan
por detrás
los hooks
eso es interesante
crear tu propio RIA
puede ser interesante
también
para justamente
mira
de hecho
de eso tengo un vídeo
crea tu propio
RIA
MewDev
lo hice con
DannyDev
que es
es una colección
bastante chula
que la verdad
es que no triunfó mucho
porque la gente
bueno pues no
no entusiasma
pero lo recomiendo
¿viste la librería
de NaxxAuth?
es la hostia
para hacer un login
la he visto
pero en mi caso
utilicé otra
porque utilicé
la de NaxxFirebaseAuth
y la verdad
que funcionó bien
así que
y no he hecho
ninguna autenticación
con Identity Server 4
¿qué te parece
hacer una página
de RIA
para tu trabajo
de final de carrera?
de grado
súper bien
Seba
dale caña
súper bien
sí
mira
la chidez
dice
yo la vi
creaste
es el Danny Dome
totalmente
¿se gana bien
en Twitch y YouTube?
no
para nada
bueno
a ver
¿qué pasa?
creo que el tipo
de contenido
que hago yo
por ejemplo
no
no lo peta
de hecho
en Twitch
se gana muy poco
para las horas
que le echas
sin ir más lejos
es que te lo puedo decir
ahora
pero
no llego
a los 400 euros
y de suscriptores
teniendo en cuenta
si tengo
13.000
creo
de los seguidores
suscriptores
no llega a 200
o sea que
el ratio
es bastante
y en YouTube
creo que ahora
está sobre
200 euros
o sea que
ya ves
o sea que no se gana
un
alguien que esté en Twitch
con
180 espectadores
como tengo yo ahora
o 200
o 250
no gana dinero
no gana bien
ya te lo digo yo
además
y cada vez menos
porque
en Twitch
lo que han hecho
es que
el Prime
si estás en México
y tal
pues te llega menos dinero
que si estuvieses en España
y tal
antes era más interesante
pero nada
menos
tienes que mostrar
más midu
más midu
es por eso
más midu
¿qué tengo que hacer?
te va a hacer tocar
ya te digo
sí
voy a enseñar más carne
ya te digo
bueno
tengo ideas
tengo ideas
para intentar animaros
a que os suscribáis
y estas cosas
pero bueno
oye
Eker00
muchas gracias
por suscribirte
con Prime
hombre
muchas gracias
sí
a ver
el Fullestap Bookcamp
la idea era esa
que la gente se animase
y estar dos domingos aquí
pero luego
al principio empezó súper bien
de hecho
llegué a tener
400 suscriptores
que joder
eso sí que
ya pintaba mejor
pero luego
aunque los viewers
han ido estabilizando
y subiendo
luego en realidad
los suscriptores
han ido más bien bajando
creo que es difícil
suscribirse
o sea
o la gente
se lo lleva
para alguien más grande
como Ibai
o yo qué sé
es complicado
que también lo entiendo
porque es pasta
o el Prime
solo tienes uno
no tienes más
así que
de Twitch
vives de los suscriptores
y la mitad
se lo lleva Twitch
o sea
ya es el colmo
del palo
y además
es muy sacrificado
porque tienes que estar
mucho tiempo
porque si dejas de estar
una semana
pues la gente dice
ah pues se acabó
Book and the Real Native
joder
pero es lo que estamos haciendo
a ti por el
mira
Aker dice que a ti
por el contenido de calidad
muchas gracias
muchas gracias
bueno
solo que sepáis
que ahora
si hacéis donaciones
con bits
y son mayores de 50 bits
que sepáis
si algún día lo probáis
que debería
escucharse el audio
o sea
como que podéis decir
un mensaje
y se escucha el audio
se escucha la frase
que hayáis puesto
dice
pues bueno
pues lo doblará
la persona
o lo que sea
mostraré más
Bootcamp de Real Native
antes era más fácil
sí creo que antes
era más fácil
menos mal que te dieron
el GDE
sí no voy a vivir
de GDE
pero sí menos mal
y me han preguntado
de qué trabajo
soy desarrollador web
en una empresa
en
en
adevinta
y no creo que
deje mi trabajo
tengo un proyecto
de app local de taxis
me sugieren lanzarlo
por expo
o por click
yo ya he dicho
que a mí expo
me encanta
y es una cosa
que creo que
que acelera el desarrollo
así que
yo utilizaría expo
el ritmo también cambia
no es lo mismo
los que se suscribieron
empezando
y fueron cayendo
en el bootcamp
y los que llegan
al stream
cuando ya está
empezado el bootcamp
se quedan perdidos
con lo que ven
y tienen que ir
a ver los vídeos
en youtube
es verdad
el exilio
de hecho
por eso
el próximo bootcamp
lo vamos a hacer
más pequeños
vamos a hacer
de hecho
si tenéis ideas
ya sabéis
que en discord
las podéis ir dejando
aunque no contesten
las ideas de ideas
para mi UDEF
me las leo todas
¿cuál crees
que es la mejor forma
de mostrar tus trabajos
tener un porfolio?
no
no se ha leído
Midu
ay
lo siento
ahora me siento
que te he engañado
Icoca
te lo leo yo
perdona
lo revisaré
y me encanta
que Icoca
lo ha puesto
como
lo voy a probar
no se ha leído
no se ha leído
pero gracias Icoca
Icoca dice
Midu
eres un grande
y me encanta
tu contenido
lo he leído
con voz de robot
muchas gracias Icoca
hostia
lo voy a ver
¿por qué no?
¿por qué no ha funcionado?
qué rabia
me ha dejado fatal
lo voy a ver
lo voy a ver
a ver
bits
min bits
to alert
momento
open to speech
lo tengo
a 100
perdón
lo tengo a 100
lo voy a guardar
momento
y debería ser
algo así
eso
pero ahora
lo he bajado a 50
perdona Icoca
pero muchas gracias
más majo
muchas gracias
¿te parece hacer algo
con Astro?
sí
os estoy esperando
a ver si me dais
alguna idea buena
Sergio
muchas gracias
por suscribirte con Prime
también
crack
muchísimas gracias
siete meses
Sergio
increíble
qué crack
siete meses
o sea es que has estado aquí
desde el primer día
qué grande
¿qué lenguaje te gustaría ser
tan pro como lo eres
en JavaScript?
hostia
Eglo
qué buena pregunta
qué buena pregunta
a ver
si pudiera elegir
ahora
wow
tengo muchos
tengo muchos
uno sería Rust
porque creo que
que se mueven muchas cosas
hacia allí
otro sería Swift
Swift
porque podría hacer
con Swift UI
aplicaciones nativas
tanto en EOS
como en
como en aplicación
de escritorio
y eso me llama
mucho la atención
me gustaría mucho
de esos
pero
no sé
no sé
creo que me quedaría
con Rust
porque parece que
es muy difícil
y hombre
si pudiera hacerlo
ya fácil
pues sería genial
oye
muchas gracias
Death 13 PNE
que
cinco meses
que lleva ya
que ahora ha renovado
su suscripción
compra
muchísimas gracias
muchas gracias
vaya clipbait
lo siento
joder con el clipbait
bueno
que nos vamos
buena
me saliste primero
un recomendado
Gastón
pues mira
justo me voy
qué mal
un generador de memes
dice Guaico
oye
esa es buena idea
algún sub
que ponga los stickers
de Mido
bueno
nos vamos a ir
pero mañana
vamos a ir a
mañana vamos a estar aquí
también
y vamos a estar haciendo
vamos a estar haciendo
Coding Challenge
de JavaScript
así que
espero verte por aquí
mañana a la misma hora
a las 8 de la tarde
muchas gracias a todos
los que me han acompañado
gracias
Bailovers
Fidalgot
Gastón Arevalo
amo tu peluche
sí es genial
mi peluchillo
está aquí
aquí
está mi peluche
gracias Geo Beta
Eglo
Golang
también me llamo un montón
Luigi Dev
Fullstrip
TM
Feral
Maxi83C
muchas gracias a todos
los que me habéis acompañado
muchísimas gracias
sé que has seguido un ratito
pero espero que hayáis aprendido
algo nuevo
nos vemos
mañana
sed buenos
y que tengáis un feliz
inicio de semana
Sebas
soy Franz
RSBMK
grandísimo gracias
por tu contenido
muchas gracias a ti
hombre
Héctor
cuidaos mucho
sed buenos
me voy a comer
tengo un hambre
que le voy a meter un bocado
lo primero que vea
adiós
hasta mañana
chao
chomeagos
chomeagos