1
00:00:01,020 --> 00:00:03,600
Hemos escrito algunas piezas de JSX.

2
00:00:03,600 --> 00:00:07,860
Ya en este curso, pero ¿qué es realmente JSX?

3
00:00:07,860 --> 00:00:10,683
¿Y por qué es tan importante en React?

4
00:00:12,150 --> 00:00:14,940
Bueno, cuando hablamos por primera vez de componentes,

5
00:00:14,940 --> 00:00:18,750
hablamos de cómo un componente contiene sus propios datos,

6
00:00:18,750 --> 00:00:21,030
lógica y apariencia.

7
00:00:21,030 --> 00:00:23,220
Y eso tiene sentido, ¿verdad?

8
00:00:23,220 --> 00:00:27,300
Porque si un componente es una parte de la interfaz de usuario,

9
00:00:27,300 --> 00:00:30,720
significa que debemos ser capaces de describir exactamente

10
00:00:30,720 --> 00:00:32,940
cómo se ve ese componente.

11
00:00:32,940 --> 00:00:36,690
Y ahí es donde entra en juego JSX.

12
00:00:36,690 --> 00:00:40,521
Entonces, JSX es una sintaxis declarativa que usamos

13
00:00:40,521 --> 00:00:43,410
para describir cómo se ven los componentes

14
00:00:43,410 --> 00:00:47,640
y cómo funcionan en función de sus datos y lógica.

15
00:00:47,640 --> 00:00:50,880
Entonces, se trata de la apariencia de los componentes.

16
00:00:50,880 --> 00:00:53,490
En la práctica, esto significa que cada componente

17
00:00:53,490 --> 00:00:56,520
debe devolver un bloque de JSX,

18
00:00:56,520 --> 00:01:01,230
que React luego usará para representar el componente en la interfaz de usuario.

19
00:01:01,230 --> 00:01:02,970
Ahora, mirando este código,

20
00:01:02,970 --> 00:01:07,470
Este JSX se parece mucho a HTML, ¿verdad?

21
00:01:07,470 --> 00:01:12,180
Pero, de hecho, JSX es una extensión de JavaScript.

22
00:01:12,180 --> 00:01:16,590
que nos permite combinar partes de HTML, CSS,

23
00:01:16,590 --> 00:01:21,000
y JavaScript, todo en un solo bloque de código.

24
00:01:21,000 --> 00:01:24,969
Básicamente, podemos escribir HTML e incrustar algunas piezas.

25
00:01:24,969 --> 00:01:28,260
de JavaScript cuando sea necesario, por ejemplo,

26
00:01:28,260 --> 00:01:31,260
para hacer referencia a algunas variables de JavaScript

27
00:01:31,260 --> 00:01:34,680
e incluso podemos hacer referencia a otros componentes de React

28
00:01:34,680 --> 00:01:37,170
para que luego podamos combinar Nest

29
00:01:37,170 --> 00:01:39,840
y reutilizar múltiples componentes.

30
00:01:39,840 --> 00:01:41,700
Pero ahora podrías estar pensando

31
00:01:41,700 --> 00:01:44,700
si React es un marco de JavaScript

32
00:01:44,700 --> 00:01:49,061
Entonces, ¿cómo entenderá este código HTML?

33
00:01:49,061 --> 00:01:54,061
Bueno, recuerda que JSX es solo una extensión de JavaScript,

34
00:01:54,780 --> 00:01:56,796
lo que significa que hay una manera sencilla

35
00:01:56,796 --> 00:02:01,080
de convertir JSX a JavaScript.

36
00:02:01,080 --> 00:02:03,570
Esto se hace mediante una herramienta llamada Babel,

37
00:02:03,570 --> 00:02:05,640
que fue incluido automáticamente

38
00:02:05,640 --> 00:02:09,390
en nuestra aplicación de Create-React-App.

39
00:02:09,390 --> 00:02:11,824
Y el resultado de esta conversión parece algo

40
00:02:11,824 --> 00:02:14,160
como este código a la derecha

41
00:02:14,160 --> 00:02:16,714
donde se convirtió cada elemento JSX

42
00:02:16,714 --> 00:02:21,450
a una llamada de función React.createElement.

43
00:02:21,450 --> 00:02:24,000
¿Y esto te resulta familiar?

44
00:02:24,000 --> 00:02:25,830
Bueno, espero que así sea.

45
00:02:25,830 --> 00:02:28,068
porque esto es exactamente lo que devolvimos

46
00:02:28,068 --> 00:02:32,130
desde el componente de la aplicación en la conferencia pura de React.

47
00:02:32,130 --> 00:02:35,310
Entonces, en esa conferencia donde no pudimos usar JSX

48
00:02:35,310 --> 00:02:38,235
porque no teníamos esa herramienta Babel.

49
00:02:38,235 --> 00:02:41,376
Pero de todos modos, esta conversión es necesaria.

50
00:02:41,376 --> 00:02:46,020
porque los navegadores, por supuesto, no entienden JSX.

51
00:02:46,020 --> 00:02:48,690
Sólo entienden HTML.

52
00:02:48,690 --> 00:02:53,137
Entonces, detrás de escena, todo el JSX que escribimos se convierte

53
00:02:53,137 --> 00:02:58,050
en muchas llamadas a funciones anidadas de React.createElement.

54
00:02:58,050 --> 00:03:01,170
Y estas llamadas a funciones son lo que al final,

55
00:03:01,170 --> 00:03:05,520
crear los elementos HTML que vemos en pantalla.

56
00:03:05,520 --> 00:03:09,450
Ahora, lo que esto significa es que realmente podríamos usar React

57
00:03:09,450 --> 00:03:12,210
sin JSX en absoluto.

58
00:03:12,210 --> 00:03:14,280
Entonces, podríamos simplemente escribir manualmente

59
00:03:14,280 --> 00:03:18,420
estas funciones createElement en lugar de JSX

60
00:03:18,420 --> 00:03:22,140
pero eso no parece muy divertido, ¿verdad?

61
00:03:22,140 --> 00:03:24,257
También hace que el código sea muy difícil de leer.

62
00:03:24,257 --> 00:03:26,130
y entender.

63
00:03:26,130 --> 00:03:30,780
Y entonces, en realidad, todo el mundo simplemente usa JSX.

64
00:03:30,780 --> 00:03:35,490
Muy bien, ahora que sabemos de qué se trata JSX,

65
00:03:35,490 --> 00:03:38,670
volvamos a ese primer párrafo donde digo

66
00:03:38,670 --> 00:03:42,390
que JSX es una sintaxis declarativa.

67
00:03:42,390 --> 00:03:46,803
Entonces, ¿qué significa realmente que JSX sea declarativo?

68
00:03:47,910 --> 00:03:51,720
Bueno, antes de que podamos entender qué significa declarativo,

69
00:03:51,720 --> 00:03:55,530
Primero tenemos que revisar qué significa imperativo.

70
00:03:55,530 --> 00:03:59,910
Entonces, cuando intentamos crear interfaces de usuario usando JavaScript básico,

71
00:03:59,910 --> 00:04:03,960
Por defecto utilizaremos un enfoque imperativo.

72
00:04:03,960 --> 00:04:07,020
Esto significa que seleccionamos elementos manualmente,

73
00:04:07,020 --> 00:04:11,580
atraviesa el DOM y adjunta controladores de eventos a los elementos.

74
00:04:11,580 --> 00:04:14,192
Luego, cada vez que sucede algo en la aplicación.

75
00:04:14,192 --> 00:04:16,290
como un clic en el botón,

76
00:04:16,290 --> 00:04:19,260
Le damos al navegador instrucciones paso a paso.

77
00:04:19,260 --> 00:04:22,290
sobre cómo mutar esos elementos del pulgar

78
00:04:22,290 --> 00:04:26,370
hasta llegar a la interfaz de usuario actualizada deseada.

79
00:04:26,370 --> 00:04:28,153
Entonces, en el enfoque imperativo,

80
00:04:28,153 --> 00:04:33,030
Básicamente le decimos al navegador exactamente cómo hacer las cosas.

81
00:04:33,030 --> 00:04:35,580
Sin embargo, hacer esto en una aplicación compleja

82
00:04:35,580 --> 00:04:37,680
es completamente inviable

83
00:04:37,680 --> 00:04:41,130
por todas las razones que hemos aprendido antes.

84
00:04:41,130 --> 00:04:44,100
Y recuerda que esa es la razón por la que los frameworks

85
00:04:44,100 --> 00:04:46,950
como React existe en primer lugar

86
00:04:46,950 --> 00:04:51,150
y es por eso que React eligió utilizar un enfoque declarativo

87
00:04:51,150 --> 00:04:53,253
para construir interfaces de usuario.

88
00:04:54,150 --> 00:04:57,503
Entonces, un enfoque declarativo consiste simplemente en describir

89
00:04:57,503 --> 00:05:00,750
cómo debería verse la interfaz de usuario en todo momento,

90
00:05:00,750 --> 00:05:04,800
siempre basado en los datos actuales que están en el componente.

91
00:05:04,800 --> 00:05:09,780
Y pronto aprenderemos que estos datos son accesorios y estados.

92
00:05:09,780 --> 00:05:14,780
Y nuevamente, básicamente, usamos JSX para describir la interfaz de usuario.

93
00:05:15,420 --> 00:05:18,120
basado en accesorios y estado.

94
00:05:18,120 --> 00:05:20,428
Entonces los datos que están actualmente en el componente

95
00:05:20,428 --> 00:05:25,267
y todo eso sucede sin ninguna manipulación DOM.

96
00:05:25,267 --> 00:05:27,725
Entonces, no hay selectores de consultas,

97
00:05:27,725 --> 00:05:30,747
sin oyentes de eventos publicitarios, sin lista de clases,

98
00:05:30,747 --> 00:05:35,144
No hay propiedades de contenido de texto en ninguna parte para ver aquí.

99
00:05:35,144 --> 00:05:40,144
porque, de hecho, React está básicamente a una gran abstracción de distancia.

100
00:05:40,980 --> 00:05:43,500
desde el DOM, para que nosotros, desarrolladores

101
00:05:43,500 --> 00:05:46,650
Nunca tendrás que tocar el DOM directamente.

102
00:05:46,650 --> 00:05:50,400
En cambio, pensamos en la interfaz de usuario como un reflejo

103
00:05:50,400 --> 00:05:54,420
de los datos actuales y dejar que React sincronice automáticamente

104
00:05:54,420 --> 00:05:57,496
la interfaz de usuario con esos datos.

105
00:05:57,496 --> 00:06:00,846
Entonces, en esencia, la diferencia entre imperativo

106
00:06:00,846 --> 00:06:04,920
y declarativo es que en el enfoque declarativo,

107
00:06:04,920 --> 00:06:09,660
Usamos JSX para decirle a React lo que queremos ver en la pantalla.

108
00:06:09,660 --> 00:06:12,840
pero no cómo lograrlo paso a paso.

109
00:06:12,840 --> 00:06:16,830
React puede resolver eso por sí solo, básicamente.

110
00:06:16,830 --> 00:06:19,650
Y esto tiene muchas, muchas ventajas.

111
00:06:19,650 --> 00:06:21,903
como veremos a lo largo del curso.