Tenemos curso de React Native desde cero, desarrollo de aplicaciones móviles utilizando JavaScript
y además con un rendimiento bastante bueno, lo vamos a comentar, aunque no tan bueno como utilizar los lenguajes nativos, obviamente,
pero en muchos casos, en muchos casos tampoco va a ser algo que necesitemos, porque hay aplicaciones que tampoco es que necesiten ir tan, tan y tan finas
y lo vamos a ver como incluso Microsoft, no solo Facebook que es la creadora de React Native, sino empresas como Microsoft, como Discord, como un montón
utilizan React Native para sus aplicaciones. Os voy a enseñar lo que vamos a ver en esta primera clase, si os parece, para que vayáis preparándoos
y así pues estáis más ready. Esto es lo que vamos a ver en la clase de hoy. Si me da tiempo a más, pues no os preocupéis, haremos más cositas.
Pero lo que vamos a hacer es, ¿qué es React Native? Eso lo voy a explicar ahora, ¿qué es Expo? Iniciar el proyecto con Expo, vamos a ver los primeros componentes
con React Native, no solo los vamos a ver, sino vamos a ver temas de estilos, por qué son importantes, qué ventajas y desventajas tienen unos u otros,
por ejemplo el scroll view respecto al flat list, vamos a hacer fetching de datos, vamos a hacer un estado, vamos a tener un efecto, eso lo vamos a ver.
También el tema del safe area view, porque los móviles, vamos a ver que los móviles son un poco polémicos y es que el área útil del móvil
no es la misma para todas las aplicaciones. También vamos a ver cómo podéis ejecutar vuestra aplicación y verla en vuestro móvil Android o iOS, ¿vale?
O sea que eso está súper genial, es una cosa que hace Expo y funciona maravillosamente bien. Vamos a ver cómo podéis cargar SVGs,
vamos a ver animaciones para mostrar los elementos y vas a ver que es que es tan fácil, es tan fácil que llama mucho la atención, ¿eh?
Y vamos a ver cómo podéis instalar Tailwind en React Native, el pull to refresh y un montón de cosas más.
Que no nos da tiempo todo, no te preocupes, mañana vamos a continuar y veremos el enrutador, veremos más eventos, vamos a ver más temas de estilos,
vamos a ver un montón de cosas, así que no os preocupéis.
Que nos quedamos que mañana lo reventamos y os encanta el curso, pues la semana que viene, el miércoles,
volveremos con React Native para seguir iterando nuestra aplicación, así hasta que os guste, así hasta que mientras os guste el curso,
pues seguiremos y haremos notificaciones, haremos actualizaciones sobre The Air, haremos todo, todo, todo.
Mientras os guste, pues ahí estaremos, dándole cañita, ¿vale? Así que muy bien, estas son las cosas que vamos a hacer,
vamos a pasar a explicar un poquito qué es React Native, React Native, ¿qué es exactamente?
Vamos a quitar esta fuera, vale, ¿qué es React Native? Vale, React Native hay gente que se cree que es una biblioteca,
que es un framework, yo diría que la mejor explicación de React Native es que es una plataforma de desarrollo, ¿vale?
Una plataforma completa, ¿por qué? Porque tienes componentes, tienes el nivel de biblioteca,
pero tiene un montón de cosas más para poder ejecutar tus aplicaciones.
¿Y para qué sirve esta plataforma de desarrollo? Pues para desarrollar aplicaciones móviles de escritorio y también web.
¿Cómo que se dedica a demasiadas cosas? Bueno, porque la idea de React Native es aprender una vez y escribir en cualquier sitio,
o sea, poder aprender una vez y poder crear una aplicación en cualquier dispositivo, incluso en la web.
Ya lo veréis que también en la web funcionan, ¿vale? ¿Y esto cómo es? Bueno, pues React Native es una plataforma
que desarrolló de código abierto Facebook, ahora Meta, en 2015. Y como muy bien dice el nombre,
todo lo que tiene que ver con interfaz de usuario a la hora de generar nuestros componentes y todo,
se basa en React. Y de hecho, porque mucha gente no lo sabe, tened en cuenta que React Native utiliza
la misma biblioteca que utilizamos para la web. La misma biblioteca de React, la misma biblioteca,
cuando vosotros hacéis un import React from React, esa biblioteca también la utilizamos en React Native.
Exactamente igual. Entonces, alguien dirá, ¿y cuál es la diferencia de React Native y React? ¿Cómo puede ser?
La diferencia es que cuando lo queremos ejecutar en la web, vais a ver que tenemos una dependencia en concreto
que se llama React DOM, ¿vale? Es esta de aquí, es este React DOM. Esta dependencia es la que le permite a React
renderizar la aplicación en el navegador. Pero la dependencia de React normal y corriente no solo la utilizamos
para la web, sino que también la utilizamos para React Native. Es exactamente la misma. Así que eso lo hace
muy interesante. Pero obviamente React Native tiene un montón de código más para permitir llevar tu código
de JavaScript a código nativo. ¿Cómo hace esto? ¿Cómo puede crear aplicaciones nativas para Android e iOS
utilizando React? Pues lo que tiene es un sistema React Native por detrás en el que digamos que hace
una especie de puente, ¿vale? Un puente. ¿Un puente en qué sentido? Un sentido de que tú vas a escribir
y no vas a ver código nativo. Tú lo que vas a escribir son con JavaScript o con TypeScript componentes de React
normales y corrientes. Pero internamente React Native sí que tiene código nativo en diferentes plataformas
para comunicar el código que tú estás haciendo con código nativo. Y eso es lo que hace y es tan diferente
a otras soluciones como puede ser Ionic o puede ser en su día Córdoba, ¿vale? Córdoba que es una cosa que se utilizaba
para crear aplicaciones con HTML y JavaScript. No es lo mismo, ¿vale? No es lo mismo lo que hacía
Córdoba o lo que hace Ionic o estas, ¿vale? Es distinto. React Native digamos que está todavía
un poquito, un poquito más cerca de la plataforma. Está más cerca de la plataforma porque sí que hay
código nativo por detrás. Pero lo que hacíamos hace tiempo con esto, Apache Córdoba, esto en realidad
es una página web que se empaqueta directamente como si fuese una aplicación. Es interesante
también. Al final Ionic utiliza Córdoba por debajo y es una tecnología interesante y que puede ser
suficiente. No es que haya una mejor que la otra. Todo tiene su caso de uso. Pero en este caso
Córdoba te ofrece una página web y tú tendrías la aplicación pero es una página web. En cambio React Native
no es una página web. Esto es un error muy común que la gente se cree que tiene mal rendimiento
porque es una página web. No. React Native sí que tiene código nativo y de ahí viene el nombre
y por eso justamente que es que tiene un rendimiento bastante interesante. Entonces, más cositas de
React Native que tenéis que saber. Como os digo, de React Native también tenemos React Native para Windows
y para Macos. ¿Vale? Y eso, lo vamos a ver aquí, es de Microsoft. Todo lo que vais a aprender hoy lo vais a poder
aplicar también para aplicaciones de escritorio. Que esto es espectacular. Porque no solo existe React Native
para hacer aplicaciones para Android y para iOS con exactamente el mismo código, que lo veis aquí, sino que también
Microsoft, esto es oficial de Microsoft. No es que esto lo ha hecho alguien en su casa, en su pueblo. No, no, no.
Esto es de Microsoft. Fijaos, Microsoft React Native Windows y también tiene React Native Macos, que son
exactamente la misma idea que estamos aprendiendo para Android y para iPhone, pero para Macos y para
Windows. De hecho, para que lo sepáis, porque muy poca gente lo sabe, obviamente esto tiene un rendimiento
muy superior a Electron, porque pasa lo mismo. Electron no deja de ser una página web y esto no es una página
web. Esto lo que hace es que tú escribes JavaScript, pero tiene cierto proceso detrás que va a ejecutarse de forma
nativa. Y para que os hagáis una idea, hay muchas herramientas, muchas aplicaciones que tiene React, que tiene la gente de
Microsoft y que utiliza esto. Lo tiene tanto en Windows, también en Macos, por ejemplo, los Microsoft Office. Hay un montón de
cositas que lo están haciendo con React Native. Las aplicaciones de escritorio de Microsoft también están
hechas. De hecho, ahora lo veremos. No os preocupéis, que veremos unos cuantos ejemplos. Porque si queréis saber
quién está utilizando React Native, ¿vale? Vamos a buscar Who Uses React Native. Así lo encuentro por aquí. Aquí tenemos el
Showcase. Este es el Showcase. El Showcase, gente que lo está utilizando. Meta, por supuesto. Tenemos Facebook, Facebook Ads
Manager, MetaQuest, la Messenger Desktop. Estos son cuatro aplicaciones enteras que lo están utilizando. Microsoft. En la suite
de Microsoft Office, el Outlook, el Teams, Xbox Game Pass, Skype, todas estas aplicaciones, que quizás no lo sabías, están
utilizando React Native. Y de hecho, en escritorio también podéis ver un montón de aplicaciones. La aplicación de Windows de
Xbox App, la Microsoft Store, Microsoft Office, está utilizando también React Native. Hay un montón de
aplicaciones, un montón de aplicaciones que están utilizando, ¿vale? Así que para que luego la gente se cree. Amazon, Amazon
Shopping, Alexa, Amazon Fotos, el Kindle, App Store. ¿Sabías que estas aplicaciones están hechas con React Native? Vamos
más. Shopify, Wix, Showcase. Tenemos aquí NFL, Tesla, PlayStation App, Puma. O sea, hay Discord. La aplicación de
Discord también. Bueno, hay un montón. Coinbase. De hecho, Coinbase está siempre buscando desarrolladores de
React Native. Bueno, pues como podéis ver, y esto al final es solo una parte. Hay un montón de aplicaciones
más que utilizan React Native. Y para que todavía os pueda convencer un pelín más al respecto, os voy a poner
este dato, que es un datazo, ¿vale? Evan Bacon, obviamente Evan Bacon, pues es el creador de Export Router, que es
una de las dependencias que vamos a utilizar porque ya veremos por qué, pero Evan Bacon, que es el creador
de Export Router, fijaos en este datazo. Dato de las 100 aplicaciones de negocio del App Store en el mes
de mayo del 2024. El 26% de las aplicaciones del top 100 están hechas con React Native. El 3% están hechas
con Flutter. Y el 8% están hechas con Córdoba. Esto no quiere decir que React Native sea mejor que
Flutter ni que Córdoba. No quiero decir eso. Lo que quiero decir es que tiene mucha más presencia de la
que muchas veces la gente cree. Que la gente se cree que está hecho todo con nativo o que React Native
no queda mucho porque Airbnb hace unos años se fue y nada de eso. Ya podéis ver que en el top 100,
más del 25%, una de cada cuatro aplicaciones que veis en el top 100 del App Store en negocios,
pero también hay en diferentes categorías, vais a ver que están hechas con React Native. O sea,
tremendas. Y ahora la pregunta del millón, ¿con qué está hecho el resto? ¿Con qué está hecho el resto
de aplicaciones? El resto de aplicaciones está hecho seguramente de forma nativa o con otros frameworks,
pero seguramente nativa con el lenguaje Swift, ¿vale? Así que ahí lo tenéis. Ahí tenéis datos,
datos, no opiniones. Datos, datos, datos. Pero no os quiero decir que todo es increíble. Yo no vengo
a engañar a nadie ni vengo a convenceros de que React Native es, vamos, es perfecto,
nada de eso, ¿vale? React Native tiene muchas ventajas. Obviamente, las vamos a ver, pero también
tiene desventajas y os las voy a decir. A ver, la mayor desventaja que tiene React Native es el
rendimiento. El rendimiento ha mejorado muchísimo y, como os digo, es mucho mejor que el que puedes
tener con Córdoba. Pero aunque ha mejorado mucho, React Native no llega a ser tan eficiente como
aplicaciones nativas que puedas hacer con el lenguaje de Swift o con Kotlin en Android. Entonces,
hay que tener en cuenta que hay un coste de ese puente, aunque están ahora actualizando y
evolucionando la tecnología y la arquitectura de React Native para hacer un sistema bridge-less,
o sea, de no tener ese puente de comunicación y así que vaya más rápido. De hecho, ya lo están
sacando y funciona súper bien y va mucho más rápido, pero por más que hacen estas optimizaciones,
queráis o no, no va a llegar nunca a ser 100% nativo, ¿vale? Respecto a Ionic es exactamente
lo mismo, Josadev. Ionic por detrás utiliza Córdoba, que está muy bien, ¿eh? Pero Córdoba no deja de ser
exactamente lo mismo. Ahora, la pregunta del millón. Muy bien, Abraham Mixto lo dice. Dice,
¿pero esa diferencia tiene mucho impacto? Pues a ver, si habéis utilizado alguna de las aplicaciones que
hemos dicho antes, como por ejemplo la aplicación de Discord, pues a ver, vais a notar que funciona
bien. Muchas de las aplicaciones, por ejemplo, Office, Teams, muchas de las aplicaciones que
utilizan React Native funcionan bien, no hay ningún problema. O sea, funcionan perfectamente. Ahora
bien, quizás para sacar el 100% de rendimiento, si es una aplicación que necesitas hacer unas
animaciones muy brutales o que tiene que hacer, no sé, que quieres que esté 100% optimizada,
pues igual no es la mejor opción, ¿vale? Es lo que hay también para el peso de la aplicación,
porque quieras o no React Native, lo tienes que empaquetar para distribuir tu aplicación. Eso
tiene un coste también. O sea que, bueno, rendimiento y optimización no es perfecto. ¿Qué
le vamos a hacer? La segunda, que aunque, como podéis ver, tenemos algunos componentes, ¿no? Aquí
podéis ver que tenemos un componente View, Text, que lo vamos a ver después. Y esto lo que nos
permite es que se mapea directamente con algunos bloques nativos y que nosotros no tenemos que
escribir y que por arte de magia ya es código nativo 100%. Claro, ¿qué pasa? Que no siempre
vamos a tener un componente que nos dé acceso a una parte del dispositivo. Por ejemplo,
imaginad que por lo que sea iPhone o iOS, ahora saca la nueva inteligencia artificial esta y tiene
una API para hacerle preguntas a la inteligencia artificial. Claro, en React Native, desde el
día cero o el día uno, no vas a tener acceso a esa API. Vas a tener que esperar un poco. Entonces,
quieras o no, vamos a tener que esperar que alguien haga esa conexión. Va a haber una latencia entre
el tiempo en el que tienes esa novedad y tú la puedas utilizar, ¿vale? O sea que no siempre tiene
lo último. Y esto lo que significa también es que siempre hay una dependencia de módulos,
de cosas de terceros, de alguna cosa que esto a la gente le puede agobiar, ¿no? Por ejemplo,
si quieres tener acceso al Bluetooth, pues igual tienes que buscar un componente que te
da acceso al Bluetooth. En el peor de los casos, o en el mejor, tal quién sabe, vas a tener que
escribir tú el módulo nativo. Es raro, pero hay veces que si quieres algo muy específico y muy
controlado, puedes escribir tu propio módulo nativo y comunicarlo con React Native. Es una cosa
que puede ocurrir, entonces, para que lo sepáis, ¿vale? Ahora, ventajas, porque obviamente tiene
sus desventajas. Bueno, otra desventaja es que si no te gusta React, pues usa React, ¿vale?
Entonces, si no te gusta React, si odias React, si odias JavaScript, si odias React, ¿vale? Aunque,
bueno, yo creo que cada vez, sobre todo JavaScript, la gente que lo odiaba ya no lo odia tanto,
pero el tema es que si odias JavaScript o React, pues eso es lo que hay. O sea, está hecho con React
y está hecho con JavaScript o TypeScript. No te salvas de eso. No se puede utilizar con otro lenguaje,
no se puede utilizar con Vue, por ejemplo. Vue tiene otras soluciones, eso como sea. Pero
que tengas en cuenta JavaScript o TypeScript y React. Si no te gusta ninguna de estas
tecnologías, pues búscate otra cosa. No pasa nada. Hay más soluciones ahí fuera. No
hay ningún problema, ¿vale? Entonces, ventajas, porque tiene ventajas. Facilidad de desarrollo.
Lo vas a ver hoy en el curso. Vas a alucinar porque se pueden desarrollar aplicaciones de
forma muy rápida, sencilla, con tecnologías como el Fast Refresh, que no tienes que volver
a compilar nada para ver los cambios y eso lo hace espectacular. Luego vas a tener que
si sabes React, pues te va a encantar React Native porque es exactamente lo mismo. Es
súper fácil, súper fácil. Un único código, y esto es espectacular, un único código para
tu aplicación móvil de Android y de iOS. Esto muchas startups, claro, se aprovechan que
dicen, ostras, no tengo recursos para hacer dos aplicaciones nativas, pues voy a utilizar
React Native, que además puedo reutilizar código de la web para, por ejemplo, la lógica
de negocio, las validaciones. Todo eso, mientras sea JavaScript puro, lo puedes utilizar en React
Native sin ningún problema. Y eso es increíble. Y además, el mismo código lo podrías utilizar
para hacer la aplicación de Android y de iPhone. Y digo más, en el caso específico, porque
seguro que te lo estás preguntando, ¿vale? Pero ¿qué pasa si hay algo en concreto que
quiero que sea diferente en iPhone y en Android? Pues no te preocupes. Ya sea estilos,
componentes, comportamientos o lo que sea, puedes hacer un if porque puedes detectar muy
fácilmente si estás en un dispositivo o en otro y cambiar el comportamiento, la forma
visual y todo. Eso no ha ningún problema. Luego, el rendimiento. ¿Por qué es una ventaja
también? Porque aunque os he dicho que no llega a ser tan rápido como las aplicaciones
nativas, es bastante rápido. Funciona bastante, bastante bien. Entonces, el rendimiento puede
ser bastante suficiente para mucha gente. La comunidad tiene una comunidad enorme, muchas
bibliotecas, artículos, cursos y tal. Y la gran ventaja, que poco se habla de esta, la
gran ventaja, en mi opinión, es la posibilidad de hacer muy fácilmente actualizaciones over
the air. ¿Qué es esto? Over the air, ¿vale? O OTA, que se le llaman OTA. Las actualizaciones
OTA son actualizaciones que tú puedes, pues, llevar a tu aplicación sin necesidad de pasar
por la App Store. O sea, que si tú vas a actualizar el JavaScript de tu aplicación de
React Native, puedes llegar a hacerlo sin necesidad de que vuelvas a publicar la aplicación en la
App Store, tener que esperar a que te la acepten, a que se aseguren que está todo bien y tal. Lo
puedes hacer sin ningún problema con React Native, Expo y un montón de servicios que
te lo permiten y es súper fácil. Lo cual esto mejora un montón la entrega de nuevas
versiones de la aplicación, que no que tenga que pasar todo el proceso y todo esto. Así
que el OTA es Over the Air, Over the Air Update o Over the Air. Pero esto lo que quiere decir
básicamente es esto, que puedes actualizar a distancia tu aplicación sin que el usuario
tenga que ir al App Store y que tenga que darle actualizar, ¿vale? O sea, eso es tremendo,
tremendo. Si nos da tiempo, hoy no, hoy no, obviamente, pero si nos da tiempo lo haremos.
Y ahora, solo para terminar, dos detalles más que seguro que son los que os interesan, que
es el trabajo. ¿Qué pasa con el trabajo? A ver, yo no, de nuevo, hay mucha gente que
compara Flutter con React Native y aquí, por ejemplo, lo hacen. Yo no tengo absolutamente nada
en contra de Flutter. Me parece una tecnología súper interesante. Si te gusta, apréndela,
está súper bien. Pero muchas veces las comparan. Yo lo que quiero poner en relevancia o en importancia
es el hecho de que hay todavía, y lo podéis encontrar si os ponéis a buscar en cualquier
sitio, hay un montón, un montón de aplicaciones, o sea, de trabajos de React Native. Aquí veis que
según, esto es de Indeed, que es una de las grandes empresas de estas de empleo. Y esto es del año
pasado, del 12 de agosto. No habrán desaparecido todos de golpe ahora, ¿vale? Pero ya puedes
ver que más o menos hay un montón de ofertas de trabajo con React Native. Que haya más
o menos que Flutter, esto puede cambiar. A lo mejor en Flutter ahora hay más y tal. Pero
lo que sí que te puedo decir es que hay mucha oferta, especialmente de startups, que buscan
desarrolladores de React Native. ¿Por qué? Por lo que hemos dicho antes. Porque es un perfil
muy interesante, porque puedes utilizarlo para hacer web y además puedes hacer dos aplicaciones
a la vez. Así que ahí tenéis un ejemplo. Y además de esto, para que veáis, no solo
vais a aprender React Native, sino que también vas a aprender Expo. Y Expo podéis ver más
gente que lo está utilizando. Por ejemplo, la de Discord utiliza Expo. Coinbase utiliza Expo.
Burger King, Pizza Hut, la NFL, Walgreens. Pues todas estas aplicaciones que veis, por ejemplo,
Amazon. Todas estas aplicaciones. La CNN. Es que es espectacular. Es espectacular. La de
aplicaciones que utiliza Expo. Expo, ¿qué es? ¿Por qué vamos a utilizar Expo? Pero no
es esto de React Native. ¿Qué me quieres decir con Expo? ¿Por qué? ¿Qué es Expo? Vale.
No te preocupes. React Native, como te he dicho, es la plataforma. ¿No? La plataforma
que nos va a permitir hacer esto. Pero, pero, si miráis la página de React Native, fijaos
que vamos bajando. Y aquí nos dice, empieza con un framework. ¿Cómo? Dice, venga, empieza
con, empieza ya rápido con un framework. Y te dice, React Native te trae todo el paradigma
de programación con React a plataformas como Android y iOS. Pero, claro, no te trae una
forma de hacer un rutado o de poder acceder a diferentes partes de la plataforma, como por
ejemplo, el Bluetooth. O sea, que dedica mucho más a lo que es el tema de la UI. Y dice,
para construir una aplicación nueva en React Native, recomendamos un framework como
Expo. ¿Vale? Entonces, ahí lo tenemos. El tema es que React Native durante mucho
tiempo se podía utilizar solo. Pero, ¿qué pasa? Que le faltaban ciertas cosas que
siempre te obligaba a tener que instalar un montón de dependencias y hacía que el
proyecto era muy complejo. Entonces, lo que recomienda el propio equipo de React Native
es utilizar Expo. Y Expo sería el NextGS de React Native. Igual que en la web teníamos
para React NextGS, que sería el framework más recomendado últimamente, pues para React
Native también tenemos un framework bastante similar en cuanto a IDEA a NextGS, que se
llama Expo. La página de Expo la podéis acceder a expo.dev, aunque aquí ya podéis ver
que yo ya he iniciado sesión, porque podéis iniciar sesión. Al final tiene un montón de
servicios, pero no es obligatorio ni registrarse ni pagar absolutamente nada. Tiene servicios
premium que son opcionales, no son obligatorios. Ahora, pueden ser interesantes, hombre, pues
sí que son interesantes, pero no es obligatorio para nada que los utilicéis. Sí que os recomiendo
que os registréis porque os va a dar bastante visibilidad, un montón de cosas. Esta sería
la página oficial, esta es la home, ¿vale? Aquí tenéis un poquito de explicación y lo
que nos permite es simplificar un montón el hecho de cómo crear un nuevo proyecto, el cómo
crear las rutas. Aquí podemos ver el enrutado, por ejemplo, muy parecido al de NextGS, el
tener la posibilidad de abrir el proyecto en web, en Android y en iOS muy fácilmente,
poder poner mapas, renderizar imágenes, acceder a la cámara, el tener la navegación, un montón
de cosas que de otra forma será bastante compleja. Y luego ya tiene cosas más de pago, pero
que bueno, están interesantes, como el hecho de poder tener un equipo para que puedan ver
tu aplicación y un montón de cosas. Y el desplegarlo y además poder hacer aquí, fíjate,
pues hacer la build tanto de Android como de iOS. Te da un montón de cosas muy interesantes,
así que a día de hoy es la forma recomendada, no por mí, sino por el equipo de Real Native
para crear aplicaciones de Real Native. Así que vamos a ver ya de primeras cómo haríamos
nuestro primer proyecto y vamos a empezar ya con el código, que seguro que tenéis un montón
de ganas. Pues para inicializar vuestro primer proyecto con Expo, vamos a tener que hacer
este comando npx create expo-app-latest. Ahora, npx, ya sabéis que npx es el comando que tenéis
una vez que instaláis Node y npm. Si no tienes instalado Node, instálalo, porque si quieres
utilizar JavaScript en la terminal y todo esto, para estos proyectos lo vas a necesitar.
Y npx es el comando ejecutable de npm y vamos a ejecutar este paquete create expo-app en la
última versión. Vamos a utilizar este, aunque luego vamos a utilizar otro. Ahora lo que quiero
es enseñaros, digamos por defecto, qué es lo que os crea. Vamos a crear aquí una example
cursor react-native. Le pones el nombre. Se pone ahora hacer el npm install. Os recomiendo
que utilicéis npm. Igual os gusta más pnpm. A mí me gusta más pnpm. Pnpm es la alternativa
npm que suele ser más rápida. El problema es que he tenido bastantes problemas muchas
veces con pnpm. No sé si en la última versión la han arreglado, pero como quiero asegurarme
que a todos os funciona correctamente y que no tenéis problemas con una versión de pnpm
que no sé qué, no sé cuánto, vamos a intentar utilizar npm, que sé que no da ningún problema
y ya está. Ya os digo que con pnpm he tenido alguno, por desgracia, y prefiero asegurarme.
Ya veis que con npm ya ha tardado per se, pero encima es un proyecto bastante, bastante
tocho. Con jar puede ser que no tenga problemas, pero me he querido asegurar y con npm sé que
no tiene. ¿Ves? Yo también tuve problemas con pnpm en react-native. Dice Adrián Chupisi.
Pues es que es totalmente. En react-native también es válido para la hackathon. También
es válido para la hackathon, obviamente. Sí, sí, totalmente. Vale, vamos a abrir
mientras. Voy a ir abriendo, a ver, example, cursor react-native, ¿vale? Porque está
haciendo el npm install y no necesitamos el npm install más que para ejecutar las
cosas. Y así os voy explicando cómo es el proyecto de expo. Vale, esto es lo que nos
ha creado, ¿vale? Esto es todos los archivos que nos ha creado. Ya veis que hay bastantes,
no os preocupéis. Tendríamos, vamos a empezar de abajo a arriba, que son como los de menos
interesante a más interesante. Entonces, ya tenemos la configuración de TypeScript, porque
sí, amigos, tenéis TypeScript de primeras. Ya os viene con TypeScript configurado. Si
no os gusta TypeScript, hay una opción para quitarlo y todo esto. Lo podéis hacer. De
hecho, el curso lo vamos a hacer sin TypeScript, pero que sepáis que lo podéis hacer con TypeScript
sin problemas. Luego tendríamos el package.json, donde tenemos todas las dependencias que nos
ha instalado por defecto. Aquí hay un montón de dependencias, pero no te preocupes porque
no vamos a utilizar ni la mitad. Esto es como por defecto expo te instala todas las
dependencias que puede. Por ejemplo, las fuentes, el router, el splash screen... Hay
un montón, pero nosotros las vamos a instalar conforme las vayamos necesitando. No te preocupes
si te quedan tantas. Pero fíjate, tenemos aquí React, la misma dependencia, React DOM,
porque claro, este proyecto, y lo vas a ver ahora, vamos a poder utilizarlo también en
la web, ¿vale? Por eso lo tenemos aquí. Lo más interesante, el archivo main, que fíjate
que va expo-router-entry. Esto es una cosa que haremos mañana. El punto de entrada
la aplicación lo tenemos aquí y es el router de expo, pero al principio no lo vamos a
utilizar, ¿vale? Y estas son algunas de las dependencias. Ya tenemos aquí el spoiler,
Android, iOS y web. Perfecto. Vamos a ver más cositas. En scripts, nada, nada interesante.
Hooks, unos cuantos hooks que tenemos por aquí para utilizar diferentes esquemas, porque
podemos hacer modo oscuro y modo claro. Constantes, esto tenemos aquí de colores, pero porque
podemos hacer temas. Por ejemplo, fijaos que tenemos aquí todos los colores del claro y del
oscuro, ¿vale? Tendríamos nuestros componentes, que puedes ver que son componentes que visualmente,
al menos escritos, se parecen mucho a componentes de React. No te preocupes que los nuestros van
a ser más sencillos que este, ¿vale? Por si los ves así un poco raros, pero bueno, más
o menos, para que veas que la sintaxis no tiene nada muy extraño, ¿vale? En assets, tendríamos
aquí una carpeta con archivos estáticos y aquí viene lo más interesante, que sería
el enrutado. Donde tenemos, por ejemplo, aquí tendríamos un layout, que sería lo
que envuelve a nuestra aplicación y también tendríamos, pues por ejemplo, el index, donde
tenemos aquí, pues, imágenes. Más o menos se puede ir entendiendo, ¿no? Por ejemplo,
theme text, pues esto es texto, pero que tiene los estilos, ¿vale? Aquí tenemos texto
y tal. Así que esto es lo que nos crearía por defecto. Si queremos ver cómo funciona, ya
aquí nos ha dicho, oye, ya lo he instalado todo y podríamos hacer example-curso-react-native
y podemos ejecutar cualquiera de los dispositivos. Vamos a empezar primero con el de web, que
es el más típico y el más rápido, ¿vale? Hacemos un mpm run web, nos abre aquí la
puerta 8081, ¿vale? Que fíjate que está como primero bundleizando, por eso sale así
vacío, ¿vale? Está como haciendo el bundle, ¿vale? Está aquí dándole, pam, y ya tenemos
esto. Es una página web normal y corriente. Es una página web normal y corriente.
Fíjate que tiene incluso la navegabilidad. Tienes aquí como dos botones abajo y cambia
la URL. Esto es exactamente la versión web. Pero igual que tenemos la versión web, fíjate
que tenemos aquí como un código QR, para empezar, un código QR, y tenemos aquí la
posibilidad de abrir Android, iOS Simulator o la web, que es la que he abierto. Lo interesante
de tener la versión web, que es muy útil, es para, si quieres desarrollar muy, muy,
rápido, puedes hacerlo en la web, que tiene, pues es inmediato, no necesitas ningún dispositivo,
no necesitas absolutamente nada. Y una vez que ya sabes, oye, más o menos veo que esto
tiene sentido y tal, puedes abrir uno de los simuladores que suele ser un poquito más
lento. Pero imagínate que queremos abrir ya el simulador. Pues le damos a la i, ¿vale?
Le he dado a la i, fíjate que me dice abriendo iOS, ¿vale? Pues aquí me dice que no encuentra
un asset. Entiendo que es porque no estará optimizado para iOS el asset del iconito, porque fijaos
que aquí dice que el icono no lo encuentra. Vale, a ver si, no sé si aquí, vale. Fíjate,
me lo ha abierto aquí y ya tenemos aquí el simulador con la aplicación, exactamente con
la misma aplicación, exactamente la misma que tenemos aquí. Ahora, fíjate que aquí
ya está funcionando con el modo oscuro y el modo claro, que esto lo veremos mañana
también, como hace el modo claro y modo oscuro. Y aquí lo tenemos con el modo claro
porque en móvil tengo seleccionado el modo claro. Pero es la misma aplicación, funcionando
tanto en web como en iOS. Y lo mismo podríamos hacer con Android, ¿vale? Aquí vemos los
botones, Open Android, le damos a la A. Voy a intentar a ver que se vaya abriendo porque
os digo una cosa, Android suele ser el más problemático en todo, en rendimiento, en que
se quede congelado, en que no funcione bien, en que no sé qué. Así que tened bastante paciencia
porque muchas veces puede ser que no funcione. Mira, por ejemplo, ahora está tardando la vida.
Mira, está haciendo aquí el bundling. Parece ser que ahora sí que funcionará. Vamos a ver.
Vamos a ver si funciona. Vale, pues ha tardado lo suyo. Pero la ha conseguido, la ha conseguido.
Vale, voy a explicar una cosa que vamos a utilizar bastante y es esto. Fijaos que aquí hay un aviso
que dice, este es el menú de desarrollo. Te da acceso a herramientas útiles de ExpoGo.
Puedes utilizar el comando M, esto en macos, pero en Windows será de otra forma, ¿vale?
Y para otras plataformas, control M y ya está. Vale. Pues fíjate que si ejecutas ese atajo,
te aparece este menú de aquí que te va a permitir hacer un reload, ir a la home, ver el rendimiento
de la aplicación, inspeccionar elementos como si fuese el inspeccionar de las DevTools, ¿ves?
Pues tienes aquí los componentes, el margin, el padding, todo, todo. Puedes ahí ir recuperando
cada información, ¿ves? Puede ver el rendimiento, la network, esto si se hace algún tipo de petición,
el touchables, pues para ver los botones para inspeccionar o para ver si se está tocando
un botón, lo que sea, ¿vale? Y si le doy al control M, ¿veis? Vuelve a salir aquí.
Puedo hacer el height element inspector, me lo quito de aquí, ¿vale? Y también podéis
desactivar el far refresh, que no creo que lo queráis hacer nunca. Pero es impresionante.
Ya veis que aquí está la gracia, la experiencia de desarrollo. Y lo mejor de todo es,
fijaos que tenemos aquí, tenemos aquí iOS, tenemos la web, lo tenemos todo, ¿verdad?
Tenemos aquí. Y aquí tenemos la palabra home, ¿vale? Home, tenemos ahí la palabra home
en todos, ¿vale? Pues vamos a... No, welcome, perdón, no home. Welcome, ¿va?
Pues si buscamos aquí y ponemos, vamos a poner esto aquí para que lo veamos más claro,
como en tiempo real lo está haciendo, voy a poner aquí el simulador este, ¿vale?
Voy a hacer esto un poquito más pequeño. Y fijaos que voy a poner otra cosa.
Guardo los cambios. ¿Habéis visto eso? Ha sido inmediato. Pero es que lo mejor es
que no solo tenemos el cambio aquí, sino que también lo tenemos aquí y también lo
tenemos en Android. A la vez. El cambio que he hecho en el código ha sido inmediato
en los tres dispositivos. Claro, esto es lo que me refiero a la experiencia de desarrollo.
Que queráis o no, la experiencia de desarrollo que te da Expo a la hora de probar tu aplicación
es espectacular. De nuevo, cualquier cosa que vais haciendo, hay veces que se puede quedar
tonto, ¿vale? Pero fijaos que voy a guardar ahora y ya está. O sea, es que es rápido.
Es rápido, no. Es inmediato. O sea que esta experiencia no se tiene con muchas cosas.
Porque, por ejemplo, incluso en nativo puede ser que tengáis que recompilar. Es verdad
que han mejorado mucho y hay cosas que sí que son más instantáneas. Pero este tipo
de mejora es que es impresionante. Es impresionante.
Dispositivos. Por desgracia, para tener el simulador de iOS necesitáis un Mac. Yo al menos
no tengo ni idea que en Windows podáis tener algún tipo de cosa así. Lo que sí que podéis
hacer es conectar por USB y podéis ejecutar directamente en vuestro dispositivo conectándolo
por USB. Igual que tenemos el simulador, lo podéis hacer por USB. O sea, eso no hay
ningún problema. Ya sea iPhone o Android. Android sí que lo podéis tener tanto en Windows
como en Mac OS como en todos. Ahora bien, aviso para navegantes. No voy a instalarlo yo
aquí desde cero porque no me daría la vida. Eso es lo primero. Y lo segundo porque cada
sitio es muy diferente. Por suerte, la gente de Expo tiene una documentación que os explica
paso a paso cómo hacer los Mac OS en Windows y en Linux.
Mi recomendación, que vayáis ahí, que sigáis todos los pasos para instalar todas las
dependencias que necesitéis, Java, las variables de entorno, del path, Android Studio y todo
esto. Pero con paciencia, ¿vale?
Porque sobre todo Android es un poco problemático muchas veces.
La verdad, si tenéis un Mac, lo mejor es programar en el simulador de iPhone.
Funciona súper bien, no suele quedarse congelado, cosa que el de Android sí que le
suele pasar. Es rapidísimo, no consume tantos recursos y tal. Pero bueno, solo para
que lo sepáis. Y si no, pues siempre tenéis la posibilidad de hacer el de la web y ya
está. Utilizar el de la web y ya está.
Y última cosa y empezamos a crear nuestra aplicación.
También, y es muy interesante, si no tenéis un simulador, si no queréis conectar un cable,
si no tenéis nada. Bueno, una cosa que podéis hacer es el código QR. De hecho, si no me
equivoco, deberíais ser capaces de entrar con este código QR a la aplicación. Y así podéis
ir a vuestra aplicación, ¿vale? Y abrirla en un sitio, ¿vale? Expo quiere, sí, quiere
acceder, ¿vale? Y aquí, fijaos que la misma, la misma aplicación que tenemos, por ejemplo,
en iPhone, esta misma aplicación se está, se está aquí, se está reproduciendo también
aquí mismo, ¿vale? Es increíble porque lo mejor, y fijaos, a ver si lo veis, si lo veis
bien, ¿vale? ¿Veis que pone es rápido? ¿Vale? Fijaos en esto, fijaos en esto.
Es brutal, ¿vale? Voy a poner es brutal. No sé si lo estáis viendo. No sé si se
ve. Ay, no se ve, no se ve. Pero bueno, en tiempo real, también en vuestro dispositivo
vais a ir viendo los cambios, ¿vale? Es tremendo. Lo mejor de esto es que podéis trabajar en
equipo y compartir con todo el mundo, pues, este código QR para que vaya viendo los cambios
sin necesidad de instalarse la aplicación. Lo que sí que necesitáis para instalar es
la aplicación que se llama Expo Go, ¿vale? Es la aplicación de Expo Go, que la tenéis
tanto para Android como para iOS, y ya está. O sea, que la podéis hacer y ya está. Esta
aplicación, esta misma aplicación, es la que se va a instalar automáticamente en
el simulador. ¿Veis que pone Install Expo Go en Emulator Simulator? Esta también se va
a hacer. ¿Hay límite de dispositivos? La verdad es que no tengo ni idea. Yo diría
que no, porque muchas veces lo he probado con muchos usuarios. Bueno, ahora mismo
vosotros, si estáis entrando con el código QR, lo habréis visto. Pero yo creo que no.
Lo que hay que tener en cuenta es que tiene que estar en la misma red. O sea, que tenéis
que estar como en el mismo Wi-Fi, porque no se puede conectar de una y ya está, sino
que realmente tiene que estar en el mismo Wi-Fi. Se pueden hacer cosas para que funcione
realmente. Si no, se puede instalar de otras formas, pero solo que lo sepáis, ¿vale?
Que tened en cuenta que creo que no solo el código QR, el código QR si estás en la
misma red y ya está. Que a lo mejor vosotros lo veis y no podéis funcionar. ¿Se pueden
aplicar transiciones entre páginas? Sí, por supuesto. Vale, pues estas son todas las
cosas buenas e impresionantes, pero claro, lo más interesante, obviamente este proyecto
está muy bien, pero es como que demasiado, ¿no? Es un proyecto que ya empieza de muchas
cosas, que es de router y esto. Entonces, lo que vamos a hacer es crear nuestro propio proyecto.
Vamos a crear un proyecto desde cero. Para eso vamos a utilizar también npx, lo mismo
que antes, create expo app, pero ahora le vamos a dar un nombre, ¿vale? Vamos a darle un
nombre, curso, bueno, ¿cómo le ponemos? Curso React Native Metacritic App. Vamos a hacer
una aplicación de Metacritic, ya que el otro día le robamos el contenido. Ahora, ¿cuál
es la diferencia con lo que he ejecutado antes? Fijaos que ahora voy a poner template blank.
Esto quiere decir que vamos a utilizar una plantilla vacía. ¿Para qué? Pues para que no venga
con toda la información de repente y tal, sino que va a venir con lo mínimo para que
funcione, ¿vale? Entonces, lo ejecutamos. Esto instalará menos dependencias, por supuesto,
por suerte. Voy a cerrar el emulador de Android, que lo tenía por aquí, a ver si lo cierra,
¿vale? Para que no me consuma tantos recursos porque el de Android chupa, vamos, te chupa la
vida entera. Te chupa la vida. Bueno, mientras esto se instala, voy a levantar, vamos a ir a
cursor React Native Metacritic App, ¿vale? Vamos a Code y aquí ya tenemos nuestro proyecto.
Fíjate la diferencia, ¿vale? La diferencia entre el proyecto que habíamos hecho antes
por defecto y este proyecto. Ahora está mucho más vacío, pero fíjate que con lo poco
que tiene va a funcionar perfectamente. Vamos a poder utilizar un montón de cosas y vamos
a poder, pues todo lo que hemos visto de los simuladores, código QR y todo esto, todo
eso lo tiene y funciona sin ningún problema. Bueno, sigue con la instalación. Vale, ahora
sí que está terminando, que ya están todos los warnings, ¿vale? Y lo mismo, Android,
iOS, web. Exactamente lo mismo. Fíjate, las dependencias ahora solo me ha puesto Expo, Expo
Status Bar, React y React Native, ¿vale? Entonces, es un proyecto muy vacío, pero que nos va a
permitir a empezar bien, en condiciones, sin tener que preocuparnos de tantas cosas.
Pero lo bueno, tenemos la última versión de Expo, que es la 51. Cuando tú la instales,
por quien sabe cuál habrá, porque no paran, no paran de instalar nuevas. Y fijaos que
utiliza Babel. Esto es porque internamente Expo está utilizando Babel y no se le puede
hacer nada, ¿vale? No es que se pueda utilizar Bit así como si nada y ya está, pero estoy
seguro que están trabajando en mejorar eso. Así que nada, tened paciencia y ya está.
Venga, vamos a levantar, voy a hacer esto y vamos a estar trabajando siempre con el simulador de
EOS, ¿vale? Para que así pues estemos siempre con un, con el desarrollo de EOS. Vamos a hacer
NPM Run. Fíjate que puedes levantar directamente un dispositivo, pero si tú pones NPM Run Start o
NPM Start, entramos aquí. Si haces NPM Start, fíjate que aquí directamente te da la opción de abrir
cualquiera, que yo lo recomiendo, ¿vale? Vale. Primera cosa que os vais a dar cuenta, la web está
desactivada. Si queréis, ¿por qué? ¿Por qué está desactivada? Igual de ¿por qué no trae TypeScript?
¿Por qué? Porque hemos hecho que sea un proyecto vacío. Si queréis activar, si queréis poner TypeScript y
tal, lo tenéis que hacer y lo tenéis que ir añadiendo. Si ya queréis que lo tenga todo,
haced como lo hemos hecho antes. Yo no lo recomiendo para aprender porque tiene demasiadas
cosas y os vais a agobiar. Yo creo que lo mejor es que empecéis con esto y luego poco a poco
vais añadiendo. En el caso de web, si tenéis clarísimo que queréis también web, que yo creo
que sí que puede ser interesante, para la web, a ver, voy a aquí, para la web lo único que tenéis
que hacer es instalar diferentes dependencias. Así que hacéis npx expo install y le decíais react
DOM, react native web, expo metro runtime, ¿vale? Metro al final es el bundleizador. Con estas tres
dependencias, si se las instaláis, ¿vale? Que no tardará mucho, con esto ya activáis poder también
verlo en la web. Entonces, si hacéis npm start ahora solo instalando las dependencias sin hacer
nada, fijaos que ya está activo y ya le podéis dar y ya os abre el proyecto en la web. Ahora, otra cosa es
que el proyecto es bastante sencillo, pero bueno, al menos para que lo sepáis. Y si no necesitáis la web,
pues nada, os olvidáis de eso y ya está. Vamos a abrirlo, le doy a la i y lo abrimos aquí. Vale, a veces,
fijaos que me pone disconnected from metro, no sé qué, no sé cuánto. Esto muchas veces se puede quedar
un poco pájaro. ¿Veis que ahora sí que lo está haciendo? Si se os queda pájaro que dice me he desconectado
o si no pilla los cambios, aquí, fijaos que aquí en la terminal, aquí, ves que pone pulsa R para
recargar la aplicación. Si tú estás en la terminal y pulsa la R, fíjate, voy a pulsar la R en la
terminal. ¿Veis que se actualiza el simulador? ¿Vale? Los botones que pulsáis aquí en la terminal,
como por ejemplo, pulsa la M para hacer el toggle menu. Pues fíjate, le doy a la M en la terminal y me
aparece aquí el menú. ¿Vale? Entonces, si algún momento no se ven los cambios y se queda como
congelado y tal, darle a la R que es para recargar y ya lo tendréis. No voy a explicar el proyecto
porque es que es muy vacío, pero lo más importante es el punto de entrada a nuestra aplicación. Este
archivo app.js, que como podéis ver aquí, tenemos aquí la... ¿Vale? Fíjate, hacemos un cambio aquí,
cambia automáticamente. Tenemos aquí un status bar que luego os explico, pero lo más interesante es que
en React Native no podéis utilizar DIP, no podéis utilizar P, no podéis utilizar ANCOS. Tenemos
nuestros propios componentes y aquí vemos los dos componentes más básicos e importantes. Tendríamos
la VIEW, que sería la vista, que sería cualquier bloque que queramos que sea como un DIP. ¿Vale? Sería
exactamente lo mismo que un DIP, con la diferencia importantísima que los elementos VIEW en React Native
son Display Flex por defecto. ¿Vale? Entonces, fíjate que aquí utilizan Flex 1, Background Color,
FFF, estos estilos luego los cambiaremos y los explicaremos, pero los elementos de React Native
son Flex por defecto. VIEW es Flex. Piensa que todo está hecho en Flex. Si no sabes Flex, vete a mi curso
de CSS para revisarlo porque lo vas a necesitar seguro. Así que échale un vistazo. Pero bueno, aquí tendríamos el de VIEW.
Piensa que es como si fuese un DIP, porque no podéis utilizar DIPs. Y luego tendríamos
Text. ¿Y por qué necesitamos el componente Text? ¿Por qué no podemos hacer esto? Porque esto
no funciona. Fíjate que dice que las cadenas de texto siempre tienen que estar renderizadas
en un componente Texto. Así que siempre utilizamos el componente Texto para renderizar
Texto. Por poco que sea, vais a ver que siempre, siempre, siempre lo vais a necesitar. Y luego lo tercero
que os va a sorprender de la sintaxis y es el hecho de los estilos. Fijaos que los estilos no tenemos
aquí ni Class Names ni nada. Tenemos unos estilos que serían como un CSS en JS. Creamos la hoja de
estilos con el punto Create. Este Style Sheet lo importamos de React Native, igual que los componentes
VIEW y Text. Y aquí es donde vamos a tener los estilos que nosotros vayamos añadiendo. Por ejemplo,
si aquí vamos a ponerle otro color, ¿vale? Guardamos los cambios y ya lo tenemos ahí
aplicado, sin ningún problema. Lo podemos utilizar también así, lo podéis utilizar como queráis.
También si queréis que no se centre el texto, lo podemos quitar esto, ¿vale? Y ahora aparecería
aquí arriba. Fíjate que aparece aquí arriba. ¿Por qué pasa eso? Bueno, luego
lo iremos viendo. Pero ya veis un poco lo más básico de estilos
y todo esto, ya tendríamos esto. Text y VIEW, ¿vale? VIEW
para el componente React Native más básico para representar un elemento en la pantalla
y para agrupar elementos, para lo que queráis. Y el texto para mostrar texto. Otro más que
es importante, vamos a ver alguno de los componentes más importantes para poder construir nuestra
aplicación. El componente Image. El componente Image, como te puedes imaginar, es para compartir
imágenes. Pero tenemos dos tipos de imágenes, ¿no? Tendríamos imágenes locales que tenemos
en nuestro proyecto. Por ejemplo, aquí en Assets, mira, tenemos este icono. Vamos a intentar
renderizar este icono. Pues podríamos hacer Image y aquí le pondríamos el Source. Ahora,
¿cómo le indicamos que queremos poner la imagen esta? ¿Vale? Vamos a poner por ahora
así. Para indicarle que queremos cargar una imagen local, tenemos que importarla. Y para
importarla lo que vamos a hacer es traer el icon y hacemos un require de Assets.icon.png.
Fíjate que ya detecta aquí, me pone como la imagen. Este icon es lo que le vamos a pasar
como Source. Y luego aquí, una vez que lo ponemos, ya se carga. Obviamente podemos ponerle
estilos para que quede perfectamente. Por ejemplo, ancho de 100, altura de 100. ¿Vale? ¿Qué
es este 100? ¿Cómo? ¿100 qué? ¿100 qué? ¿Manzanas? ¿Periquitos? ¿Pájaros? ¿Qué
es esto de 100? ¿Vale? ¿Por qué se utiliza el require? En realidad, si no me equivoco,
podríais utilizar el import, ¿vale? Podéis utilizar el import sin ningún problema. Pero
muchas veces, no sé por qué, no sé por qué, pero veis que podéis utilizar el import,
no hay ningún problema, ¿vale? Pero no sé por qué cuando lo que quieres no es tanto
importar el elemento, sino que lo que quieres es traerte la URL, aunque sea el local, mucha
gente utiliza el require. Pero podéis utilizar sin ningún problema, podéis utilizar el
icon, el import, perdón. Utilizáis el import y lo hacéis exactamente igual. A mí me gusta
más con el import, pero veréis que muchos, pero muchos ejemplos en Real Native Vital que
siempre lo hacen con el require. Entonces, por no romper un poco la magia, pues lo hago
así. Pero tanto con import como con require lo podéis hacer sin ningún problema y funciona
perfecto. Sobre los valores, ¿qué es esto de 100? 100 son el número de píxeles visuales
teniendo en cuenta la resolución del dispositivo. Por ejemplo, este es el iPhone 15. El iPhone
15, si no me equivoco, la resolución efectiva que tiene en pantalla son 395, ¿vale? De ancho
y unos 850 de alto, ¿vale? ¿Vale? Veis que ahora os rellena todo. Si yo pongo 200, se queda
por la mitad. Si pongo 500, 400, pues se queda también por la mitad. Entonces, estos son el
número de píxeles efectivos en pantalla, ¿vale? Lo digo porque no son los píxeles reales,
porque el iPhone en realidad tiene 2.500 píxeles por 4.000. Lo que pasa es que la densidad de
píxeles, para que se vean tan bien y no veas ahí los pixelatos, los pixelacos, lo que hace
es aumentar la densidad y por cada píxel real en realidad pinta uno, ¿vale? Y así pues se ve
tan bien. Por eso se ven tan bien las pantallas estas, porque tienen una densidad de píxeles
mucho más alta que la resolución efectiva. Pero la resolución efectiva es la importante
que es la que a nosotros nos interesa, ¿vale? 100%. Ahora, ¿cuál es el problema? Que si tú
por lo que sea pones 200%, ya veis que pasan cositas. ¿Qué pasa? O que sale cortado, ¿no?
O que aquí en este caso que sale cortado. Hay diferentes formas de renderizar imágenes.
Además que también tenemos imágenes de fondo que podemos utilizar. Podréis utilizar el
resize mode y podéis tener diferentes formas. Por ejemplo, el center es el que estamos
viendo. Pero podéis poner el contain, ¿vale? Y el contain, fíjate lo que hace. Es que aunque
aquí la resolución de la imagen le dejase más espacio del que necesita, al poner un
contain no se vería mal. Pero también podrías hacer un stretch, que lo que hace entonces
es estirarla para ponerla ahí, ¿vale? Aquí cada uno dependerá un poco de lo que
necesitáis. El repeat no funciona muy aquí porque veis que total, no como no cabe, pues ya
no aparece. Pero si hacéis así y empezáis a hacer cosas, pues sí que veríais que
sí que se empieza a repetir. Lo más interesante siempre que podáis es poner la
resolución correcta, ¿no? Y aquí en lugar de poner un repeat, pues poner siempre el
center y dejarlo centrado. Pero dependerá de lo que queráis hacer con la
imagen. No hay nada perfecto. En la imagen tenemos un montón de props, que esto es lo
bueno. Temas de accesibilidad, temas de bordes, la duración del fade. Esto ahora os explicaré
una cosa bastante importante. Hay un montón de props que os recomiendo que echéis un
vistazo a la documentación porque no la vamos a terminar. Una muy interesante es
el blur radius. Lo que es el blur no se hace con los estilos, sino que sería como
una prop. En este caso, fíjate que el blur sería como para hacer el desenfoque. Cuanto
más alto, pues más desenfoque tendrá y si no, pues no se notará, ¿vale? Ahí podéis ver
cómo va creciendo. Y luego hay algunas props que podéis encontrar aquí. Por ejemplo,
la del fade duration este que podéis ver aquí. Que si nos ponemos encima, fíjate
que te dice platform Android. Y esto es muy, muy importante. Hay algunas props que son
específicas del dispositivo, ¿vale? Que no son universales. Por ejemplo, el fade duration
¿por qué? Porque resulta que en Android por defecto tiene un fade in de las imágenes.
Entonces, el fade duration tú lo puedes personalizar. Para saber cuál es para iOS o para Android,
podéis o ver aquí, cuando hagáis aquí fade duration y os ponéis aquí encima y veréis
platform no sé qué. O lo mejor que podéis hacer, obviamente, en la documentación, que
ahí os va a indicar si funciona para uno o funciona para otro. Aquí, por ejemplo, cap in sets
es solo para iOS. Aquí, mira, lo explico mejor así porque esto a mí me parece, a mí
cuando me di cuenta, esto me cambió la vida. Fijaos, ¿veis aquí que hay un puntito negro
y aquí que hay un puntito verde? No sé si se ve, es muy pequeñito. Pero esto lo que
significa es que esa prop es de iOS y esta fade duration es de Android. Entonces, si alguna
vez veis un puntito aquí, pues veréis que es de iOS y si no, pues es de Android y ya
está. Y aquí lo tenéis mejor indicado si es de Android o es de iOS. ¿Ves? El
resize method, por ejemplo, solo lo tenéis en Android. Por lo tanto, lo que hagáis
aquí, en esta prop, solo funcionará para Android. ¿Vale? Que lo tengáis en cuenta,
bastante importante. Vale, esto está muy bien para las imágenes locales, pero no
siempre tenemos imágenes locales. Por ejemplo, mira, me he encontrado esta imagen
que está muy chula de Zelda Ocarina of Time, si no me equivoco, porque como está en
japonés, está complicado, de Nintendo 64 y digo, ostras, pues lo quiero cargar. Voy a
cargar esta imagen. ¿Vale? En el source no se pone la URL así directamente, sino que
le tenemos que indicar cuál es la URI. ¿Vale? La URI. La ponemos así y parece, parece
que no se muestra. Pero tampoco hay ningún error. ¿Cuál es el problema? El problema es
que las imágenes que son remotas tenéis que informar de la resolución que tiene. O sea,
tenéis que ponerle siempre, de forma obligatoria, un width y una altura. ¿Vale? Entonces, imagina
que le ponemos esta. ¿Vale? Pues ya empieza a aparecer. Le podemos poner la relación
correcta, que sea 294 y ya lo tendríamos. ¿Vale? Ahora sí aparece perfectamente nuestra
imagen. ¿Vale? Por ahora ya tenemos nuestra imagen, ya tenemos alguna cosita. Voy a hacer
un cambio porque me gustaría empezar con el modo oscuro. El fondo este, obviamente, es
un poco feo, es un poco raro. Entonces, me gustaría hacer la página web con un modo
oscuro, que todo fuese oscuro. Pero bueno, ya veo que tengo dos problemas, ¿no? El primer problema
es que el texto ahora no se ve. Este texto no se ve. Podríamos intentar cambiar aquí
el texto, ¿vale? Lo hacemos white, pero ves que sigue sin verse. Porque necesitamos
estilar exactamente este y decirle, no, es que quiero que este color sea blanco. ¿Vale?
Vale, ahora sí tenemos aquí la app. Vale, ya tengo el texto. Pero ¿te has fijado en un
problema? Fíjate en una cosa. Cuando yo paso el fondo a oscuro, ¿ves que hay una cosa
que desaparece? Ahora no puedo ver el reloj. No puedo ver el reloj, no puedo ver la batería,
no puedo ver absolutamente nada. Por suerte, fíjate que en el status bar, este de aquí,
tenemos, ¿ves que pone aquí style? Pues tenemos auto, pero también tenemos la posibilidad
de poner light o dark, ¿vale? Y esto, este componente es un componente especial que no es
de React Native. Y esto es una cosa que tienes que empezar a ir diferenciando. Los componentes
que son de React Native, el view, el text, el image, son componentes de UI directamente
que son de React Native. Pero luego expo, vais a ver que tenemos algunos componentes que
son un poco más especiales, de casos más concretos, que nos dan este tipo de funcionalidad.
Como por ejemplo, este componente status bar, lo que nos va a permitir es cambiar el color
del status bar y viene de expo status bar, ¿vale? No es parte de React Native. Esto pasa,
pues igual que pasa con los frameworks, pues lo mismo, ¿vale? Hay que ir diferenciando
entre componentes que son de la plataforma de React Native y los que son parte del framework.
En este caso, como queremos que sí que se pueda ver el tiempo, le ponemos status bar,
style light y ya está. Lo importante es que esto, cada vez que se renderice, va a pasar
eso. No hace falta que esté en el componente app ni nada, lo podéis mover en diferentes
sitios. Antes de continuar, preguntas, amigos. A ver, desactiva el modo subs para que la gente
pueda preguntar ahí libremente durante un momentito. No debería estar en el layout.
Ahora mismo no tenemos layout, pero luego sí que podríamos hacer un layout y tal.
¿Se subirá a YouTube? Eventualmente se subirá a YouTube. Tengo de RAM 32 GB, cosa que os
recomiendo. Como mínimo 16, como mínimo 16. ¿Puedes decir la diferencia entre React Native
Expo y React Native Klee? Klee ya no es la forma recomendada. Es mucho más que no tiene
tantas utilidades y la única recomendada a día de hoy por React Native es utilizar
Expo como framework y olvidarte de la línea de comandos. ¿Por qué el auto no funcionó?
Porque el auto funciona, en realidad, dependiendo de el modo oscuro o claro del dispositivo.
Entonces, el auto no es que detecta el fondo de la pantalla. El auto es, si tú tienes el
modo oscuro activado, entonces aparece así. Luego ya veremos si funcionará. El Inter lo
vamos a instalar ahora en un momentito, ¿vale? ¿Se puede usar Tailwind? Sí, y luego lo
vamos a hacer en un momento, ¿vale? ¿Se puede usar rietas? ¿Se puede usar rutas? ¿Por
qué no tiene combustible? No entiendo eso. ¿Ya no necesita Android Studio? No necesitas
Android Studio para nada. De hecho, yo lo tengo ahora mismo instalado totalmente. O sea, lo
tengo cerrado. No tengo nada puesto. ¿Veom funciona con Expo? En realidad debería dar
igual. O sea, que me imagino que sí que debe funcionar. Me imagino que Oxlin, Veom y todo
esto lo podríais utilizar. Pero ¿cómo haría con React Native? ¿Aplicaciones de escritorio?
Tendrías que utilizar React Native for Macos y Windows, pero esto sale del curso totalmente.
No nos vamos a poner porque si no añadiría un montón de ruido, ¿vale? ¿Qué extensión
de Visual Studio Code hay que utilizar? Ahora mismo, por todas las que habéis visto, ninguna.
A ver, tendrías que instalar la de React, aunque creo que React no hace falta instalar ninguna
dependencia. O sea, creo que no hay ningún... Sí, sí, creo que no hace falta instalar
ninguna dependencia. Ahora mismo no necesitaréis ninguna extensión. Todo, todo, todo lo podéis
seguir sin ningún tipo de problema, ¿vale? Veremos el despliegue. Si os gusta el curso,
seguiremos, le daremos cañita, ¿vale? Vale. Pues bueno, ya hemos visto, no se veía el texto,
lo hemos arreglado. Perfecto. Ahora voy a ir quitando, por ejemplo, esta imagen, status bar,
lo vamos a dejar. Vale. Vamos a ver dos componentes más bastante importantes de React Native.
Así iremos viendo más y más componentes y poco a poco podremos hacer nuestra aplicación.
Una es el button y otro, bueno, no es un componente como en sí mismo, pero ya veréis
cómo es importante también, porque seguro que lo habéis visto en vuestras aplicaciones.
El tema, el button es un componente de React Native que, por ejemplo, podéis hacer,
pulsa aquí, pulsa aquí, ¿vale? Se puede utilizar para poner un botón. Es el más sencillo,
pero lo más interesante es que este botón se va a ver bien en todos los dispositivos.
O sea, va a ser el botón nativo del dispositivo. O sea, este botón en Android y en iOS se van
a ver diferente. Una cosa que tienes que tener en cuenta. Entonces, veis aquí que pone title,
pulsa aquí y aquí ya tengo el botón que se comporta como de forma nativa.
Si viésemos en Android, se comportaría, se vería el botón más a lo Android, ¿vale?
O sea, que su estilo cambia según la plataforma. Ahora, igual que tenemos en React,
que le podemos poner un onclick y todo esto, aquí podríamos hacer un onpress.
El onpress es al pulsarlo, haz algo. Y lo segundo que te quiero comentar es que fíjate
que tenemos aquí alert. Este alert va a funcionar correctamente y va a mostrar una notificación
a lo nativo de ese sistema operativo. Por ejemplo, si le doy a pulsa aquí, fíjate,
la alerta y pone aquí hola. Tenemos la alerta, hola. Y le ponemos a OK. O sea que este tipo
de alerta la podéis utilizar, así con este alert. No es la forma recomendada.
Más adelante veremos cómo hacer modales en condiciones, pero esto sería lo mínimo.
Ahora, importante. Este botón, que es el más sencillo, no se puede estilar, ¿vale?
No puedes cambiarle los estilos. No puedes poner aquí un style y, por ejemplo,
cambiar todo esto. Fíjate que yo le pongo todos estos estilos y se ve exactamente igual.
¿Por qué? Porque la idea de este botón es que sea el botón nativo,
que tú no lo puedas cambiar. Pero si por lo que sea quieres tener un poquito
de ajuste, lo que sí que puedes hacer es cambiarle el color.
Y le puedes poner que sea el color rojo y esto sí que aparece.
Fíjate que ahora sí que cambia el color. Puedes poner verde, le puedes poner
con hexadecimal también. El color sí que solo puedes cambiar,
pero no puedes cambiar ni tamaño, ni forma, ni nada.
El button es el botón nativo. Entonces, ¿cómo puedes hacer otro tipo
de botones en los que sí que los puedas estilar? ¿Vale?
Y una cosa importante, el button ni siquiera se le puede pasar dentro
un children para el texto. Tienes aquí, pulsa aquí.
Si ya quieres hacer un botón que dentro puedas tener diferentes textos,
que puedas tener una imagen o lo que sea,
entonces necesitas conocer otro componente, que es el touchable highlight.
¿Vale? Touchable highlight.
El touchable highlight lo vamos a poner aquí abajo y aquí este podemos poner
underlight color, vamos a ponerle 09F y ahora te explicaré el underlight color,
aunque lo vas a notar bastante rápido. Vamos a poner un on press, ¿vale?
Y vamos a poner esto. Voy a quitar este botón para que no lo confundas
y voy a quitar este texto, ¿vale? Y la imagen, voy a quitar la imagen también
y así lo veremos más fácilmente.
Vale, este botón es un poco más raro, ¿no? O sea, es como más texto normal.
¿Por qué? Porque este botón sí que lo podéis estilar todo lo que queráis, ¿vale?
Fíjate, puedes hacer que el botón sea así y entonces le puedes cambiar totalmente
el borde radius, también lo puedes hacer así, lo puedes hacer redondo,
podrías centrar el texto, podrías poner lo que tú quieras, ¿ves?
Ahora hemos hecho un botón. ¿Y qué es la diferencia que tiene?
Aparte de que lo puedes estilar y dentro podríamos poner imágenes,
podríamos poner lo que queramos. Además, el comportamiento, cuando haces clic,
fíjate que se ha puesto azul. ¿Por qué se pone azul?
Porque tenemos este Underlight Color, que es el que indica cuál es el color
que va a tener detrás. Entonces, lo que hace es bajarle un poco la opacidad
y se ve el color que hay detrás. Entonces, si quieres tener este tipo de funcionamiento,
puedes utilizar este, personalizarlo, todo lo que quieras y mucho más, ¿vale?
Hay otro más. No solo está el Touchable Highlight, que sería el segundo más utilizado.
También tendríamos Native Feedback, también tendríamos el Opacity,
que también funcionaría muy similar, pero no necesitas el Underlight Color.
El Opacity, ya te puedes imaginar que lo que hace es bajarle la opacidad y ya está.
No hace otra cosa. Pero lo que le da es como un feedback al usuario
de que se está pulsando. Y ya está. Lo tendríamos así y ya está pulsando.
El que no te recomiendo que utilices para nada es uno que es este,
Without Feedback. El Native Feedback, si no me equivoco,
solo se puede utilizar en Android. El Without Feedback es el que no hace
absolutamente nada, pero es una forma no recomendada.
Entonces, esos serían los componentes más típicos para crear tus botones
y todo esto. Pero existe un componente más avanzado,
que hoy no lo vamos a hacer, pero solo para que sepas que existe,
que se llama Pressable. Este es el componente más core a la hora de hacer
algo pulsable, algo que puedas clicar, algo que realmente puedas hacer algo, ¿no?
Lo que diríamos es, el botón es el nativo, el Pressable es el core,
y los Touchable, el Touchable Highlight, el Touchable Opacity,
el Touchable Without Feedback, estos tres a día de hoy ya no son recomendados
ni siquiera porque fíjate que la documentación te dice,
si estás buscando una forma más extensiva y future-proof,
porque la idea es que lo van a deprecar para que se dejen de utilizar
los Touchable y todo esto, la idea es que si necesitas tener un botón
que sea muy personalizado, que creas que sea una redonda,
que se comporte de mil millones de formas diferentes,
lo que vas a tener que utilizar es el Pressable.
Y aquí vas a poder cambiar también cuando lo estás pulsando,
cuando has dejado de pulsarlo, ves que tienes aquí un montón,
pero un montón de aplicaciones, cuando estás pulsando mucho rato,
todo esto lo tienes aquí.
Lo más interesante es que el button, el button que conoces,
en realidad está utilizando algo muy parecido a esto por debajo.
Y aquí tenemos el ejemplo del Pressable, ¿vale?
Es mucho más customizable, mucho más fácil de utilizar,
además puedes hacer que tenga estilos que sean condicionales, ¿vale?
Lo tenemos aquí, me vamos a poner Pressable, Pressable,
y te va a permitir, pues, por ejemplo, en los estilos,
ponerle una función, si está pulsado, background color, tal,
si no, pues mira, lo mismo con el font size,
podemos decirle que si está pulsado, vamos a poner ball,
y si no, normal, pues así todo el rato, ¿vale?
Preset, perdona, aquí lo he puesto con...
Vale, pues fijaos, bueno, el ball no se ve, hay.
Encima he puesto size, vale.
Pues tampoco, ¿no?
No sé si no me...
A ver, voy a poner font size, que lo...
A ver si vemos la diferencia.
32 y 16, ¿vale?
Vamos a ver ahora.
Pues no se ve la diferencia.
Solo que tiene este...
Ah, bueno, porque este método no existe, ¿vale?
Lo voy a quitar para que me deje de dar problemas.
Pero no me...
El font size no me lo está cambiando con el Press,
que debería cambiarlo.
Pero bueno, el color sí que lo cambia.
A lo mejor es que no se puede cambiar el tamaño.
A ver, podría tener sentido, la verdad.
Podría tener sentido, sinceramente.
Pero igualmente, lo que sí que nos permite...
Ah, bueno, claro, es que este...
Claro, como esto es el background color,
yo entiendo que el font size este
en realidad debería ir aquí, en este text, ¿vale?
A lo mejor debería ir en este text.
Claro, tiene sentido.
Por lo mismo que os he dicho antes de los colores, ¿vale?
Pues exactamente lo mismo.
Vamos a poner esto por aquí.
Fijaos que aquí también le llega exactamente
el método Press.
Así que no tenía ningún problema.
Ahora sí, ahora sí.
Pero ya veis que es bastante fácil.
Claro, es que los estilos del texto
tienen que ir en el texto.
Antes lo hemos visto con el color del texto
exactamente igual.
Pero bueno, ya veis que le llega
cuando está pulsado
y así podéis cambiar su comportamiento.
Este es el último componente que se ha hecho,
que es el más core, el más personalizable
y el que te va a permitir hacer realmente
el componente personalizable de botón
que tú quieras.
Los Toch Abolital te lo vas a encontrar
en un montón de cursos, documentación
y todo esto,
pero esta sería la mejor forma día de hoy
si quieres personalizar tu botón, ¿vale?
Muy bien, pues ya hemos visto
todo lo que son de botón.
Ahora, ya vais viendo que es un poco molesto
todo el tema de los estilos.
O sea, estilos de...
Me refiero a estilo de que aquí hay un hueco y tal.
Así que vamos a añadir el linter.
Es muy sencillo añadir el linter.
Podéis utilizar diferentes linters,
no hay ningún tipo de problema
porque al final esto no deja de ser JavaScript
y no hay nada especial.
Pero si yo queréis utilizar el más oficial y esto,
vamos a hacer algo.
Vamos a ir aquí y vamos a instalar Slint,
que es el que más se suele utilizar, ¿vale?
Para ello hacemos npx expo lint.
Esto lo que va a hacer es inicializar
la configuración de lint.
¿Ves?
Me dice, no he encontrado Slint la configuración.
La instalo y tal.
Sí, por favor, instálala.
Esto va a instalar las dependencias que necesita
y además te va a crear el archivo de configuración.
Para que en Visual Studio Code puedas ver los errores
y todo esto, necesita la extensión.
Ahora te explicaré qué dos extensiones vas a necesitar
tanto para Slint como para Prettier, ¿vale?
Que nos va a facilitar un montón la vida
trabajando con React Native
porque si no va a ser un poco rollo.
Ahora lo va a ejecutar
y por suerte pues no tenemos ningún error
y ya está.
Pero si volvemos a nuestro proyecto,
fíjate que ahora tengo este archivo SlintRC,
donde solo lo único que ha hecho es extender Expo.
Tampoco caga nada del otro mundo,
pero algo es algo.
Si intentáis hacer que falle,
la verdad es que no sé.
No sé cómo puedes hacer que falle
porque pone expected
y quizás este.
Ves que pone Slint o unused expressions,
pero es un warning
que tampoco te creas que es muy útil.
Pero bueno, se puede configurar
y podéis poner un montón de más.
O sea, podéis poner reglas
reglas o lo que sea de Slint
que sean de componentes de React
y os van a funcionar sin ningún problema.
Y ahora para Prettier,
npx expo install
y vamos a
de dev, mira,
Prettier, Slint config Prettier
y Slint plugin Prettier.
Estas tres dependencias
utilizando la línea de comandos de Expo,
¿vale?
La instalamos.
Ahora está instalando con NPM.
Y ahí, bueno, mientras se instala,
vamos a configurarlo.
Para configurar Prettier
porque por desgracia
no tiene un comando
que te lo configura automáticamente
que sería increíble,
pero no, no lo hace.
Si no, en la documentación
te lo explican muy bien.
O sea, que lo podéis mirar.
Pero, a ver, ahora.
Por un lado tenemos Expo.
Aquí le ponemos
que extienda de Prettier.
Esto es lo que hemos instalado de aquí, ¿vale?
Por un lado instalamos Prettier,
luego la configuración
y luego el plugin.
Esta configuración
es la que extendemos aquí
para que cargue esta.
En plugins ponemos la de Prettier
y en rules le vamos a decir
que todas las reglas de Prettier
que nos den un error.
Y fijaos que ya,
solo, solo guardando esto,
fijaos que ya se me pone aquí en rojo
y al guardar los cambios,
pum, se me arregla.
Y aquí también.
Todos los errores de Prettier
y al guardar los cambios,
pum, me lo arregla.
Esto me lo está poniendo
en diferentes líneas
porque no cabe en el número máximo,
pero ya me lo está formateando.
Para que se lo formatee,
para ver los errores
y que lo formatee,
en las extensiones
necesitáis,
por un lado,
Slint,
que la tenéis que tener instalada ya
porque se instala siempre,
y luego Prettier,
¿vale?
Que es esta,
Prettier Code Formatter.
Estas dos
son las dos que necesitáis.
Y más allá de eso,
en principio
no deberíais necesitar
hacer nada más,
pero es posible
que necesitéis
la de Save Format,
¿vale?
Hay veces que
hay que poner,
o en Slint,
hay unas que tenéis que poner,
bueno,
aparte que está activado
y asegurarse que esté activado,
asegurarse que
cuando se guardan los ficheros,
entonces que se formatea también,
¿vale?
Este,
Slint,
Code Actions on Save,
le pones aquí el All
y así te lo formatea seguro,
pero ya os digo
que es la predeterminada,
puede ser que lo tengáis desactivado
por beta a saber qué motivo,
pero os debería funcionar.
Así que con esto
ya tendríamos
el tema del linter,
¿vale?
Muy bien,
preguntas
antes de ponernos
con los fetching de datos,
hay que instalar,
Darkula,
no hace falta,
yo uso Native Win,
es que lo vamos a utilizar ahora.
¿Cuál era el comando
para instalar Prettier
que la cámara lo tapó?
Es este de aquí,
npx expo,
este de aquí,
este de aquí,
mira,
lo dejo en el chat,
pero bueno,
ya lo tenéis por ahí
si no puesto,
¿vale?
Muy bien,
pues venga,
vamos a hacer el fetching de datos
porque vamos a mostrar ya datos,
vamos a hacer una lista
y vamos a ver los problemas
que tenemos
al enseñar muchos datos.
entonces he preparado
por aquí,
he preparado
una librería
para no hacerla
porque al final
esto es JavaScript puro y duro
y estoy seguro
que esto
si sabéis JavaScript
ya lo sabríais hacer.
Entonces,
metacritic.js
¿vale?
¿qué es lo que he hecho?
Aquí tengo dos métodos,
uno para recuperar
todos los últimos juegos
y otro para recuperar
los detalles de un juego.
¿y esto qué es lo que hace?
Pues lo que hace
en esta API
lo que estamos haciendo
es scrapear
Metacritic.
Metacritic es una herramienta,
bueno,
es una página web
donde la gente
puede dejar
sus opiniones
sobre juegos,
películas
y todo esto.
Entonces,
los últimos juegos
pues están por aquí,
new releases
o los mejores juegos.
Vamos a mostrar
los mejores juegos,
¿vale?
Y vamos a mostrarlos,
vamos a mostrar la puntuación
y vamos a tener una lista
y la idea
es que al tener el router
podamos darle click
o tapear
en uno de los juegos
y ver los detalles
con todas las críticas
y todo esto.
Aquí tengo la API
y ya esta API,
este método lo que hace
es llamar esta API,
mapear los datos,
recuperar pues la descripción,
el Slack,
la release date,
la imagen,
la crítica,
la puntuación,
el título,
¿ves?
Creo la imagen aquí
y esto lo devuelvo
y ahí tengo toda la información
para poder mostrar
en mi aplicación
lo que sea.
Esto como lo voy a subir
luego a un repositorio
pues ahí lo podrás ver
sin ningún tipo de problema
y ahí le echas el vistazo,
le cambias,
le das tres vueltas,
lo que tú quieras.
Así que en la app
vamos a llamar este método.
Voy a quitar todo esto
y vamos a crear un estado.
Por ahora vamos a utilizar,
no vamos a utilizar
ninguna dependencia
para tratar
lo que sería
hacer fetching de datos.
Un estado,
esto lo que nos va a permitir
es que cuando hagamos la llamada
al principio
no tendremos,
tendremos un array vacío
sin resultados,
pero vamos a crear
un efecto
que esto es un método
que se va a ejecutar
la primera vez
que se renderice
nuestro componente
y ahora la primera vez
que se renderice
nuestro componente
vamos a traer este
getLatestGames
que no sé por qué
no lo trae,
no lo importa
porque no lo encuentra,
así que vamos a traerlo aquí,
getLatestGames,
¿vale?
Cuando tengamos los resultados
porque esto es asíncrono,
obviamente hace un fetching
de datos y tal,
pues imagínate,
hacemos setGames
y guardamos en el estado
estos juegos
y ya está.
Por ahora no estamos
haciendo nada con estos juegos,
simplemente lo guardamos.
Estado inicial,
esto si no sabes React,
te sonará chino,
pero si no sabes React,
vete a mi curso de React
y esta semana te lo estudias.
Un estado al final
lo que te permite
es que es como tener
una variable
que cada vez que cambia de valor
se vuelva a renderizar
el componente
y así reflejar
los cambios que tienes
y un efecto
es algo que cada vez
que cambian
las dependencias
que aparecen aquí
o la primera vez
que se renderiza
nuestro componente
ejecuta esta función.
Como es un array vacío,
esto solo se va a ejecutar
la primera vez
que se renderiza
el componente.
Así,
recuperamos los juegos,
actualizamos el estado
y con este nuevo estado
vamos a renderizar
los juegos,
¿vale?
Entonces,
vamos a renderizar
los juegos
y vamos a quitar
este pressable
y ponemos aquí
games.map.
Esto es exactamente igual
de cómo lo haríamos
en React.
Vamos a tener
un view,
obviamente es obligatorio
ponerla aquí
igual que en React.
Vamos a utilizar
el slack
que sería como la URL
que suele ser única,
por ejemplo,
en Metacritic.
Fijaos que si vamos
a una URL,
el slack,
vamos a,
por ejemplo,
en games
y nos vamos a
Elden Ring.
Este sería el slack.
Esto que veis aquí arriba,
Elden-ring,
ese sería el slack,
¿vale?
Pues eso va a ser único
para cada juego
porque tiene que estar
en la URL.
Vamos a poner aquí
un style,
vamos a poner
styles.card,
luego lo estilamos
y aquí cerramos
el view
y vamos a poner
aquí la imagen.
De nuevo,
ahora,
la imagen que tiene que ser
como es externa,
pues tenemos que asegurarnos
que ponemos
el estilo correcto
de lo que sería
la relación de aspectos
para que no sea la cortada.
Así que me voy a asegurar
que más o menos
sea esta,
¿vale?
Vamos a ponerle
un border radius
de 10.
Esto lo podríamos sacar
mejor,
¿vale?
Pero por ahora
vamos a ponerlo aquí.
Importamos el image
de Real Native,
¿vale?
Vale.
Y ya tenemos ahí
al menos las imágenes.
Como esto no quiero
que esté aquí
constantemente,
vamos a empezar
a mover por aquí
la card,
el image
y estos estilos
los podemos mover aquí.
Para aplicar
los estilos
que estamos creando aquí,
lo único que tenemos
que hacer es
de styles,
decirle,
este style,
me lo sacas
de styles,
punto,
y en este caso,
image,
¿vale?
Y así no los tenéis
que tener en línea.
Es buena idea
no ponerlos en línea,
primero porque
en tema de rendimiento
es mejor sacarlo fuera.
Tampoco es que sea
una mejora de rendimiento
increíble,
o sea,
tampoco es algo
que te tengas que agobiar,
pero bueno,
si lo puedes hacer fuera,
pues mira,
mejor que mejor,
especialmente en esos elementos
que están renderizándose
en un loop,
porque si en cada iteración
del loop
estás creando
un objeto,
pues estás,
al final,
haciendo una creación
en memoria
de un objeto nuevo
y es un poco rollo.
Y aquí,
pues no tiene necesidad,
así que ya lo tendríamos
por aquí,
¿vale?
Esto sea la imagen,
a ver,
vamos a poner
text style,
vamos a poner
que esto sea el title,
me voy a guiar
por autocomplete,
más que nada,
porque tampoco quiero
perder mucho tiempo
en esto,
¿vale?
Ya veis que no se ve nada,
pero lo vamos a arreglar
un momento,
teníamos aquí el title,
voy a dejar
que nos guíe,
¿vale?
Margin button,
y también vamos a tener
que sea
white,
¿vale?
Un poquito así
y un poquito así,
como quiero que quede
un poquito mejor,
vamos a poner esto así,
y este,
vamos a poner
este,
vamos a poner esto
que sea
font vault,
¿vale?
no sé si habrá extra vault,
no,
no extra vault,
¿vale?
Y vamos a poner esto
un poquito más grande,
un poquito más grande,
¿vale?
Y vamos a poner
que la card
tenga
un margin
bottom
de 10,
todos estos
valores,
el de 10,
el del width,
el de height,
border radius y tal,
de nuevo,
todos tienen que ver
con esos píxeles
que se renderizan,
¿vale?
Vale,
ya estamos mostrando
una lista,
pero el problema,
te estarás preguntando,
bueno,
esta lista
tiene buena pinta,
pero tengo un problema
con esta aplicación
y es que
no se puede
scrollear,
no se puede scrollear,
bueno,
hay diferentes problemas,
lo primero es que fíjate
donde aparece esto,
aparece arriba del todo
que esto lo está rompiendo
y eso no tiene sentido
que aparezca tan arriba,
luego,
no puedo scrollear,
no puedo bajar,
no puedo bajar hacia abajo,
no se puede hacer
absolutamente nada,
o sea,
no puedo ver más,
más resultados
y esto lo queremos arreglar,
¿cómo lo podemos arreglar?
Bueno,
pues lo que vamos a hacer,
aparte ya que hemos creado
nuestros primeros estilos,
es conocer otro componente más
de React Native
que se llama
ScrollView,
que como te puedes imaginar
que dice el nombre,
sirve para crear
una vista
pero que sea scrolleable,
porque por defecto
el view
que estamos utilizando
no tiene scroll,
por lo tanto
se queda así,
o sea,
yo intento hacer scroll
y no funciona,
así que tenemos que envolver
todos estos elementos
con el scrollview,
pero
hay otra forma
de hacerlo
que es mejor que esta
y ahora te explicaré
por qué,
¿vale?
ScrollView
y ahora fíjate
que sí que funciona,
sí que puedo hacer scroll,
¿vale?
Puedo ir para arriba,
puedo ir para abajo,
funciona bien
aunque todavía
tenemos algunos problemas,
¿no?
Aquí esto está mal
porque obviamente
está tomando un espacio
que no le toca,
luego hasta aquí abajo
pues bueno,
a ver,
no está mal
pero sí que puedo ver
el contenido,
le falta un poquito
de separación
en algunos sitios,
a ver,
vamos a poner la score
arriba también
para que quede esto
un poquito mejor
y la card
vamos a poner
36
para que tenga
o 48
para que tenga
un poquito más
de separación,
42,
vale,
al menos para que esté
un poquito más separado,
el title
lo pongo aquí
después de la score
y el title
al menos
para que esté
un poquito
margin top,
¿vale?
y este
el margin top
lo vamos a poner
margin top
aquí
vale,
vale,
entonces al menos
ahora se ve
un poquito mejor
pero todavía hay
algún problemita
que tenemos que arreglar,
¿vale?
¿Qué es lo que te digo
de que es un problema
de scroll view?
El scroll view,
aunque es verdad
que le está añadiendo
un scroll,
el problema que tiene
es que
no es de rendimiento
la mejor opción,
para que el scroll view
es buena idea,
el scroll view
es buena idea
para
cajas de texto
muy grandes
que son estáticas,
que no son
elementos dinámicos
o que hay
muchos elementos,
por ejemplo,
si tienes una página
del about
donde es texto
estático
y quieres que tenga
scroll,
el scroll view
te lo soluciona,
en este caso
no lo soluciona
pero no es la mejor
opción porque
hay un montón
de elementos
que podrían ser
dinámicos
en el sentido
que este games
podría ampliarse,
se podría paginar
y estaríamos añadiendo
nuevos elementos
y esto tendría
una carga
porque el scroll view
renderiza
todos los elementos
a la vez
aunque el usuario
los vea
o no los vea
independientemente
de eso
todos los elementos
que está viendo
cuando scrolleo
están todos renderizados
y por lo tanto
están ocupando memoria
y esto es uno
de los problemas
típicos de React Native
que dice
es que va
mi aplicación
muy lenta
bueno
pero a lo mejor
estás utilizando
mal los elementos
y ves que
está utilizando
scroll view
para todo
luego
te explico
cuál es el componente
y cómo utilizarlo
para mejorar esto
pero antes
vamos a intentar
arreglar
este problema
de aquí
porque quiero
que al menos
se vea un poquito
mejor nuestra aplicación
no tiene sentido
que se vea
arriba del todo
esto
para ello
hay un componente
que ya trae
React Native
que se llama
save area view
pero el problema
que tiene este componente
vale
que lo vamos a poner
podemos ponerlo
aquí
vale
esto por aquí
esto por acá
vale
save area view
y fíjate que ahora
de repente
sí que parece
que está bien
¿por qué?
porque ha detectado
por arte de magia
que el status bar
necesita ese espacio
y ahora
fíjate que ahí
ya no está tan arriba
y ahora
podríamos ponerle también
incluso más estilos
¿no?
para que esto tenga
un poquito más de separación
incluso podemos ponerlo
un poco más
¿vale?
y ahora
bueno
igual un poco menos
tampoco hace falta tanta
pero
fíjate que
tanto aquí arriba
como abajo
aquí abajo también
no sé si se ve
porque yo estoy un poco encima
sí, sí que se ve
pero fijaos que aquí abajo
también lo corta
porque tampoco es un área
que se pueda ver fácilmente
entonces
ya con sólo este componente
ya estamos envolviéndolo
y ya detecta
dónde tiene que mostrar
correctamente el contenido
¿vale?
o sea que ya está súper bien
save area view
¿cuál es el problema
del save area view?
pues el problema
el problemón
de este save area view
es que sólo funciona en IOS
no funciona para Android
entonces
ya tenemos un problema
¿no?
porque si sólo funciona
para IOS
bueno
si hacemos la aplicación
sólo para IOS
pues buenísimo
pero en Android
vamos a ver que
en muchos casos
va a estar mal
¿vale?
bueno
pues no pasa nada
está buenísimo
pero sólo para IOS
bueno
no pasa nada
podríamos hacer
y así
te puedo presentar
una forma
de poder acceder
a constantes
de los dispositivos
otra forma
de que
podrías arreglar esto
tanto para Android
como para IOS
sería utilizando
las constantes
de Expo
pero tampoco es la mejor
pero te la voy a explicar
porque es interesante
que la conozca
vamos a instalar aquí
npx expo install
expo constants
y esto
es una dependencia
que tiene Expo
que te permite
acceder
a constantes
de tu aplicación
para tener información
de la versión
de la aplicación
el dispositivo
y un montón
de cosas más
y esto nos puede ayudar
¿por qué?
porque entre
la diferente información
que tienen
las constantes
de Expo constants
vamos a encontrar
una que nos va a ayudar
vamos a quitar
el safe area view
¿vale?
para que veamos otra vez
el problema
volvemos a tener
otra vez el problema
lo quito
porque eso no sirve
para IOS
y yo también quiero
que se vea bien
en Android
y aquí lo que podríamos
hacer en el container
es que tengamos
un padding top
donde las constantes
vayamos al
status bar height
y así
va a dejar
una separación
que nos puede servir
vamos a poner aquí
otra vez
el margin este
para que se separe
vale
lo que pasa es que este margin
vamos a poner
el padding
padding
¿vale?
y ya está
entonces fíjate
que ahora
aquí arriba
ha dejado bien
la separación
porque este status bar height
va a ser diferente
tanto en IOS
como en Android
y esto sí que
va a tener en cuenta
que si es en Android
va a dejar bien
la separación
esto puede tener sentido
a veces
pero a veces
a lo mejor no
es lo que quiere
exactamente
y el problema
es que fíjate
que hemos perdido
la mejora
abajo
porque el safer view
abajo
sí que estaba haciendo
estaba controlando
que se viese
un área
porque aquí
este área
puede quedar bien
o sea a mí no me desagrada
que se vea así
pero es verdad que fíjate
que se ve con esa raya
tan al lado
que puede ser un poco raro
y que puede ser un poco molesto
y todo esto
pero esto podría ser una
bueno
hay todavía una mejor opción
esta sería otra opción
en el caso que necesites
tener diferente información
de las constantes
hay un montón
no te imaginas
tienes las fuentes
del sistema
la versión del sistema
si es Headless
si está
la versión de Expo
que se está utilizando
puedes acceder
a la configuración de Expo
tienes el nombre
del dispositivo
o sea que ya ves
que con estas constantes
puedes acceder
a un montón de información
pero hay una tercera
que es la que se suele utilizar
en los desarrollos
de React Native
que te puede ayudar
un montón
porque así te olvidas
totalmente
y además
es tanto por arriba
como por abajo
para todos los dispositivos
es un poquito más compleja
pero yo creo que vale la pena
especialmente
para olvidarte de esto
totalmente
y es
React Native
Save Area Context
instalando esta
vamos a tener que hacer
un paso más
pero bueno
no va a ser muy complicado
lo primero
es que necesitaríamos
envolver
toda nuestra aplicación
con un provider
así que vamos a hacer
un componente aquí
components
y vamos a crear aquí
un main.jsx
y toda esta app
vamos a sacarla aquí
a este main
¿vale?
vamos a cambiarle aquí
el export
a function main
¿vale?
este también
tenemos que cambiarlo esto
esta constante
ya no la necesitamos
y este status bar
en realidad
lo vamos a dejar aquí
todo esto
lo vamos a quitar
vamos a quitar
todo esto
este status bar
lo vamos a dejar aquí
todo esto
lo vamos a quitar
ponemos aquí el main
y bueno mira
incluso podríamos
podríamos quitar
este container
podríamos dejar aquí
un fragment
¿vale?
quitamos aquí
el status bar este
este container
lo tenemos por aquí
y todo esto
todos estos estilos
los podemos quitar
¿vale?
y así
simplificamos
el punto de entrada
de nuestra aplicación
y lo dejamos
tal que así
quitamos esto
y quitamos esto
y esto nos sirve
para que aquí
podamos poner
todo lo que son providers
y lo usemos más
como un layout
con componentes
y así separamos
un poquito esto
y nos quedará
un poquito más claro
ahora que ya tenemos
esto un poquito más limpio
lo que vamos a hacer
es utilizar
este nuevo componente
que he instalado
para instalarlo
para utilizarlo
utilizamos el
save area provider
que va a ser
el que tiene que envolver
nuestra aplicación
¿vale?
es como un provider
como un contexto
si en React lo sabes
pues esto lo que hace
al final es inyectar
información que puedes
acceder desde cualquier
parte de tu
de tu aplicación
y ahora que tenemos
este provider
en cualquier componente
puedes utilizar
el componente
o un hook
que te va a dar
la información
sobre
sobre estos espacios
usamos el
use save
area
insets
y esto
lo importamos aquí
insets
insets
vale
tienes diferentes
formas de hacer esto
también tienen
un componente
puedes utilizar
el componente
puedes utilizarlo
de diferentes formas
yo creo que con el hook
puede ser suficiente
y ahora aquí
pues podríamos tener
un view
un view
y aquí
pues ponerle
que el style
mira
el padding bottom
lo vamos a quitar esto
eso es súper interesante
el hecho de poder utilizar
un array
ahora lo comentaremos
vale
esto por aquí
esto por acá
vamos a quitar esto
vale
y este container
que no lo usamos
ya lo quitamos
¿qué es lo que está haciendo esto?
fíjate que aquí estoy utilizando
el padding top
de insets top
insets bottom
lo que está haciendo esto
es que se supone
que te está dando
los espacios
o las separaciones
que tienes que dejar
tanto arriba
como abajo
para tener el área
digamos
segura
para mostrar contenido
¿no?
entonces
fíjate que aquí arriba
pues tenemos
ahora no pasa
por debajo
¿vale?
que aquí
se pueden hacer
diferentes cosas
esto es solo
para que sepas
cómo hacerlo
pero piensa que
una cosa que también
puedes hacer
sería poder hacer
un fade in
en el que
conforme se va
acercando al fondo
se vaya diluyendo
y nunca se quede
por detrás
pero sí que haga
como un efecto
opacidad
que pueda quedar
bastante bonito
y lo mismo
por abajo
¿no?
porque aquí
por ejemplo
a mí el bottom
fíjate que el bottom
me parece un poco
exagerado
porque lo corta
como demasiado arriba
pero bueno
entiendo que a lo mejor
es como que ellos
consideran que es
esa área segura
o lo que sea
sino también lo puedes quitar
o sea no es obligatorio
que pongas el
padding button
fíjate lo puedes quitar
sin ningún problema
o puedes poner el que tú quieras
pero esto
te va a funcionar
tanto para Android
como para iOS
y lo tienes más a nivel
no tanto de una constante
que tienes que poner
los estilos
sino que tendrías esto
a nivel de componente
o un custom hook
y esto lo puedes acceder
desde cualquier sitio
¿vale?
esta sería la tercera forma
y una de las que
normalmente
más se utilizan
¿vale?
el bottom
en el top
te salen tan exagerados
por el padding
en el container
ah puede ser
ah es que aquí tengo
claro puede ser
puede ser
puede ser que sea por esto
puede ser
porque aquí lo que quería hacer
tienes razón
tienes razón
puede ser que sea
que yo quería hacer esto
y al final
he puesto esto
vale
ya está
gracias al que me ha dicho
se me había olvidado
que había puesto esto
por eso era tan exagerado
sobre todo el de abajo
porque el de arriba
no me parecía tanto
pero el de abajo
ahora tiene bastante más sentido
gracias
gracias
gracias
gracias
gracias
gracias
gracias
¿vale?
pues ahí tenéis los insets
también tenéis para la derecha
y para la izquierda
que aunque no los ponga
porque no me parecen tan necesarios
pero también para la derecha
y la izquierda
también tenéis insets
para que lo sepáis
¿vale?
se puede hacer también
sin utilizar un hook
como os he dicho
también hay un componente
lo que pasa es que a mí
el componente
no me gusta tanto
¿ves?
está este
no
este es el del context
hay un componente
este
savefara view
pero no me gusta tanto
porque utiliza render props
pero se puede utilizar también
el componente
para que lo podáis utilizar
sin ningún problema
¿vale?
bueno
pues ya tenemos ahí
todo el tema del savefaria
¿vale?
perfecto
aprovechando que os quiero contar
la forma correcta
de hacer la lista
voy a extraer
el componente
del game card
todo este componente
este componente
voy a extraerlo aquí
en un game card
¿vale?
return
¿vale?
sacamos esto por aquí
esto por acá
me voy a traer los estilos
y así
ya simplificamos también esto
que también tiene sentido
que no tenga tanto
y así
reutilizaremos este componente
y además
luego lo animaremos
que va a quedar
va a quedar re chulón
mira
hacemos import view
style sheet
text image
de react native
y ahora
todo esto
todo este card
image score
todo esto lo podemos quitar
porque ya no lo necesitamos
¿vale?
y todo esto
vamos a utilizar
game card
con la key
del game slack
game
y ya está
y funciona todo perfectamente
ya lo hemos extraído
y ya está
vale
ahora que ya lo tenemos extraído
una cosa que es un poco rara
es que da un salto
fíjate que cuando
refresca
aparece la página negra
y luego aparece esto
es una tontería
pero que sepas
que tiene también
react native
una forma de
de añadir
un indicador de carga
es un indicador
bastante sencillo
pero que te puede salvar
la vida
para algunas cositas
por ejemplo
aquí podríamos decirle
oye
quiero que si la longitud
sea cero
podríamos tener más estados
para detectar
si está haciendo loading
y todo esto
¿vale?
pero lo que hay que hacer
es algo sencillo
para que al menos
pueda ver el componente
vamos a hacer
activity indicator
¿vale?
y si no
pues entonces
vamos a tener
esta cosa de aquí
¿vale?
games.length
tal
vale
bueno verás
que aparece
aquí arriba
que no tiene mucho sentido
el scroll view
podríamos poner aquí
una vista
¿vale?
para centrar todo esto
¿vale?
esto por aquí
esto
lo cerramos aquí
y así
lo centramos
y a ver
¡ah!
me ha dejado fatal
este scroll view
bueno es que el scroll view
ahora que estoy viendo
el scroll view
voy a hacer algo
voy a quitar esto
y el scroll view
realmente solo lo vamos
a renderizar aquí
¿vale?
que creo que tiene más sentido
en lugar de tener que ponerlo
en todos sitios
¿vale?
esto por aquí
esto por acá
ahora
renderizaremos esto
correctamente
¿vale?
y fíjate que ahora
sí que queda
ahí en medio
¿vale?
y el scroll view
es que no tiene sentido
que lo pongamos
para el otro
porque no se tiene que scrollear
entonces
es una tontería
le puedes cambiar el color
por ejemplo
puedes poner el color
que tú quieras
si quieres que quede
un poquito como más
más blanco
pues lo puedes hacer
puedes hacer
cambiarle también el tamaño
¿vale?
eso también lo tienes
el size
lo puedes hacer
tan grande como
tan grande como quieras
¿no?
porque ya bien por defecto
¿vale?
pero bueno
al menos
para tener un indicador de carga
muy sencillo
y además lo puedes poner
a nivel de componente
que no hace falta
que lo pongas a nivel de página
puedes hacerlo en un componente pequeño
lo mejor sería un playholder
pero al menos
para que conozcas
que este componente también existe
está muy bien
ahora
esta lista está mal
está mal
porque utilizamos el scroll view
y hemos dicho
que el scroll view
no es la forma correcta
de hacer esto
hay que utilizar otro componente
que es
un componente de alto rendimiento
para renderizar justamente
listas básicas
y no tan básicas
y que tiene un montón
de características
súper útiles
como que
bueno
es multiplataforma
tiene modo horizontal
es opcional
pero es horizontal
puedes configurar
un montón de callbacks
soporta pie de página
encabezados
separadores
tienes pull to refresh
también si quieres
carga los elementos
al desplazarse
en lugar de renderizarlos
todos de golpe
mientras te desplaza
los va renderizando
lo que hace que sea
de rendimiento mucho
pero que mucho mejor
normalmente
es el componente
que quieres
cuando tienes que renderizar
elementos dinámicos
y se llama
flat list
¿vale?
este es el componente
vamos a utilizarlo
y vas a ver
que es un poquito especial
no es que sea muy difícil
pero hay unas cuantas cosas
que hay que tener en cuenta
entonces vamos a importarlo
de react native
es un componente
de react native
y lo vamos a cambiar
por este scroll view
pero si lo utilizamos
pum
se rompe
¿por qué se rompe?
porque flat list
no recibe
un children
el contenido que envuelve
no es el que necesita
funciona diferente
primero tenemos que pasar
los datos
le vamos a pasar los datos
que es games
y luego vamos a decirle
como tiene que extraer
la key
de cada uno de ellos
por defecto
va a intentar utilizar
el punto id
si no me equivoco
luego el punto key
lo explicarán por aquí
ah este es el safe area
flat list
react native
no me acuerdo
cuál es el primero
pero por defecto
va a intentar
utilizar el punto
no el punto key
primero intenta
el punto key
luego el punto id
y si no
luego utiliza el índice
como nosotros
no tenemos ni key
ni id
vamos a decirle
como tiene que extraerlo
le vamos a decir
oye del juego
tienes que extraerlo
del slack
esa es la key
que quiero que utilices
para cada elemento
y luego le vamos a indicar
como tiene que renderizar
cada elemento
esto es justo
lo que estamos haciendo aquí
vale
justo esto
esto de aquí
es lo que queremos
hacer en render item
así que ya no necesitamos
utilizar esto
y aquí
vamos a ponerle
que renderice
para cada uno
el componente
y con esto
ahora
fíjate
que ya funciona
parece igual
pero
incluso
se nota
se nota
un poco
el rendimiento
en el simulador
sé que a lo mejor
no notas en tu casa
pero
el tema
es que la diferencia
aunque resulte
que sea exactamente
lo mismo
no es lo mismo
porque lo que está pasando
es que estos elementos
se están renderizando
solo cuando están
en el viewport
es como una lista virtual
que solo renderiza
lo que necesita
así que va a ser
muchísimo más óptimo
que cualquier otra cosa
que utilicéis
vale
entonces
más cosas
porque me gustaría
ya que estoy
me gustaría por aquí
renderizar este logo
quiero renderizar arriba
el logo de metacritic
porque me han pedido
que haga la página
de metacritic
pues bueno
eso estoy haciendo
y quiero renderizar
este logo de aquí
claro
que pasa
que esto es un svg
y me gustaría renderizarlo
no sé dónde me gustaría
renderizarlo
aquí tenemos
el activity indicator
aquí en la app
a lo mejor
a lo mejor aquí
no sé
no sé si aquí
bueno me gustaría renderizarlo
aquí
pero esto es un svg
esto no funciona
vale
no puedes meter un svg ahí
y tampoco lo puedes cargar
con el image
no funcionan los svgs
con el image
pero por suerte
hay una forma
de hacer que esto funcione
para hacer que funcione
lo que vamos a necesitar
primero es utilizar
una dependencia más
npx expo install
react native
svg
este componente
te va a permitir
utilizar svgs
muy sencillamente
muy sencillo
de forma muy sencilla
muy fácil
porque va a crear
unos componentes svg
path
y otros elementos svg
y vas a poder transformar
cualquier svg
a un componente
de react native
así que aquí
vamos a crear
nuestro logo
.jsx
pero claro
¿cómo lo voy a convertir?
¿cómo lo transformo?
pues para eso
hay una página
que la hemos utilizado
un montón de veces
pero no para esto
esta página svgr
sirve para optimizar svgs
para convertirlos
en componentes de react
para un montón de cosas
pero también sirve
para convertirlos
en componentes
de react native
y fíjate
al pegar un svg
¿vale?
fíjate que aquí
me está utilizando
el react native svg
este
que es el que estoy diciendo yo
y ha pasado
el svg
el path
y todo esto
a como si fuesen
componentes
esto es justamente
lo que necesitamos
así que aquí
ahora lo pasamos aquí
vamos a quitar esto
vamos a cambiarle
el nombre
export const
vamos a poner aquí logo
y ya lo tendríamos
¿vale?
aquí tenemos el logo
y ahora este logo
sí que lo podríamos utilizar
aquí
y al renderizarlo
fíjate
que bueno
me lo está poniendo fuera
porque yo también
como el scroll
está
el container
el padding y tal
claro
lo hemos puesto por aquí
igual lo tenemos que poner aquí
logo
claro
igualmente
vale
me faltaría poner
un poco de separación
view
view
vamos a poner el estilo
aquí un poco de margin
bottom
20
al menos un poquito de separación
y ya está
¿vale?
y ya tendríamos
ahí nuestro loguito
funcionando
de svg
sin ningún tipo de problema
si tienes que cargar
de svg
esta es la forma correcta
y si no
si son por iconos
¿vale?
si lo que quieres son iconos
de svg
hay un montón de colecciones
de bibliotecas
que esto lo tienen
totalmente solucionado
y que te recomiendo
que le eches un vistazo
para que tú
no pierdas el tiempo
y ahora
vamos a animar
porque
a ver
está bien
ya estamos viendo
al menos los elementos
y ya haremos enrutado
mañana en la clase
pero una cosa
que yo he hecho en falta
y que me gustaría
es el hecho de que
se animasen
cada uno de los elementos
conforme llegan
o sea
cuando se carga
en lugar de aparecer
todos de golpe
me gustaría que fuese
uno a uno
apareciendo
pues vamos a crear
de forma muy fácil
porque React Native
tiene un componente
también para animar
elementos
entonces aquí
igual que tenemos
el game card
vamos a crear uno
que sea
export function
animated game card
donde le vamos a pasar
el game
y el índice
¿por qué?
porque quiero que se animen
como primero
el de arriba
luego el de abajo
luego el otro
luego el otro
¿vale?
y quiero que lo hagan
poco a poco
no quiero que se animen
todos de golpe
que también lo podríamos hacer
vamos a tener la opacidad
y la opacidad
vamos a guardarlo
en una referencia
y vamos a crear aquí
con animated
que esto es
de React Native
¿vale?
este animated
es una clase
que es la que nos va a permitir
hacer el timing
recuperar valores
poder animar
cualquier
cualquier componente
ahora lo veremos
es una clase
y a la vez
es
tiene como componentes
para poder animar cosas
entonces
primero
new animated
punto value
cero
y esto
vamos a recuperar
el valor actual
y ahora
vamos a tener un efecto
que solo se va a renderizar
la primera vez
vamos a poner aquí
use effect
solo se renderiza
la primera vez
y hacemos
animated
punto timing
esto lo que le vamos a decir
es como tiene que ser
la animación
quiero que
me
me cambies
el valor
de la opacidad
¿vale?
al valor de 1
vamos a empezar
de 0
hasta el 1
durante
500 milisegundos
con
un retardo
según el índice
vamos a poner
500 milisegundos
aunque igual es mucho
o sea
esto lo que estamos diciendo
es cuánto tiempo
tiene que tardar
la animación
en empezar
y vamos a decirle
que utilice
el driver
nativo
¿vale?
por un tema
de rendimiento
esto al final
si queréis
lo podéis desactivar
para ver cómo funciona
pero recomiendo
el use native driver
por temas de rendimiento
¿vale?
otra cosa es que
hay veces
que por lo que sea
el native driver
os da algún problema
y la animación
no se ve del todo bien
bueno pues probáis
a desactivarlo
a ver si es ese problema
y ya está
y le decimos aquí
que lo empezamos
esto es para
inicializar aquí
la animación
nada más entrar
ahora nos dice
que nos falta
la dependencia
de opacidad
y de índice
son dos valores
que no deberían
cambiar dentro
del componente
pero cada vez
que cambien
estas dependencias
volverá
a ejecutarse
este efecto
¿vale?
ahora que ya tenemos esto
le tenemos que decir
que es lo que tiene
que renderizar
lo que quiero que renderice
es una vista
animada
¿vale?
fíjate que ponemos
animated.view
donde tiene
este estilo
de la opacidad
¿vale?
y dentro
vamos a
simplemente
poner el game
exactamente
el mismo elemento
que teníamos aquí
solo que ahora
envuelto
con toda esta
animación
que queremos hacer
así que ahora
en este main
que estamos renderizando
el game card
en lugar del game card
vamos a renderizar
el animated game card
¿vale?
vamos a guardar
los cambios
y fíjate
que
lo está haciendo
todo de golpe
pero ahora verás
por qué
mira lo voy a renderizar
otra vez
vale
fíjate que hace
el fading
de todo de golpe
lo cual
no está mal
pero no es justamente
lo que queremos
lo que queremos
es que lo haga
uno a uno
¿por qué no lo hace
uno a uno?
porque el
animated game card
también deberíamos
pasarle
el índice
¿ves?
este índice
es el que necesitamos
para que haga el delay
si no
el índice
va a ser undefined
por 500
será none
y si es none
no va a hacer
delay nada
entonces
aquí le tenemos
que pasar el índice
esto lo recuperamos
en render item
recuperamos el índice
aquí
le pasamos aquí
el índice
¿vale?
y ahora sí
deberíamos ver
si lo volvemos
a renderizar
¿vale?
que el primero sale
luego el otro
luego el otro
luego van apareciendo
claro
van apareciendo
conforme se van renderizando
porque como veis
aquí
¿por qué aparece
aquí como vacío?
esto aparece vacío
porque se renderizan
después
porque esto no está
renderizado desde el principio
por eso así
se puede ver
este efecto
de que se van renderizando
conforme van apareciendo
¿vale?
pero lo interesante
lo podemos hacer más rápido
lo he hecho
como muy lento
para que se vea
el efecto así
pero a lo mejor
la idea es que no sea tan
solo quería que
vieseis como sería
un poquito este efecto
podéis jugar con la animación
para que sean diferentes
pero lo interesante
es que ahora
conforme se vayan
renderizando
¿vale?
claro
si voy muy abajo
pues empieza a renderizarlos
todos de golpe
¿vale?
pero ya veis que
que se van renderizando
conforme se van
van apareciendo
hace la animación
y ya está
y esto lo hemos hecho
con muy pocas líneas de código
con el animated
que le hemos dicho
oye
esta es la opacidad
quiero que lo lleves a uno
esta es la duración
con este retardo
y lo único que hemos hecho
es envolver
el game card
que era el mismo elemento
que teníamos antes
y ya está
mañana
vamos a añadir
native win
para tener tail win
veremos el enrutado
también
empezaremos a poder
hacer click
a nuestras
a cada uno
de los elementos
para ir a la otra página
y vamos a ver
más elementos
y componentes
de react native
y de expo
¿vale?
tú dijiste
las animaciones
no deben durar
más de 500 milisegundos
en este caso
lo he hecho
para que las veáis
o sea
lo acabo de explicar
que he dicho
que los valores
que he puesto
son solo para que los veáis
que los he puesto
un poco exagerados
obviamente
no pondría
una animación
de un segundo
porque se ve muy bestia
pero quiero que lo veáis
bestia para que lo notéis
¿no?
porque si yo pongo
una animación ahí
que entre el retardo
del streaming
que no se ve muy bien
y tal
lo único que quiero
es que lo veáis
y ya está
si ya me están reclamando
tú dijiste
que no sé qué
no sé cuánto
sí, sí
lo sé
por eso lo acabo de decir
hay gente
que no debería
ver estos vídeos
si os perdéis
dedicaros a otras
bueno
a ver
si os perdéis
no pasa nada
si os habéis perdido
porque no sabéis React
tenemos un curso de React
midu.link
barra React
lo tenéis
si os habéis perdido
por un tema de CSS
también tenemos un curso
de CSS
mira
midu.link
barra CSS
barra React
y aquí tenéis uno de React
claro
si no sabéis React
hay cosas que os puede costar
un poco
pero yo creo que
más o menos
lo que hemos hecho hoy
no va a ser
no es muy difícil
de conceptualmente
ir pillando
¿vale?
interesantísimo
mil gracias por el curso
nada
un placer
es gratis
el curso de React
es totalmente gratis
¿y los test cómo serían?
pues serían como igual
que los de React
mañana no
pero igual más adelante
lo podemos mirar
de hecho mañana
mañana también veremos
formularios
mañana vamos a ver
un buscador
vamos a ver
el buscador
el enrutador
vamos a ver
el text input
que es que nos faltan
es que al final
son muchos
muchos componentes
y la idea es
que podamos ir haciendo
el componente
o sea la aplicación
e ir añadiendolo
poco a poco
entonces vamos a
añadirle un buscador
para que podáis
buscar los juegos
que queráis
que tenga un autocomplete
y que además
al darle un clic
a cada uno de los juegos
pues vaya a la otra página
a la otra página
veáis las reseñas
y todo esto
y así pues veamos
el enrutado
si explicaré el EAS
el Expo Application Service
me gustaría
si veo que hay mucho interés
igual lo hacemos
eso es básicamente
toda la parte de la nube
de integrar servicios
de la nube
cómo hacer el despliegue
cómo firmar
incluso aplicaciones
de Android e iOS
puede ser que sea una cosa
que sí que veamos
estaría interesante
empezar a hacer fetch
para ver cómo tener
datos de API
lo hemos hecho ya
hoy lo hemos hecho
hoy hemos hecho un fetch
lo hemos hecho en el main
aquí
aquí hemos hecho
a ver
es que esto no deja de ser un fetch
aquí tenéis todo el código
que no he querido hacerlo
desde cero
para no perder tiempo
y enfocarme más en Real Native
pero bueno
hemos hecho un fetch
directamente
cómo
hablaros de cómo estar
en librerías de terceros
en Expo
con las cuales se requiere
configurar la carpeta Android
voy a intentar evitarlo
porque no quiero llegar
a ese nivel de detalle
especialmente de Android y tal
y voy a intentar utilizar
componentes
que están bien testeados
y que requieren
lo mínimo posible
entonces
voy a intentar evitarlo
la verdad
la verdad
que no importa
entonces
digamos
la verdad
y
la verdad