Entonces, para terminar esta parte, quiero una vez más
haga una comparación rápida del código React que acabamos de escribir
con una implementación equivalente de JavaScript Vanilla
de la misma aplicación.
Y esta implementación de JavaScript Vanilla la realicé
le di al principio de esta sección.
Entonces lo colocamos directamente en la carpeta pública.
Así que ahora abramos eso y abrámoslo aquí en el sitio.
Bien, nuevamente, la implementación de JavaScript Vanilla es
dentro de un archivo HTML, donde aquí tenemos primero el HTML
y luego separó el JavaScript.
Entonces este HTML puede resultar familiar.
ya que es bastante similar por supuesto a este JSX.
Lo único que no tenemos aquí es el botón.
para abrir y cerrar el componente.
Entonces no incluí esa parte.
Pero de todos modos aquí comienza nuestro script.
entonces tenemos los mismos mensajes
y luego aquí tenemos que seleccionar manualmente todos
de estos elementos DOM basados
sobre las clases que les dimos.
Luego tenemos esta variable let aquí con un paso
que luego actualizaremos
aquí abajo en estas funciones del controlador de eventos.
Entonces aquí tomamos los elementos que seleccionamos manualmente.
y usé agregar detector de eventos en ellos.
Tenemos una lógica similar dentro de estos eventos.
controladores para básicamente actualizar la variable de paso.
Entonces cuando volvemos atrás, el paso es menos uno.
y cuando avanzamos, el paso es más uno.
Esto es un poco similar a lo que tenemos aquí.
Entonces estos controladores de eventos, pero la gran diferencia es
que aquí todo lo que tenemos que hacer es simplemente actualizar el estado.
Y entonces React mantendrá la interfaz de usuario sincronizada.
Donde aquí actualizamos por primera vez la variable de estado.
y luego tenemos que llamar a esta función
que hace la manipulación DOM.
Así que aquí dentro de la función de actualización de valores de UI
ahora necesitamos actualizar manualmente el DOM
y mantenerlo sincronizado con este estado de paso
porque, por supuesto, tan pronto como hagamos clic en estos botones aquí
si todo lo que hiciéramos fuera actualizar este valor
entonces no pasaría nada en la interfaz de usuario.
Entonces, después de hacer eso, debemos
llame a esta función aquí.
O, por supuesto, también podríamos tener todos
de este código aquí, pero como necesitamos el mismo código aquí
Simplemente lo coloco en esta función.
Entonces aquí
Actualizamos manualmente el contenido del texto del mensaje.
Mientras que aquí en JSX, simplemente se declara
justo en el marcado.
Entonces aquí tenemos un código imperativo que le dice a JavaScript
paso a paso lo que hay que hacer.
Así que actualice el contenido del texto,
luego configure la lista de clases,
establezca esta lista de clases y establezca esta lista de clases.
Así que configura la clase como activa.
en caso de que el paso esté actualmente activo.
Mientras esté aquí, todo eso acaba de declararse en JSX.
No le decimos a React que haga nada,
solo escribimos que aquí el paso
debe ser igual al paso actual
y que aquí la clase activa
debe estar dentro del nombre de la clase
si el paso es mayor igual a uno,
pero no necesitamos la manipulación imperativa de DOM
que tenemos aquí.
Así que hablamos de esto muchas veces.
y creo que esto es suficiente en este momento,
pero claro seria una buena idea
para que sigas comparando ahora estas dos implementaciones.
Sólo hay una pequeña cosa que quiero hacer aquí.
que se remonta a la conferencia anterior
donde te dije que cada componente tiene
y gestiona su propio estado.
Así que lo que quiero hacer ahora es demostrárselo en código.
Así que tomemos todo este código
y colocarlo en un nuevo componente,
que llamaremos paso.
O en realidad llamemos a este componente aquí Paso.
Entonces no tendremos que copiar y pegar tanto.
Entonces eliminemos esto
y en realidad lo llaman pasos
ahora a la derecha.
Y ahora aquí hacemos nuestra aplicación nuevamente.
entonces exportar
por defecto
función
aplicación
y luego esta aplicación
Básicamente incluirá dos pasos.
Entonces digamos que aquí tenemos una diferencia
y luego queremos tener
los pasos dos veces.
Ahora solo necesitamos hacer algunos cambios más.
Ahora que tenemos dos componentes en la misma página
en realidad
devolver una oreja diferencial para que el botón
y luego estos pasos están todos en el mismo lugar.
Y luego solo un cambio rápido en el CSS, por favor.
Así que aquí abajo en el cierre
eliminemos esta línea de código.
Muy bien, cerremos eso.
Ponlo aquí a un lado.
Y luego, cuando recargues, verás
que ahora tenemos dos pasos en la página.
Entonces reutilizamos con éxito nuestro componente de pasos.
Entonces esta ya no es la aplicación.
Nuevamente, son pasos, y podemos verlo muy bien aquí.
en las herramientas de desarrollo de React.
Ahora tenemos un árbol de componentes un poco más grande.
Entonces tenemos la aplicación y luego tiene dos componentes secundarios.
Entonces, pero lo que quería mostrarles es que
a medida que cambiamos el estado en este, por ejemplo
El estado aquí seguirá siendo el mismo.
Y aunque ambos son componentes de pasos
el estado en cada uno de ellos está completamente aislado.
Entonces, por supuesto, también puedo cerrar este,
y éste permanece abierto.
Y obviamente también podemos ver eso aquí abajo.
en las herramientas de desarrollo
incluso con un poco más de espacio.
sí. Entonces los primeros pasos aquí.
el estado es tres y es visible.
Entonces eso es cierto aquí.
Mientras que el segundo, el estado es uno
y no se ve.
Bien, eso fue solo una pequeña y rápida demostración.
Y ahora que hemos usado state un par de veces aquí
es hora de que practiques el estado
por tu cuenta en el próximo desafío de codificación.