1 00:00:02,410 --> 00:00:05,440 Entonces, ¿cuáles son nuestras alternativas al flujo de trabajo administrado? 2 00:00:05,440 --> 00:00:08,450 Una alternativa es usar la CLI React Native, puede aprender 3 00:00:08,470 --> 00:00:10,950 sobre esto en la página oficial React Native 4 00:00:10,960 --> 00:00:15,430 si lo visita, simplemente puede buscar en Google React Native para encontrarlo y allí, 5 00:00:15,880 --> 00:00:22,120 si hace clic en Comenzar, en realidad lo reciben con dos formas diferentes de comenzar y las formas preseleccionadas de usar 6 00:00:22,130 --> 00:00:23,080 Expo CLI, 7 00:00:23,080 --> 00:00:24,960 es el enfoque que usamos, ¿verdad? 8 00:00:24,970 --> 00:00:30,220 Entonces, no hay nada demasiado elegante en esto, esto te da una aplicación React Native usando expo, es lo 9 00:00:30,220 --> 00:00:31,720 que usamos en este curso. 10 00:00:31,750 --> 00:00:35,410 Sin embargo, también puede hacer clic en el 11 00:00:35,410 --> 00:00:41,170 inicio rápido de React Native CLI y ahora aquí primero debe configurar su sistema 12 00:00:41,170 --> 00:00:47,530 de cierta manera y luego puede instalar un paquete separado, la React Native CLI que ahora 13 00:00:47,530 --> 00:00:55,060 necesita para crear un proyecto y ejecutarlo y así sucesivamente. Ahora importante, aquí encontrará las instrucciones detalladas de instalación para los diferentes sistemas 14 00:00:55,300 --> 00:00:57,070 operativos y aplicaciones que desea crear. 15 00:00:57,100 --> 00:01:02,680 Ahora tenga en cuenta que en Windows, como dice aquí, no puede crear aplicaciones de iOS, lo mismo en Linux, 16 00:01:02,680 --> 00:01:07,870 solo puede crear aplicaciones de Android allí y encontrará instrucciones de instalación si selecciona las opciones específicas. 17 00:01:08,590 --> 00:01:09,730 En macOS, puede 18 00:01:09,760 --> 00:01:14,170 compilar iOS y Android y también deberá seguir estas instrucciones de instalación. 19 00:01:14,170 --> 00:01:19,030 Ahora no haré esto en detalle aquí porque los encontrará todos escritos aquí, por supuesto, si 20 00:01:19,030 --> 00:01:20,110 desea seguirlos, al 21 00:01:20,110 --> 00:01:25,960 final necesitará instalar un par de paquetes, no paquetes npm sino paquetes de todo el sistema y el El proceso 22 00:01:25,960 --> 00:01:30,490 exacto de instalación difiere con respecto a la plataforma en la que se está ejecutando. 23 00:01:30,580 --> 00:01:36,670 Necesitará instalar Android Studio o Xcode, por lo que Xcode para aplicaciones iOS, Android Studio para aplicaciones Android 24 00:01:36,670 --> 00:01:39,130 y necesita instalar eso ahora, anteriormente era 25 00:01:39,160 --> 00:01:40,610 opcional, solo lo 26 00:01:40,630 --> 00:01:42,840 hice para obtener un simulador, ahora 27 00:01:42,850 --> 00:01:47,020 lo necesita porque ahora estos Se utilizarán herramientas para construir su aplicación. 28 00:01:47,080 --> 00:01:52,750 Anteriormente, eso no era necesario porque el envoltorio de la exposición básicamente básicamente leía nuestro código y lo alojaba, 29 00:01:52,750 --> 00:01:56,780 y también puede crear una aplicación independiente con expo en el flujo de 30 00:01:56,810 --> 00:01:59,030 trabajo administrado, eso sucederá en la nube. 31 00:01:59,320 --> 00:02:04,780 Ahora que todo sucede localmente, deberá instalar Android Studio, etc., e instalarlo con 32 00:02:04,780 --> 00:02:07,540 todas las opciones que encuentre aquí. 33 00:02:07,550 --> 00:02:14,130 Ahora tampoco importa para qué plataforma esté trabajando, también necesita instalar React Native CLI, puede hacerlo en su símbolo 34 00:02:14,140 --> 00:02:22,420 del sistema o terminal normal, en Mac o Linux puede necesitar agregar sudo delante de esto para obtenga los permisos correctos y esto 35 00:02:22,420 --> 00:02:27,670 ahora instalará globalmente la React Native CLI, para eso también necesita NodeJS instalado porque 36 00:02:27,670 --> 00:02:32,860 esto usa npm, que es el administrador de paquetes del nodo, así que asegúrese 37 00:02:32,860 --> 00:02:34,450 de tener eso también. 38 00:02:35,540 --> 00:02:38,330 Ahora con la React Native CLI 39 00:02:38,330 --> 00:02:44,990 instalada, podemos comenzar a crear un proyecto totalmente sin exposición y para eso crearé un 40 00:02:44,990 --> 00:02:49,110 nuevo proyecto y seleccioné una carpeta para eso ejecutando 41 00:02:49,130 --> 00:02:53,120 react-native init y ahora cualquier nombre de su elección, 42 00:02:56,120 --> 00:02:59,950 para ejemplo RNWithoutExpo. Para el nombre, es importante que 43 00:02:59,990 --> 00:03:03,380 esté escrito así, sin guiones ni guiones bajos, sino solo una palabra. 44 00:03:03,890 --> 00:03:08,780 Entonces, RNWithoutExpo es el nombre que elegiré y esto creará un nuevo proyecto React Native 45 00:03:08,810 --> 00:03:14,450 utilizando la CLI React Native en este lugar donde ejecutó este comando y le dará esta nueva carpeta 46 00:03:14,450 --> 00:03:16,870 que contiene este nuevo proyecto React Native. 47 00:03:16,970 --> 00:03:18,260 Ahora importante otra 48 00:03:18,260 --> 00:03:24,800 vez, ahora necesita tener Android Studio y Xcode instalados y configurados como se menciona en los documentos 49 00:03:24,800 --> 00:03:25,690 oficiales 50 00:03:25,700 --> 00:03:28,520 aquí, de lo contrario, lo que voy 51 00:03:28,520 --> 00:03:34,100 a mostrar ahora no funcionará, necesita instalarlo porque ahora estas herramientas serán aprovechadas por la 52 00:03:34,100 --> 00:03:40,820 React Native CLI para compilar y ejecutar su aplicación. También active algunos emuladores o simuladores, pueden ser los mismos que se 53 00:03:40,820 --> 00:03:46,060 usaron antes en el curso, pero debe tenerlos en ejecución para que podamos ver nuestra aplicación React Native en ejecución allí. 54 00:03:46,560 --> 00:03:52,830 Así que ahora esperemos a que esta configuración termine aquí y una vez que esto esté hecho y este proceso pueda llevar 55 00:03:52,860 --> 00:03:59,900 un tiempo, puede seguir las instrucciones aquí para finalmente ejecutar su aplicación. Así que déjame navegar en esta carpeta recién 56 00:03:59,900 --> 00:04:00,560 creada 57 00:04:01,640 --> 00:04:04,670 aquí y ejecutar react-native run-ios, por ejemplo, 58 00:04:04,750 --> 00:04:12,260 para ejecutarlo en el simulador de iOS que obtuve. Ahora, esto detrás de escena usa Xcode para construir esta 59 00:04:12,260 --> 00:04:13,070 aplicación, 60 00:04:13,070 --> 00:04:19,180 ya no usa expo, puede desinstalar el cliente de expo aquí, puede desinstalar la expo CLI de 61 00:04:19,220 --> 00:04:20,390 su sistema, esto 62 00:04:20,390 --> 00:04:26,510 no aprovecha la expo en absoluto, solo usa Xcode detrás las escenas para construir su aplicación, por 63 00:04:26,540 --> 00:04:33,020 lo que esta herramienta de desarrollo nativa de Apple. Esperemos a que termine esta compilación y la primera vez que la construyas, 64 00:04:33,020 --> 00:04:34,260 esto llevará un poco 65 00:04:34,280 --> 00:04:38,960 más de tiempo, las reconstrucciones posteriores serán más rápidas. Así que esperemos a que esto termine. 66 00:04:39,870 --> 00:04:43,980 Ahora, a lo largo de este proceso de compilación, se abrirá una nueva pestaña o una 67 00:04:43,980 --> 00:04:47,430 nueva ventana en su terminal, mantenga ese proceso ejecutándose y también mantenga el 68 00:04:47,430 --> 00:04:48,080 proceso de 69 00:04:48,090 --> 00:04:53,610 compilación ejecutándose, por supuesto, no abandone esto, así que mantenga ambos procesos en funcionamiento aquí y ahora esto instala la aplicación 70 00:04:53,610 --> 00:04:58,650 en el simulador, en este caso, si tuviera un dispositivo real conectado, lo instalaría allí e inicia la aplicación 71 00:04:58,650 --> 00:05:00,490 allí y, por lo tanto, aquí, 72 00:05:00,580 --> 00:05:03,060 realmente creó un nuevo simulador aquí para mí, no Sin 73 00:05:03,090 --> 00:05:07,830 embargo, ahora lanza la aplicación aquí en este simulador. Nuevamente para el primer lanzamiento, esto ahora 74 00:05:07,830 --> 00:05:14,030 descarga la aplicación integrada en este dispositivo básicamente y también tiene algunas características de desarrollo agradables, se puede habilitar la depuración 75 00:05:14,030 --> 00:05:18,270 remota, por lo que también tiene todas estas características agradables aquí, eso no es 76 00:05:18,300 --> 00:05:22,750 expo exclusivo y este primer lanzamiento llevará un poco más de tiempo como se mencionó. 77 00:05:22,770 --> 00:05:30,220 Así que esperemos a que termine esta descarga aquí para que la aplicación se inicie y esté por aparecer. Ahora, la pantalla de inicio exacta que está viendo 78 00:05:30,250 --> 00:05:32,410 aquí, que puede diferir con 79 00:05:32,500 --> 00:05:37,450 el tiempo porque ese es solo el código de inicio que obtiene 80 00:05:37,450 --> 00:05:43,990 en el proyecto, que veremos en un segundo, pero ahora es la aplicación, una aplicación nativa sin 81 00:05:44,080 --> 00:05:50,740 exposición de lo contrario, se ejecuta en iOS. También podemos ejecutarlo en Android y para eso, este proceso que ahora ha finalizado se puede 82 00:05:50,740 --> 00:05:52,330 borrar, el otro debe mantenerse ejecutándose, ese 83 00:05:52,330 --> 00:05:57,360 es su servidor de desarrollo que se comunica con el dispositivo y que vigila los cambios de archivos e introduce un nuevo código 84 00:05:57,360 --> 00:05:58,270 en el dispositivo , 85 00:05:58,270 --> 00:06:03,250 entonces lo que sabes de la expo, eso también funciona aquí. Por lo tanto, mantenga el otro proceso 86 00:06:03,250 --> 00:06:10,300 en ejecución, pero ahora también podemos ejecutar react-native run-android para compilar también la aplicación para Android y aprovechar ese mismo servidor 87 00:06:10,300 --> 00:06:16,260 para luego compilar y empujar la aplicación de Android al emulador de Android y luego ver eso también. 88 00:06:16,270 --> 00:06:17,950 Esperemos a que esto 89 00:06:17,950 --> 00:06:22,850 termine, nuevamente esta primera compilación tomará más tiempo, las recargas posteriores serán mucho más rápidas. 90 00:06:22,930 --> 00:06:28,150 Este proceso de compilación ahora aprovecha Android Studio, que también debe haber instalado y 91 00:06:28,330 --> 00:06:34,130 configurado como se describe en los documentos oficiales y, por lo tanto, ahora también funciona 92 00:06:34,140 --> 00:06:37,190 totalmente sin exposición, solo usa Android Studio. 93 00:06:37,370 --> 00:06:44,030 Ahora, esto también lanza la aplicación de Android aquí en mi emulador de Android, pero al igual que antes, este lanzamiento inicial puede demorar 94 00:06:44,030 --> 00:06:45,470 un poco, ahora se conecta 95 00:06:45,470 --> 00:06:48,600 a este servidor de desarrollo que, por lo tanto, aquí también 96 00:06:48,710 --> 00:06:53,900 debería seguir ejecutándose, no solo mientras se construye este paquete, pero todo el tiempo, de modo que hasta los 97 00:06:53,900 --> 00:06:59,180 cambios en sus archivos, obtenga una reconstrucción en vivo y una vez hecho esto, veamos que la aplicación terminada 98 00:06:59,180 --> 00:07:00,530 se ejecute en Android. 99 00:07:00,530 --> 00:07:03,500 Ahora echemos un vistazo al código que es responsable 100 00:07:03,500 --> 00:07:07,420 de eso, ¿se ve ahora totalmente diferente de lo que vimos hasta ahora? 101 00:07:07,550 --> 00:07:12,620 Para eso, cargué el proyecto aquí nuevamente con Visual Studio Code, por lo que la misma configuración que antes 102 00:07:12,620 --> 00:07:18,140 y lo que ves se ve un poco diferente, pero sobre todo, tenemos un montón de archivos de configuración diferentes, bastante 103 00:07:18,140 --> 00:07:22,040 justos, pero eso realmente no cambia La forma en que escribimos nuestro código. 104 00:07:22,130 --> 00:07:24,960 Muy importante, tenemos una carpeta de Android y una 105 00:07:24,980 --> 00:07:26,320 de iOS, no 106 00:07:26,360 --> 00:07:31,270 teníamos eso antes, esas carpetas y en Windows, por cierto, Linux no tiene iOS, solo tiene 107 00:07:31,460 --> 00:07:36,740 Android allí, pero esas carpetas contienen la aplicación nativa real Los proyectos que se crean con la 108 00:07:36,740 --> 00:07:40,570 ayuda de Android Studio y Xcode y su código se integran en algo 109 00:07:40,570 --> 00:07:45,710 que podría decirse, React Native hace todo eso por usted, el proceso React Native CLI, pero si 110 00:07:45,710 --> 00:07:51,230 echamos un vistazo al código concreto en el aplicación js, bueno, eso es justo 111 00:07:51,230 --> 00:07:58,430 lo que usamos en este curso, ¿verdad? Allí tenemos un par de importaciones y algunos enlaces adicionales que le muestran algunas advertencias 112 00:07:58,430 --> 00:08:00,180 aquí con respecto al estilo del código. 113 00:08:00,230 --> 00:08:04,160 Estos no son errores reales, solo que debería usar comillas dobles en lugar de comillas 114 00:08:04,170 --> 00:08:08,570 simples, sí, alguna recomendación que no me importa aquí, pero si echa un vistazo a lo 115 00:08:08,630 --> 00:08:13,560 que se importa aquí, reaccione, guarde la vista de área, la hoja de estilo, la vista de desplazamiento , 116 00:08:13,700 --> 00:08:18,520 ver, texto: estas son todas las cosas con las que ya trabajamos, por lo que tenemos los componentes 117 00:08:18,710 --> 00:08:26,690 normales con los que ya trabajamos y, por supuesto, lo hacemos porque lo que dije a lo largo de este curso, React Native es React Native, expo es una envoltura 118 00:08:26,690 --> 00:08:27,780 delgada alrededor . 119 00:08:27,860 --> 00:08:34,580 Escribimos el mismo código, usamos los mismos componentes, se compilan en widgets nativos, todo no cambia cuando usamos expo, 120 00:08:34,580 --> 00:08:36,920 la única diferencia es que con 121 00:08:36,920 --> 00:08:41,360 expo, no tenemos que configurar tanto, la compilación es un poco más 122 00:08:41,390 --> 00:08:48,220 rápido y agregar módulos nativos es súper fácil, probar en dispositivos reales es súper fácil, es simplemente más fácil, 123 00:08:48,230 --> 00:08:49,580 creamos la aplicación 124 00:08:49,580 --> 00:08:54,110 de la misma manera y eso es algo que también puedes ver aquí. 125 00:08:54,110 --> 00:08:56,920 Los estilos se configuran de la misma manera con Stylesheet. crear, eso es todo lo 126 00:08:56,990 --> 00:09:00,530 que hicimos a lo largo de este curso y eso es 127 00:09:01,570 --> 00:09:02,960 importante para ti. 128 00:09:03,020 --> 00:09:05,870 Ahora una cosa extra que encontrarás aquí es el índice. js, no teníamos eso 129 00:09:05,870 --> 00:09:11,780 en la expo, ese tipo de archivo de configuración básico que inicia su aplicación se podría decir, que asegura 130 00:09:11,780 --> 00:09:16,150 que este componente de la aplicación se muestre en la pantalla, eso es algo 131 00:09:16,160 --> 00:09:22,160 que la expo hizo por usted en React Aplicación expo nativa, pero aparte de eso, es realmente igual y 132 00:09:22,160 --> 00:09:24,460 crearía una aplicación de la misma manera.