1
00:00:01,050 --> 00:00:03,870
Como ya he mencionado varias veces,

2
00:00:03,870 --> 00:00:06,600
React tiene que ver con componentes,

3
00:00:06,600 --> 00:00:10,050
pero ahora aprendamos formalmente qué son los componentes de React

4
00:00:10,050 --> 00:00:12,033
y por qué son tan importantes.

5
00:00:13,500 --> 00:00:17,760
Entonces los componentes son el concepto más fundamental en React,

6
00:00:17,760 --> 00:00:21,510
simplemente porque las aplicaciones React son, de hecho,

7
00:00:21,510 --> 00:00:24,510
hecho enteramente de componentes.

8
00:00:24,510 --> 00:00:26,910
Entonces, cuando miras cualquier aplicación React,

9
00:00:26,910 --> 00:00:29,910
no hay nada que no sea un componente

10
00:00:29,910 --> 00:00:33,810
o al menos no dentro de algún componente.

11
00:00:33,810 --> 00:00:35,220
Por eso me gusta decir

12
00:00:35,220 --> 00:00:37,560
que los componentes son los bloques de construcción

13
00:00:37,560 --> 00:00:40,830
de cualquier interfaz de usuario en React.

14
00:00:40,830 --> 00:00:45,120
De hecho, básicamente todo lo que hace React es tomar componentes

15
00:00:45,120 --> 00:00:47,250
y dibujarlos en una página web,

16
00:00:47,250 --> 00:00:52,230
así que en una interfaz de usuario, o UI para abreviar.

17
00:00:52,230 --> 00:00:53,670
Eso suena simple,

18
00:00:53,670 --> 00:00:57,390
pero en realidad es el trabajo principal de React.

19
00:00:57,390 --> 00:00:58,860
En términos más técnicos,

20
00:00:58,860 --> 00:01:02,160
React representa una vista para cada componente,

21
00:01:02,160 --> 00:01:06,420
y todas estas vistas juntas forman la interfaz de usuario.

22
00:01:06,420 --> 00:01:08,670
Entonces también podemos pensar en un componente.

23
00:01:08,670 --> 00:01:12,900
como parte de la interfaz de usuario, ¿verdad?

24
00:01:12,900 --> 00:01:15,540
Ahora, una propiedad clave de los componentes.

25
00:01:15,540 --> 00:01:18,480
es que cada componente tiene sus propios datos,

26
00:01:18,480 --> 00:01:21,570
Lógica y apariencia de JavaScript.

27
00:01:21,570 --> 00:01:25,200
Básicamente, cada componente describe cómo funciona.

28
00:01:25,200 --> 00:01:28,680
y cómo se ve, lo que los convierte en una excelente manera

29
00:01:28,680 --> 00:01:31,080
de construir interfaces de usuario.

30
00:01:31,080 --> 00:01:34,020
Y hablando de crear interfaces de usuario,

31
00:01:34,020 --> 00:01:36,240
basado en lo que acabamos de aprender,

32
00:01:36,240 --> 00:01:38,280
tiene sentido que en React

33
00:01:38,280 --> 00:01:41,370
construimos interfaces de usuario complejas como esta

34
00:01:41,370 --> 00:01:43,500
mediante la construcción de múltiples componentes,

35
00:01:43,500 --> 00:01:47,550
y luego combinar estos componentes como piezas de Lego.

36
00:01:47,550 --> 00:01:49,800
Entonces aquí podemos identificar los componentes.

37
00:01:49,800 --> 00:01:52,680
como un reproductor de vídeo, un menú,

38
00:01:52,680 --> 00:01:55,860
esta lista de preguntas, y también esta parte

39
00:01:55,860 --> 00:01:58,860
donde podemos refinar las preguntas mostradas.

40
00:01:58,860 --> 00:02:01,500
Entonces esos son como los grandes componentes,

41
00:02:01,500 --> 00:02:04,860
pero podemos identificar muchos otros componentes más pequeños

42
00:02:04,860 --> 00:02:06,420
en esta interfaz de usuario también,

43
00:02:06,420 --> 00:02:09,810
como por ejemplo, estos filtros de aquí.

44
00:02:09,810 --> 00:02:12,810
Y lo que puedes ver es que este filtro es

45
00:02:12,810 --> 00:02:16,800
dentro del componente de preguntas refinadas, ¿verdad?

46
00:02:16,800 --> 00:02:20,550
En realidad, una cosa que hacemos todo el tiempo es

47
00:02:20,550 --> 00:02:24,210
para colocar componentes dentro de otros componentes,

48
00:02:24,210 --> 00:02:28,980
o en otras palabras, anidamos componentes unos dentro de otros.

49
00:02:28,980 --> 00:02:33,330
Entonces, anidar componentes es un aspecto clave del uso de componentes.

50
00:02:33,330 --> 00:02:37,500
en React junto con la reutilización de componentes.

51
00:02:37,500 --> 00:02:40,440
Ahora, observe cómo tenemos tres preguntas similares.

52
00:02:40,440 --> 00:02:42,060
en la lista de preguntas,

53
00:02:42,060 --> 00:02:45,180
y así podemos crear un componente de pregunta,

54
00:02:45,180 --> 00:02:48,450
y luego reutilícelo tres veces aquí.

55
00:02:48,450 --> 00:02:51,870
Ahora bien, por supuesto, los datos para cada uno de ellos son diferentes,

56
00:02:51,870 --> 00:02:54,060
pero podemos pasar fácilmente datos diferentes

57
00:02:54,060 --> 00:02:56,100
en diferentes componentes de la pregunta

58
00:02:56,100 --> 00:02:58,170
usando algo llamado accesorios,

59
00:02:58,170 --> 00:03:00,720
del que hablaremos más adelante.

60
00:03:00,720 --> 00:03:04,440
Entonces, siempre que necesitemos alguna duplicación en nuestra interfaz de usuario,

61
00:03:04,440 --> 00:03:06,120
creamos un nuevo componente,

62
00:03:06,120 --> 00:03:09,570
y lo usamos tantas veces como sea necesario.

63
00:03:09,570 --> 00:03:12,540
Como puedes ver, una habilidad crucial

64
00:03:12,540 --> 00:03:14,730
que aprenderás a lo largo de este curso es

65
00:03:14,730 --> 00:03:19,140
cómo dividir un diseño como este en sus componentes.

66
00:03:19,140 --> 00:03:21,420
Ahora, una cosa que ayuda con eso.

67
00:03:21,420 --> 00:03:24,390
y con analizar los componentes que creamos

68
00:03:24,390 --> 00:03:27,870
es un árbol de componentes como este.

69
00:03:27,870 --> 00:03:30,030
Entonces esto muestra la jerarquía.

70
00:03:30,030 --> 00:03:32,400
que existe entre los componentes

71
00:03:32,400 --> 00:03:34,830
que componen la interfaz de usuario,

72
00:03:34,830 --> 00:03:37,290
y lo hace realmente fácil de entender

73
00:03:37,290 --> 00:03:41,310
cómo todos estos componentes están anidados uno dentro del otro

74
00:03:41,310 --> 00:03:44,670
y realmente cómo se relacionan entre sí.

75
00:03:44,670 --> 00:03:48,390
También podemos ver claramente las relaciones entre componentes,

76
00:03:48,390 --> 00:03:50,310
como las preguntas refinadas

77
00:03:50,310 --> 00:03:53,430
siendo el componente principal de los filtros,

78
00:03:53,430 --> 00:03:55,980
o al revés eso filtra

79
00:03:55,980 --> 00:03:59,820
es un componente secundario de preguntas refinadas.

80
00:03:59,820 --> 00:04:04,080
Y usamos estos términos, entonces componente padre e hijo,

81
00:04:04,080 --> 00:04:05,790
todo el tiempo en React.

82
00:04:05,790 --> 00:04:08,940
Por eso es importante entender lo que significan.

83
00:04:08,940 --> 00:04:12,540
Y entonces, un árbol de componentes como este es perfecto para entender.

84
00:04:12,540 --> 00:04:16,260
este tipo de relaciones entre componentes,

85
00:04:16,260 --> 00:04:18,540
y creo que esto es todo lo que necesitas

86
00:04:18,540 --> 00:04:21,390
saber acerca de los componentes por ahora.

87
00:04:21,390 --> 00:04:24,780
Profundizaremos mucho en algunos conceptos importantes.

88
00:04:24,780 --> 00:04:27,480
Me gusta la reutilización más adelante, pero por ahora,

89
00:04:27,480 --> 00:04:31,023
comencemos a poner en práctica algunos de estos conceptos.