1 00:00:02,460 --> 00:00:04,290 Entonces, ahora que sabemos qué 2 00:00:04,290 --> 00:00:07,370 es React Native, echemos un breve vistazo detrás de escena. 3 00:00:07,530 --> 00:00:13,080 Ahora, como mencioné, con React y React Native, creamos una aplicación y nuestro código generalmente se parece a 4 00:00:13,080 --> 00:00:13,700 esto. 5 00:00:13,710 --> 00:00:19,260 Construimos componentes React normales como lo conoce desde la web con Javascript porque Javascript es el 6 00:00:19,260 --> 00:00:21,650 lenguaje que usamos para construir aplicaciones 7 00:00:21,810 --> 00:00:26,290 React Native, pero allí, utilizamos componentes especiales como ver y texto aquí. 8 00:00:26,310 --> 00:00:31,130 Estos no son sus elementos HTML normales porque los elementos HTML normales no 9 00:00:31,680 --> 00:00:37,230 son compatibles, las plataformas nativas no saben cómo usarlos, por lo tanto, utiliza componentes especiales 10 00:00:37,230 --> 00:00:42,600 que le proporciona React Native para los cuales React Native puede traducirlos a instrucciones las 11 00:00:42,630 --> 00:00:46,380 plataformas nativas sí entienden, así es como funciona esto. 12 00:00:46,380 --> 00:00:51,150 Ahora es importante comprender sus puntos de vista, por lo que los componentes con los que está trabajando, por lo 13 00:00:51,150 --> 00:00:58,440 tanto, se compilan al final en widgets nativos reales, elementos nativos reales, código nativo real. No se compilará su código Javascript donde administra su 14 00:00:58,470 --> 00:01:03,480 lógica de negocios, pero sí sus vistas, y eso, por supuesto, también significa que 15 00:01:03,750 --> 00:01:09,190 normalmente obtiene un gran rendimiento al crear aplicaciones React Native porque el resultado es una 16 00:01:09,190 --> 00:01:14,310 aplicación nativa real donde una gran parte del El código es código nativo real. 17 00:01:14,310 --> 00:01:19,300 Ahora, si echamos un vistazo más de cerca a este componente, es importante comprender que, por 18 00:01:19,320 --> 00:01:25,640 supuesto, puede usar React para crear aplicaciones web, pero que también puede crear aplicaciones nativas para Android e iOS con 19 00:01:25,650 --> 00:01:31,530 código nativo, por lo que sin React Native o que puede usar React Native, por lo que estas son 20 00:01:31,530 --> 00:01:37,410 cuatro formas diferentes de crear aplicaciones donde, por supuesto, React para la web no nos dará una aplicación nativa, 21 00:01:37,410 --> 00:01:40,260 sino solo para comparar cómo se relacionaría esto. 22 00:01:40,260 --> 00:01:45,630 Entonces, si está utilizando React para la web, normalmente trabaja con, digamos, un div para estructurar su contenido. 23 00:01:46,260 --> 00:01:48,540 Si trabajara directamente con Android, para 24 00:01:48,540 --> 00:01:54,780 construir su aplicación en Android Studio sin React Native en absoluto, trabajaría con una vista de Android, por 25 00:01:54,780 --> 00:02:00,600 ejemplo, ese sería un widget que puede usar allí en la interfaz de usuario que está construyendo 26 00:02:00,600 --> 00:02:08,970 directamente con las características de la plataforma nativa para estructurar su contenido. En iOS, ese sería el widget de vista de la interfaz de usuario 27 00:02:08,970 --> 00:02:10,780 y no necesita memorizar estos 28 00:02:10,830 --> 00:02:16,020 términos, solo quiero explicar cómo React Native traduce las cosas por usted porque en las aplicaciones React 29 00:02:16,020 --> 00:02:18,180 Native, realmente usa el elemento de vista. 30 00:02:18,180 --> 00:02:22,950 Ahora, si echas un vistazo a ese elemento de vista, por supuesto ves que es 31 00:02:23,010 --> 00:02:24,830 muy similar al elemento div, 32 00:02:24,840 --> 00:02:30,510 parece una etiqueta HTML, la diferencia, por supuesto, es que comienza con un carácter en mayúscula y esa vista no 33 00:02:30,690 --> 00:02:36,180 es una etiqueta HTML , el navegador no sabría qué hacer con una vista, pero React Native sí y 34 00:02:36,240 --> 00:02:42,990 React Native traducirá esa vista a la vista de Android o a la vista de la interfaz de usuario para usted y, por supuesto, 35 00:02:43,050 --> 00:02:49,260 lo hace no solo para este componente de envoltura general sino por ejemplo, si está obteniendo la entrada del usuario, en la 36 00:02:49,260 --> 00:02:54,210 web lo haría con el elemento de entrada, si creara una aplicación nativa de Android, usaría editar 37 00:02:54,210 --> 00:02:59,850 texto, para una aplicación nativa de iOS, usaría el campo de texto de la interfaz de usuario y en 38 00:03:00,090 --> 00:03:06,240 React Native, está el componente de entrada de texto, nuevamente React Native compila eso en los widgets nativos para usted y 39 00:03:06,240 --> 00:03:11,520 así es como React Native funciona detrás de escena. Por supuesto, no nos importa la web en este 40 00:03:11,520 --> 00:03:17,310 curso aquí, solo para que entiendas que hay algunas similitudes, usamos estas etiquetas que se parecen a las etiquetas HTML, pero por 41 00:03:17,440 --> 00:03:24,660 supuesto, la diferencia importante es que estos son componentes especiales compilados al código nativo. Ahora, como ya mencioné, es importante entender que para 42 00:03:24,660 --> 00:03:30,500 la interfaz de usuario, React Native le ofrece componentes especiales que luego se compilan para uso 43 00:03:30,540 --> 00:03:33,000 nativo, para su otra lógica, 44 00:03:33,060 --> 00:03:38,760 por lo que si está utilizando Redux o si tiene alguna lógica comercial, usted ' 45 00:03:38,760 --> 00:03:47,070 al enviar solicitudes HTTP, está transformando datos, todos los demás códigos Javascript no se compilan en código nativo, sino que se ejecutan 46 00:03:47,070 --> 00:03:52,980 en un hilo especial alojado por React Native. Así que puedes imaginar tu aplicación React Native que 47 00:03:52,980 --> 00:03:58,450 obtienes al final como una aplicación nativa real porque es una, donde todas las vistas se han 48 00:03:58,450 --> 00:04:05,760 compilado en widgets nativos pero donde hay una mini aplicación adicional dentro de tu aplicación, un mini Javascript aplicación que se ejecuta allí, 49 00:04:05,760 --> 00:04:12,690 alojada e iniciada por React Native, por así decirlo, que ejecuta todo su código Javascript y su código Javascript puede comunicarse con 50 00:04:12,690 --> 00:04:13,800 la plataforma nativa. 51 00:04:14,160 --> 00:04:19,860 Puede visualizar esto de esta manera, tiene su código, su aplicación y crea una aplicación nativa que se 52 00:04:19,860 --> 00:04:25,110 ejecuta en una plataforma nativa y, por supuesto, tiene ciertas funciones de plataforma disponibles, como por 53 00:04:25,110 --> 00:04:27,150 ejemplo, usar la cámara del dispositivo. 54 00:04:27,150 --> 00:04:32,520 Ahora, como ya se mencionó, su código se puede dividir en dos cosas aquí: sus puntos de vista y 55 00:04:32,520 --> 00:04:38,430 su lógica comercial, por lo que el otro código Javascript. Ahora, como ya se mencionó varias veces, sus 56 00:04:38,490 --> 00:04:46,620 vistas se compilan en vistas nativas, en widgets nativos para estas plataformas y su código, sin embargo, se mantiene como código Javascript y puede aprovechar las 57 00:04:46,620 --> 00:04:53,090 funciones de la plataforma nativa como la cámara porque su código Javascript se ejecuta en un virtual especial la máquina al 58 00:04:53,100 --> 00:04:58,430 final, desarrollada y alojada por React Native dentro de su aplicación, por lo que la parte 59 00:04:58,440 --> 00:05:04,710 correcta aquí está dentro de nuestra aplicación nativa que enviamos a las tiendas de aplicaciones y ese código Javascript, esta 60 00:05:04,710 --> 00:05:10,080 máquina virtual Javascript, sabe cómo hablar a las características de la plataforma nativa, por lo que al 61 00:05:10,200 --> 00:05:14,340 sistema operativo su aplicación se está ejecutando al final a través de un 62 00:05:14,340 --> 00:05:20,580 puente especial que podría decir y ese puente y esa máquina virtual, todo eso es proporcionado automáticamente por React Native. 63 00:05:20,580 --> 00:05:22,050 No tiene que preocuparse 64 00:05:22,170 --> 00:05:29,190 por esto, todo lo que hace es escribir su aplicación React Native con Javascript y con estos componentes especiales y eso es todo lo que necesita 65 00:05:29,190 --> 00:05:30,720 saber por ahora, así es como 66 00:05:30,720 --> 00:05:36,870 funciona una aplicación React Native detrás de escena y yo es importante estar al tanto de esto porque le quita parte de la 67 00:05:37,170 --> 00:05:43,050 magia en un sentido positivo porque comprende lo que realmente está escribiendo y lo que sucederá con su código y cómo 68 00:05:43,050 --> 00:05:47,020 este código termina en una aplicación nativa y, por supuesto, también entiendes que tienes 69 00:05:47,100 --> 00:05:51,960 una aplicación nativa real, por lo tanto, al final. No todo el código está compilado, eso sería 70 00:05:51,960 --> 00:05:52,980 bastante imposible, pero 71 00:05:52,980 --> 00:05:58,300 sus vistas están compiladas y, por supuesto, las vistas, por lo que la parte que ve el usuario, es 72 00:05:58,320 --> 00:06:03,650 la parte más importante cuando se trata del rendimiento de una aplicación porque vuelve a representar la interfaz de 73 00:06:03,650 --> 00:06:05,700 usuario y todo eso, esa es típicamente 74 00:06:05,700 --> 00:06:10,620 la parte intensiva en rendimiento y, por lo tanto, es muy bueno que esto esté compilado y 75 00:06:10,620 --> 00:06:13,410 esa es una de las grandes fortalezas de React Native.