1
00:00:02,420 --> 00:00:08,930
Ahora con todo eso en este módulo, aprendiste mucho sobre cómo construir aplicaciones reales con React Native.

2
00:00:08,930 --> 00:00:11,780
Aprendiste mucho sobre los componentes integrados, aprendiste mucho sobre

3
00:00:11,780 --> 00:00:16,370
el estilo y cómo diseñar las cosas de la manera que quieras y cómo

4
00:00:16,370 --> 00:00:17,300
diseñar las

5
00:00:17,300 --> 00:00:24,290
cosas de la manera que quieras, también cómo el estilo difiere entre algunos componentes, por ejemplo que para los componentes de texto,

6
00:00:24,320 --> 00:00:26,320
el estilo en cascada hasta cierto

7
00:00:26,390 --> 00:00:31,970
punto, por lo que los estilos se heredan en estilos anidados allí, algo que estamos aprovechando en

8
00:00:31,970 --> 00:00:39,770
el juego en la pantalla aquí, pero que en todos los demás componentes, como la vista, los estilos que se le aplican realmente solo

9
00:00:39,770 --> 00:00:45,880
se aplica a esa vista y no se conecta en cascada, no se comparte con ninguna vista secundaria anidada.

10
00:00:45,890 --> 00:00:52,010
También aprendió cómo puede compartir estilos comunes, por ejemplo con componentes personalizados, como nuestro texto del cuerpo que configura

11
00:00:52,010 --> 00:00:58,100
una familia de fuentes general para que podamos usar el texto del cuerpo en lugar del texto incorporado si

12
00:00:58,130 --> 00:01:00,480
queremos texto con esa familia de fuentes.

13
00:01:00,590 --> 00:01:04,190
Por supuesto, ese es un concepto que puede usar para cualquier estilo compartido que

14
00:01:04,310 --> 00:01:09,980
desee, como también lo estamos haciendo para el tipo de tarjeta, donde tenemos una vista preestilizada para darnos esta bonita apariencia

15
00:01:10,010 --> 00:01:12,140
de tarjeta con un poco de sombra.

16
00:01:12,140 --> 00:01:17,450
También aprendió cómo puede configurar algunos temas con constantes que puede importar en diferentes archivos, tanto para colores

17
00:01:17,870 --> 00:01:23,990
aquí como también si lo necesita, para estilos de texto o para cualquier otro estilo que desee compartir entre componentes para

18
00:01:23,990 --> 00:01:29,630
que no lo haga ' No tiene que reescribirlo todo el tiempo, especialmente útil para casos en los que

19
00:01:29,630 --> 00:01:33,120
no desea o donde no puede crear componentes separados como lo estamos

20
00:01:33,260 --> 00:01:36,070
haciendo para la familia de fuentes, por ejemplo.

21
00:01:36,250 --> 00:01:40,820
Entonces, si eso no es posible, lo que en el caso de los colores

22
00:01:40,820 --> 00:01:47,690
hubiera sido difícil porque necesitamos colores en todo tipo de lugares, entonces tales estilos compartidos o constantes compartidas son una excelente

23
00:01:47,690 --> 00:01:53,420
manera y, en general, espero que tengan una idea de cómo componga interfaces de usuario con componentes integrados

24
00:01:53,450 --> 00:01:58,820
y con sus propios componentes personalizados que luego se acumulan en los componentes integrados y cómo,

25
00:01:58,820 --> 00:02:02,120
por lo tanto, puede crear buenas aplicaciones React Native.

26
00:02:02,140 --> 00:02:07,390
Echamos un vistazo a algunos componentes básicos y, por lo tanto, también quiero darle un resumen rápido sobre

27
00:02:07,390 --> 00:02:09,710
lo que aprendió sobre estos componentes aquí.

28
00:02:09,760 --> 00:02:15,080
Probablemente el componente más importante es la vista, que es un contenedor que envuelve otros

29
00:02:15,100 --> 00:02:21,180
componentes para luego colocar esos componentes o agregar ciertos estilos de contenedor, como sombras, bordes, color de fondo,

30
00:02:21,190 --> 00:02:24,760
cosas por el estilo. Casi igual de

31
00:02:24,760 --> 00:02:29,870
importante es el componente de texto que utiliza para generar texto.

32
00:02:29,950 --> 00:02:36,130
También puede anidar texto en texto donde incluso se comparte algún estilo y, en general, puede controlar cómo se

33
00:02:36,130 --> 00:02:41,980
debe generar el texto, si debe ajustarse, que es el valor predeterminado o si solo debe generar

34
00:02:41,980 --> 00:02:43,070
una o dos

35
00:02:43,210 --> 00:02:49,450
líneas y ahí es donde el componente de texto realmente le ayuda a enviar esa valiosa información a sus usuarios.

36
00:02:49,450 --> 00:02:53,860
Ahora a veces no solo desea generar información, sino también obtener información y para esto,

37
00:02:53,860 --> 00:02:55,930
la entrada de texto puede ser útil.

38
00:02:55,930 --> 00:03:00,760
Ahora profundizaremos en la obtención de la entrada del usuario más adelante en el curso, pero ya vio por primera vez

39
00:03:00,760 --> 00:03:05,290
cómo puede diseñarlo y cómo puede configurarlo y cómo puede asegurarse de obtener la entrada correcta y validando la

40
00:03:05,320 --> 00:03:11,210
entrada y realmente solo está trabajando con la entrada que necesita. Ahora, hablando de la entrada del usuario, el botón,

41
00:03:11,210 --> 00:03:14,230
por supuesto, también es un componente crucial, ya sea

42
00:03:14,330 --> 00:03:19,070
el botón incorporado o su propio botón que puede construir con los componentes táctiles que

43
00:03:19,130 --> 00:03:20,960
también son muy importantes y en

44
00:03:20,960 --> 00:03:26,660
los casos en que necesita generar listas de datos, aprendiste sobre FlatList y sobre la vista de desplazamiento,

45
00:03:26,750 --> 00:03:32,270
donde la principal diferencia es que FlatList está optimizado para listas muy largas o listas donde realmente

46
00:03:32,270 --> 00:03:35,790
no sabes cuánto durarán, pero potencialmente son muy largas, mientras que

47
00:03:35,930 --> 00:03:42,470
la vista de desplazamiento es ideal para cualquier otro contenido desplazable que no sea infinitamente largo, donde ciertamente irá más allá

48
00:03:42,470 --> 00:03:48,410
de los límites de la pantalla pero no será demasiado contenido adicional porque si todo ese contenido adicional se

49
00:03:48,410 --> 00:03:54,110
procesa sin ser utilizado, sin que sea visible para para el usuario, entonces está desperdiciando el rendimiento y

50
00:03:54,110 --> 00:03:54,860
ahí

51
00:03:54,920 --> 00:03:56,710
es donde entra FlatList porque

52
00:03:56,780 --> 00:03:59,980
eso solo representa lo que el usuario realmente puede ver.

53
00:04:00,020 --> 00:04:05,330
Hablando de lo que el usuario puede ver, en este módulo, también aprendió cómo agregar sus propias fuentes personalizadas

54
00:04:05,330 --> 00:04:08,770
y, a veces, no necesita una fuente sino una imagen, también

55
00:04:08,900 --> 00:04:14,580
aprendió cómo hacerlo, cómo incluir tanto local como red imágenes y cómo puede diseñar estas imágenes para que se vean bien.

56
00:04:14,600 --> 00:04:20,240
Hablando de estilo, para esto estamos usando la hoja de estilo que no es un componente sino

57
00:04:20,240 --> 00:04:22,130
una clase o un objeto

58
00:04:22,130 --> 00:04:28,190
proporcionado por React Native y la ventaja de usar esta hoja de estilo no es solo que obtendrá

59
00:04:28,190 --> 00:04:35,090
sus estilos del código jsx que desea ser relativamente delgado y breve y conciso, pero que también obtiene una validación automática

60
00:04:35,180 --> 00:04:41,110
de sus estilos y React Native le dice cuándo está utilizando un estilo incorrectamente y que en

61
00:04:41,150 --> 00:04:47,860
el futuro, también podría obtener optimizaciones de rendimiento adicionales. Y con eso, solo podemos alentarlo a que tenga

62
00:04:47,860 --> 00:04:48,810
en cuenta

63
00:04:48,820 --> 00:04:55,540
esta sección, tal vez lo revise por segunda vez y lo use como base para el progreso de su curso

64
00:04:55,540 --> 00:05:01,570
en el que utilizaremos todos estos componentes con los que trabajamos, donde escribiremos más estilos, donde construiremos interfaces

65
00:05:01,570 --> 00:05:07,330
de usuario más complejas y donde realmente necesitará estos fundamentos que aprendió en el segundo y en

66
00:05:07,330 --> 00:05:11,080
este módulo del curso para luego construir increíbles aplicaciones React Native.

67
00:05:11,080 --> 00:05:11,890
Así que sigamos adelante.