en este punto,
Hemos utilizado JSX para describir la apariencia.
de algunos componentes
y también hemos utilizado algo de JavaScript dentro de ellos.
Y ahora que tenemos un poquito
de experiencia en la escritura de componentes, quiero tomarme un minuto
y volvamos al hecho de que JSX combina
HTML, CSS y JavaScript en un solo bloque de código.
Porque quizás te estés preguntando,
¿Por qué a React se le ocurrió esta idea en primer lugar?
Entonces, ¿por qué no conservar HTML, CSS y JavaScript?
en lugares separados, como siempre lo hemos hecho antes?
Y esto puede parecer una pregunta trivial,
algo que crees que no es realmente relevante en absoluto
pero en realidad es profundamente relevante entender por qué
React fue diseñado completamente en torno a componentes.
Y entendamos este tema desde el principio.
Así, desde el auge de las aplicaciones interactivas de una sola página.
Antes de las aplicaciones de una sola página, siempre teníamos un archivo para HTML,
uno para JavaScript y otro para CSS.
Básicamente, una tecnología por archivo.
Ésa era nuestra tradicional separación de preocupaciones.
Y estoy bastante seguro de que al igual que yo,
Así es como aprendiste por primera vez sobre desarrollo web.
Sin embargo, a medida que las páginas se volvieron cada vez más interactivas,
se convirtieron en aplicaciones de una sola página,
donde JavaScript comenzó a determinar la interfaz de usuario
y el contenido en general.
O en otras palabras,
JavaScript se hizo cada vez más a cargo del HTML.
Y podemos ver eso aquí en este ejemplo de código realmente pequeño,
donde el contenido y la presentación de estos
Los elementos HTML están realmente completamente determinados.
por el código JavaScript.
De hecho, están estrechamente unidos.
Entonces el HTML ni siquiera tiene sentido.
sin el JavaScript aquí.
Ahora bien, los detalles de este código realmente no son importantes.
Entonces, si no puedes leer este código, no hay ningún problema.
Mi punto aquí es que si JavaScript está a cargo
del HTML de todos modos, por lo que si la lógica y la interfaz de usuario son tan
estrechamente unidos, entonces ¿por qué deberíamos mantenerlos?
separados en estos diferentes archivos
¿Y en diferentes bloques de código?
Bueno, la respuesta a esa pregunta.
es lo que nos dio los componentes de React y JSX.
Entonces, el hecho de que la lógica y la interfaz de usuario estén tan acopladas
en las aplicaciones web modernas, es realmente la razón por la cual
un componente de React contiene los datos, la lógica
y la apariencia de una pieza de la interfaz de usuario.
De hecho, es la razón fundamental
por qué React tiene que ver con componentes.
Y lo mismo es cierto también para
la mayoría de los otros frameworks front-end modernos.
Ahora volviendo a algún código,
En este ejemplo de React podemos ver cómo JavaScript
y el marcado HTML conviven muy felices
en este único componente.
Entonces este componente tiene algo de lógica JavaScript,
tiene JSX y luego dentro de ese JSX,
hay otro bloque más de JavaScript,
que a su vez tiene aún más JSX dentro.
Entonces todo está mezclado
pero todo sigue funcionando muy bien.
Así que el contenido y la lógica están estrechamente unidos.
y por eso tiene sentido que estén ubicados aquí.
Y coubicar simplemente significa que las cosas que cambian juntas
deben ubicarse lo más cerca posible entre sí.
Y en el caso de las aplicaciones React, eso significa que en lugar de eso
de un perfil tecnológico, tenemos un perfil de componente.
Entonces, un componente que contiene lógica de datos y apariencia,
todos mezclados.
Ahora bien, cuando React y JSX aparecieron por primera vez hace mucho tiempo,
Mucha, mucha gente simplemente odiaba la apariencia de JSX.
Y odiaron que estemos tirando separaciones
de preocupaciones por la ventana.
Pero en realidad, ¿lo somos realmente?
¿Realmente no existe separación de preocupaciones en React?
Bueno, creo que la gente que dice
que React no tiene separación de preocupaciones, lo entendió todo mal.
Porque React en realidad tiene preocupaciones separadas.
Simplemente no es una preocupación por expediente,
ya que tradicionalmente teníamos una sola preocupación por componente.
Entonces, cada componente es, de hecho,
Solo le preocupa una parte de la interfaz de usuario.
Luego, dentro de cada uno de estos componentes,
Por supuesto, todavía tenemos las tres preocupaciones de HTML,
CSS y JavaScript están todos mezclados, como hemos estado comentando.
Entonces, en comparación con la tradicional separación de intereses,
Este es un paradigma completamente nuevo.
al que mucha gente no estaba acostumbrada al principio.
Pero ahora, muchos años después,
Todos nos acostumbramos a esto y funciona muy bien.
Entonces tener toda la información sobre un determinado componente
en un solo lugar,
realmente funciona de una manera asombrosa.
ahora a la derecha.
Entonces esta fue una conferencia larga,
más de lo que esperaba,
solo para llegar a esta conclusión
que React en realidad tiene separación de preocupaciones.
Simplemente una separación diferente de preocupaciones.
Pero todavía espero que les haya gustado cómo llegamos.
en esa conclusión, a lo largo de este video.
Porque espero que esto te haya dado mucho.
de conocimientos fundamentales adicionales de React.