Ahora, para tener una primera sensación.
sobre cómo React mantiene la interfaz de usuario sincronizada con el estado,
comparemos rápidamente la aplicación de consejos que creamos
en la primera sección,
con una implementación de JavaScript Vanilla
de la misma aplicación.
Así que aquí los tengo abiertos uno al lado del otro,
y si quieres seguirme,
De hecho, agregué este archivo vanillajavascript.html
directamente en la misma zona de pruebas de código
que utilizamos para crear esta aplicación de primeros consejos.
Así que aquí, en la carpeta de origen,
ahora existe este vanilla.js,
o en realidad el archivo vanilla-.html.
Y de nuevo, publicaré el enlace.
a este código sandbox en esta conferencia, ¿de acuerdo?
Entonces, en caso de que no recuerdes realmente lo que hicimos aquí,
siempre puedes pausar el video
y simplemente analiza este código aquí por un segundo por ti mismo.
Entonces, lo que quiero hacer ahora de nuevo,
es simplemente comparar rápidamente el código de React
que escribimos antes con este JavaScript Vanilla.
Ahora, irónicamente, esta implementación Vanilla JavaScript
en realidad está en un archivo HTML.
Entonces coloqué todos los archivos HTML.
y luego también el JavaScript directamente en un archivo HTML,
sólo para mantenerlo todo en el mismo lugar.
Pero esto ya nos muestra la primera diferencia.
entre las dos filosofías.
Así que aquí,
todo se hace básicamente en JavaScript,
así que incluso el JSX.
Básicamente, este tipo de HTML aquí
está escrito dentro de JavaScript.
Entonces JavaScript se encarga de todo.
Mientras esté aquí, en Vanilla JavaScript,
HTML todavía está a cargo.
Entonces tenemos un archivo HTML, y ese archivo HTML
Luego está incluyendo JavaScript en él.
Básicamente es al revés, ¿verdad?
Así que justo dentro de este HTML,
Todavía tenemos nuestro mismo H1 aquí, por consejo.
La única diferencia es que está vacío.
Mientras que aquí, incluimos ese estado de consejo,
luego tenemos el botón y el párrafo del mensaje.
Luego, dentro del guión,
entonces, dentro de la parte de JavaScript,
necesitamos, por supuesto,
luego seleccione manualmente estos tres elementos DOM.
Entonces seleccioné el elemento de consejo,
el botón y también este de aquí para el conteo.
Y por eso,
todos ellos necesitaban tener esta clase,
mientras estamos aquí, bueno, no necesitamos nada de eso.
No hay aquí ninguna clase en ninguno de estos elementos.
Y además no los estamos seleccionando manualmente, ¿verdad?
Luego tenemos esta función de obtener consejos,
a lo que llegaremos en un minuto,
y entonces todavía tenemos básicamente dos piezas
que podemos llamar estado.
Entonces tenemos un valor de conteo, que comienza en cero,
y un consejo.
Y estos son exactamente los mismos que aquí, estos estados.
Luego, finalmente, al final, también adjuntamos un detector de eventos.
Entonces esta función de obtener consejos aquí mismo.
Entonces lo adjuntamos al botón.
que seleccionamos aquí manualmente antes,
mientras aquí, en el JSX,
Lo hacemos usando este atributo al hacer clic aquí.
Así que desde el principio verás inmediatamente
que necesitamos hacer muchas cosas manualmente aquí,
que aquí, sucede de forma más automática.
Y nuevamente, que aquí realmente está el JavaScript.
que se encarga de todo,
mientras que aquí, sigue siendo HTML.
Pero de todos modos, vamos ahora a llegar aquí.
al corazón de la aplicación,
que es realmente esta función de obtener consejos.
Así como aquí, en nuestra implementación de React,
Empezamos obteniendo los datos.
Y luego actualizamos el servicio, o incluso el asesoramiento,
y los valores de conteo que definimos aquí abajo, ¿verdad?
Así que estamos actualizando el recuento aquí.
y el consejo aquí mismo.
Sin embargo, simplemente actualizando estos dos valores
Por supuesto, no hará nada.
Entonces la interfaz de usuario no cambiará.
cuando actualizamos estos valores de JavaScript.
Mientras que aquí, en este ejemplo de React,
tan pronto como actualicemos el consejo y el estado del conteo,
automáticamente, React mantuvo la interfaz de usuario
en sincronía con estos dos valores.
Y ese es básicamente el gran mensaje que recibimos.
de la conferencia anterior, ¿verdad?
Entonces React y todos estos otros frameworks front-end
son realmente buenos para mantener los datos sincronizados automáticamente
con la interfaz de usuario.
Y nuevamente, eso es exactamente lo que está sucediendo aquí.
Lo único que nos importa aquí es configurar los nuevos datos,
y eso es todo lo que hacemos.
React es el que automáticamente se encarga
de actualizar la interfaz de usuario
sin que tengamos que hacer nada.
Pero aquí, por supuesto,
en la implementación de Vanilla JavaScript,
Necesitamos hacerlo manualmente.
Por lo tanto, debemos mantener manualmente los datos sincronizados con la interfaz de usuario.
Entonces tenemos los datos aquí,
y luego usamos esos datos para actualizar el DOM manualmente.
Entonces llegamos aquí a nuestro elemento de conteo,
y el elemento de consejo
que también seleccionamos manualmente anteriormente,
y cambiamos su propiedad de contenido de texto,
que es simplemente una manipulación DOM normal.
Entonces aquí configuramos este como la variable de conteo,
y este a la variable consejo.
Y esta es realmente una diferencia fundamental.
y un cambio fundamental
en cómo construimos aplicaciones front-end.
Ahora bien, se podría argumentar que en este pequeño ejemplo,
hacer esto no es mucho trabajo,
y tal vez ni siquiera sea necesario aprender React.
Y estaría de acuerdo contigo
que, por supuesto, no necesitaríamos React
construir algo realmente pequeño y simple como esto.
Pero tan pronto como seamos un poquito más grandes que esto,
comienza a salirse de control.
Entonces tendríamos que seleccionar toneladas de elementos.
y realmente necesitaríamos crear mucho código adicional
que, con React, no tenemos que hacerlo,
de nuevo, porque automáticamente se encarga
de mantener los datos sincronizados con la interfaz de usuario.
Eso es realmente lo principal.
que quiero que tengas en cuenta de esta conferencia
y del anterior.
Asi que por su puesto,
siéntete libre de analizar todas las diferencias
que existen aquí en este código,
porque solo con esto,
Realmente puedes ver las dos filosofías diferentes en acción.
No voy a profundizar más en esto en este momento,
pero seria muy interesante
si te tomas unos minutos y realmente comparas
¿Qué está pasando aquí de este lado?
y sobre la implementación de React.
Y una vez que hayas terminado de hacer eso,
Ahora es el momento de finalmente aprender.
qué es realmente React con un poco más de detalle.
Espero verte pronto en la próxima conferencia.