Muchos principiantes se confunden bastante
cuando empiezan a usar JSX en su propio código.
Y, de hecho, JSX puede ser un poco complicado de entender.
y dominar.
Pero es por eso que estoy aquí en su sitio,
ayudándote en el camino.
Entonces, revisemos rápidamente las reglas de cómo funciona JSX.
Ahora, hay algunas reglas generales de JSX.
y hay algunas reglas
sobre en qué se diferencia JSX de HTML.
Y empezando por las reglas generales,
Debes saber que JSX funciona esencialmente como HTML.
Entonces tiene una sintaxis muy similar.
Sin embargo, podemos ingresar a un modo JavaScript.
mediante el uso de llaves en cualquier lugar de un marcado
donde se espera un valor, como texto o un atributo.
Ahora en este modo JavaScript,
Podemos colocar cualquier expresión de JavaScript.
Entonces, cualquier cosa que produzca un valor.
Entonces podemos hacer referencia a variables, crear matrices u objetos,
Podemos recorrer la matriz usando el método del mapa.
o podemos usar operadores,
como el operador ternario,
lo que no está permitido, nuestras declaraciones.
Entonces, en JSX, no puedes usar cosas como una declaración if/else,
for bucles, un interruptor o cualquier otra declaración.
Ahora, ¿qué es muy importante entender?
es que una parte de JSX produce una expresión JavaScript.
O en otras palabras,
una parte de JSX es como cualquier otra expresión de JavaScript.
Y esto tiene sentido porque ya aprendimos
que JSX simplemente se convierte
a una llamada de función de creación de elemento,
que de hecho también es una expresión.
Ahora bien, este hecho tiene dos implicaciones importantes.
Primero, significa que podemos colocar otras piezas.
de JSX dentro de las llaves.
Entonces, dentro de la nota de JavaScript.
Y repito, esto sólo es posible
porque podemos poner cualquier expresión de JavaScript
dentro de esas llaves
y eso incluye las expresiones producidas por JSX.
La segunda implicación del hecho
que JSX produce una expresión
es que podemos escribir JSX en cualquier lugar dentro de un componente.
Por ejemplo, podemos asignar una parte de JSX.
a una variable como en este fragmento de código.
También podemos usarlo dentro de la declaración if/else,
pasarlo a funciones y muchas otras cosas.
Finalmente, una parte de JSX solo puede tener un elemento raíz.
Básicamente, un elemento padre.
Si necesita más que eso, por ejemplo,
cuando necesita devolver dos elementos de un componente,
puedes usar algo llamado Fragmento de React,
del que hablaremos más adelante.
Bien, y ahora veamos las diferencias.
entre JSX y HTML normal.
Ahora bien, en realidad no repasaré toda esta lista aquí.
en este punto porque estos son sólo algunos muy simples,
reglas sencillas,
que se exploran mejor mediante el uso de código.
Pero todavía quería incluir esta lista.
en esta diapositiva aquí, para que puedas conservarla
como referencia al descargar estas diapositivas.
Nuevamente nos encontraremos con estas reglas.
mientras seguimos escribiendo código,
que es exactamente lo que vamos a hacer ahora.