Hemos escrito algunas piezas de JSX.
Ya en este curso, pero ¿qué es realmente JSX?
¿Y por qué es tan importante en React?
Bueno, cuando hablamos por primera vez de componentes,
hablamos de cómo un componente contiene sus propios datos,
lógica y apariencia.
Y eso tiene sentido, ¿verdad?
Porque si un componente es una parte de la interfaz de usuario,
significa que debemos ser capaces de describir exactamente
cómo se ve ese componente.
Y ahí es donde entra en juego JSX.
Entonces, JSX es una sintaxis declarativa que usamos
para describir cómo se ven los componentes
y cómo funcionan en función de sus datos y lógica.
Entonces, se trata de la apariencia de los componentes.
En la práctica, esto significa que cada componente
debe devolver un bloque de JSX,
que React luego usará para representar el componente en la interfaz de usuario.
Ahora, mirando este código,
Este JSX se parece mucho a HTML, ¿verdad?
Pero, de hecho, JSX es una extensión de JavaScript.
que nos permite combinar partes de HTML, CSS,
y JavaScript, todo en un solo bloque de código.
Básicamente, podemos escribir HTML e incrustar algunas piezas.
de JavaScript cuando sea necesario, por ejemplo,
para hacer referencia a algunas variables de JavaScript
e incluso podemos hacer referencia a otros componentes de React
para que luego podamos combinar Nest
y reutilizar múltiples componentes.
Pero ahora podrías estar pensando
si React es un marco de JavaScript
Entonces, ¿cómo entenderá este código HTML?
Bueno, recuerda que JSX es solo una extensión de JavaScript,
lo que significa que hay una manera sencilla
de convertir JSX a JavaScript.
Esto se hace mediante una herramienta llamada Babel,
que fue incluido automáticamente
en nuestra aplicación de Create-React-App.
Y el resultado de esta conversión parece algo
como este código a la derecha
donde se convirtió cada elemento JSX
a una llamada de función React.createElement.
¿Y esto te resulta familiar?
Bueno, espero que así sea.
porque esto es exactamente lo que devolvimos
desde el componente de la aplicación en la conferencia pura de React.
Entonces, en esa conferencia donde no pudimos usar JSX
porque no teníamos esa herramienta Babel.
Pero de todos modos, esta conversión es necesaria.
porque los navegadores, por supuesto, no entienden JSX.
Sólo entienden HTML.
Entonces, detrás de escena, todo el JSX que escribimos se convierte
en muchas llamadas a funciones anidadas de React.createElement.
Y estas llamadas a funciones son lo que al final,
crear los elementos HTML que vemos en pantalla.
Ahora, lo que esto significa es que realmente podríamos usar React
sin JSX en absoluto.
Entonces, podríamos simplemente escribir manualmente
estas funciones createElement en lugar de JSX
pero eso no parece muy divertido, ¿verdad?
También hace que el código sea muy difícil de leer.
y entender.
Y entonces, en realidad, todo el mundo simplemente usa JSX.
Muy bien, ahora que sabemos de qué se trata JSX,
volvamos a ese primer párrafo donde digo
que JSX es una sintaxis declarativa.
Entonces, ¿qué significa realmente que JSX sea declarativo?
Bueno, antes de que podamos entender qué significa declarativo,
Primero tenemos que revisar qué significa imperativo.
Entonces, cuando intentamos crear interfaces de usuario usando JavaScript básico,
Por defecto utilizaremos un enfoque imperativo.
Esto significa que seleccionamos elementos manualmente,
atraviesa el DOM y adjunta controladores de eventos a los elementos.
Luego, cada vez que sucede algo en la aplicación.
como un clic en el botón,
Le damos al navegador instrucciones paso a paso.
sobre cómo mutar esos elementos del pulgar
hasta llegar a la interfaz de usuario actualizada deseada.
Entonces, en el enfoque imperativo,
Básicamente le decimos al navegador exactamente cómo hacer las cosas.
Sin embargo, hacer esto en una aplicación compleja
es completamente inviable
por todas las razones que hemos aprendido antes.
Y recuerda que esa es la razón por la que los frameworks
como React existe en primer lugar
y es por eso que React eligió utilizar un enfoque declarativo
para construir interfaces de usuario.
Entonces, un enfoque declarativo consiste simplemente en describir
cómo debería verse la interfaz de usuario en todo momento,
siempre basado en los datos actuales que están en el componente.
Y pronto aprenderemos que estos datos son accesorios y estados.
Y nuevamente, básicamente, usamos JSX para describir la interfaz de usuario.
basado en accesorios y estado.
Entonces los datos que están actualmente en el componente
y todo eso sucede sin ninguna manipulación DOM.
Entonces, no hay selectores de consultas,
sin oyentes de eventos publicitarios, sin lista de clases,
No hay propiedades de contenido de texto en ninguna parte para ver aquí.
porque, de hecho, React está básicamente a una gran abstracción de distancia.
desde el DOM, para que nosotros, desarrolladores
Nunca tendrás que tocar el DOM directamente.
En cambio, pensamos en la interfaz de usuario como un reflejo
de los datos actuales y dejar que React sincronice automáticamente
la interfaz de usuario con esos datos.
Entonces, en esencia, la diferencia entre imperativo
y declarativo es que en el enfoque declarativo,
Usamos JSX para decirle a React lo que queremos ver en la pantalla.
pero no cómo lograrlo paso a paso.
React puede resolver eso por sí solo, básicamente.
Y esto tiene muchas, muchas ventajas.
como veremos a lo largo del curso.