1
00:00:01,050 --> 00:00:03,390
Muchos principiantes se confunden bastante

2
00:00:03,390 --> 00:00:06,780
cuando empiezan a usar JSX en su propio código.

3
00:00:06,780 --> 00:00:11,340
Y, de hecho, JSX puede ser un poco complicado de entender.

4
00:00:11,340 --> 00:00:12,780
y dominar.

5
00:00:12,780 --> 00:00:15,180
Pero es por eso que estoy aquí en su sitio,

6
00:00:15,180 --> 00:00:17,070
ayudándote en el camino.

7
00:00:17,070 --> 00:00:21,363
Entonces, revisemos rápidamente las reglas de cómo funciona JSX.

8
00:00:22,830 --> 00:00:25,680
Ahora, hay algunas reglas generales de JSX.

9
00:00:25,680 --> 00:00:27,060
y hay algunas reglas

10
00:00:27,060 --> 00:00:31,200
sobre en qué se diferencia JSX de HTML.

11
00:00:31,200 --> 00:00:33,900
Y empezando por las reglas generales,

12
00:00:33,900 --> 00:00:38,900
Debes saber que JSX funciona esencialmente como HTML.

13
00:00:39,090 --> 00:00:41,940
Entonces tiene una sintaxis muy similar.

14
00:00:41,940 --> 00:00:45,000
Sin embargo, podemos ingresar a un modo JavaScript.

15
00:00:45,000 --> 00:00:48,120
mediante el uso de llaves en cualquier lugar de un marcado

16
00:00:48,120 --> 00:00:53,120
donde se espera un valor, como texto o un atributo.

17
00:00:53,250 --> 00:00:55,320
Ahora en este modo JavaScript,

18
00:00:55,320 --> 00:00:58,290
Podemos colocar cualquier expresión de JavaScript.

19
00:00:58,290 --> 00:01:01,200
Entonces, cualquier cosa que produzca un valor.

20
00:01:01,200 --> 00:01:05,550
Entonces podemos hacer referencia a variables, crear matrices u objetos,

21
00:01:05,550 --> 00:01:09,000
Podemos recorrer la matriz usando el método del mapa.

22
00:01:09,000 --> 00:01:10,890
o podemos usar operadores,

23
00:01:10,890 --> 00:01:13,050
como el operador ternario,

24
00:01:13,050 --> 00:01:15,960
lo que no está permitido, nuestras declaraciones.

25
00:01:15,960 --> 00:01:20,960
Entonces, en JSX, no puedes usar cosas como una declaración if/else,

26
00:01:20,970 --> 00:01:25,470
for bucles, un interruptor o cualquier otra declaración.

27
00:01:25,470 --> 00:01:28,140
Ahora, ¿qué es muy importante entender?

28
00:01:28,140 --> 00:01:33,140
es que una parte de JSX produce una expresión JavaScript.

29
00:01:33,540 --> 00:01:35,010
O en otras palabras,

30
00:01:35,010 --> 00:01:40,010
una parte de JSX es como cualquier otra expresión de JavaScript.

31
00:01:40,410 --> 00:01:43,440
Y esto tiene sentido porque ya aprendimos

32
00:01:43,440 --> 00:01:46,170
que JSX simplemente se convierte

33
00:01:46,170 --> 00:01:48,540
a una llamada de función de creación de elemento,

34
00:01:48,540 --> 00:01:52,350
que de hecho también es una expresión.

35
00:01:52,350 --> 00:01:56,250
Ahora bien, este hecho tiene dos implicaciones importantes.

36
00:01:56,250 --> 00:01:59,160
Primero, significa que podemos colocar otras piezas.

37
00:01:59,160 --> 00:02:02,130
de JSX dentro de las llaves.

38
00:02:02,130 --> 00:02:04,560
Entonces, dentro de la nota de JavaScript.

39
00:02:04,560 --> 00:02:06,960
Y repito, esto sólo es posible

40
00:02:06,960 --> 00:02:09,960
porque podemos poner cualquier expresión de JavaScript

41
00:02:09,960 --> 00:02:12,210
dentro de esas llaves

42
00:02:12,210 --> 00:02:16,740
y eso incluye las expresiones producidas por JSX.

43
00:02:16,740 --> 00:02:19,080
La segunda implicación del hecho

44
00:02:19,080 --> 00:02:21,900
que JSX produce una expresión

45
00:02:21,900 --> 00:02:26,490
es que podemos escribir JSX en cualquier lugar dentro de un componente.

46
00:02:26,490 --> 00:02:29,490
Por ejemplo, podemos asignar una parte de JSX.

47
00:02:29,490 --> 00:02:33,030
a una variable como en este fragmento de código.

48
00:02:33,030 --> 00:02:36,120
También podemos usarlo dentro de la declaración if/else,

49
00:02:36,120 --> 00:02:39,273
pasarlo a funciones y muchas otras cosas.

50
00:02:40,140 --> 00:02:45,140
Finalmente, una parte de JSX solo puede tener un elemento raíz.

51
00:02:45,180 --> 00:02:48,060
Básicamente, un elemento padre.

52
00:02:48,060 --> 00:02:50,490
Si necesita más que eso, por ejemplo,

53
00:02:50,490 --> 00:02:54,090
cuando necesita devolver dos elementos de un componente,

54
00:02:54,090 --> 00:02:57,060
puedes usar algo llamado Fragmento de React,

55
00:02:57,060 --> 00:02:59,013
del que hablaremos más adelante.

56
00:03:00,000 --> 00:03:02,760
Bien, y ahora veamos las diferencias.

57
00:03:02,760 --> 00:03:06,540
entre JSX y HTML normal.

58
00:03:06,540 --> 00:03:09,690
Ahora bien, en realidad no repasaré toda esta lista aquí.

59
00:03:09,690 --> 00:03:13,470
en este punto porque estos son sólo algunos muy simples,

60
00:03:13,470 --> 00:03:15,180
reglas sencillas,

61
00:03:15,180 --> 00:03:18,480
que se exploran mejor mediante el uso de código.

62
00:03:18,480 --> 00:03:21,000
Pero todavía quería incluir esta lista.

63
00:03:21,000 --> 00:03:23,430
en esta diapositiva aquí, para que puedas conservarla

64
00:03:23,430 --> 00:03:26,493
como referencia al descargar estas diapositivas.

65
00:03:27,330 --> 00:03:29,940
Nuevamente nos encontraremos con estas reglas.

66
00:03:29,940 --> 00:03:31,650
mientras seguimos escribiendo código,

67
00:03:31,650 --> 00:03:34,383
que es exactamente lo que vamos a hacer ahora.