Entonces, en esta sección,
Comenzaremos a aprender sobre eventos y estado.
mediante la construcción de componentes muy simples
donde podemos navegar a través de algunos pasos.
Y ahora, en esta conferencia,
Comience por construir la parte estática de ese componente.
Ahora, para construir ese componente,
De hecho, crearemos un proyecto completamente nuevo.
usando Create-React-App.
Entonces, si estás en Windows,
Continúe y abra el símbolo del sistema.
Y si estás en una Mac, simplemente abre tu terminal.
Y recuerda que en la terminal,
siempre estás en una carpeta.
Para que puedas ver qué carpeta hay aquí.
en su símbolo del sistema.
Y luego desde allí, simplemente navegue hasta la carpeta
donde deseas crear tus nuevos proyectos.
Y para mí, eso es, nuevamente, el escritorio.
Así que recuerda que puedes ver todas las carpetas.
al que puedes navegar desde aquí.
Básicamente, estoy aquí en esta carpeta de inicio.
Y entonces puedo navegar a cualquiera de estos.
Y eso es lo que voy a hacer con el CD.
Y por cierto, de nuevo, en Windows
eso es dir en lugar de ls.
Pero de todos modos, ahora navegaré hasta el escritorio.
Y ahora aquí, creemos nuestro nuevo proyecto.
Esa es npx Create-React-App y ahora aquí,
Recuerde bloquear la versión número cinco.
para que todos estemos construyendo lo mismo aquí.
Entonces usando las mismas versiones.
Y luego simplemente nombraré este proyecto aquí, pasos.
Entonces presiona enter
y luego Create-React-App está haciendo lo suyo.
Y mientras tanto, echemos un vistazo al componente.
que vamos a construir.
Entonces ese es este de aquí.
Entonces es básicamente este componente donde tenemos
estos tres pasos.
Y como dije al principio, básicamente podemos navegar
a través de ellos haciendo clic aquí en estos botones.
Entonces, cuando hacemos clic en Siguiente, pasamos al paso número dos.
Y entonces podemos postularnos para puestos de trabajo.
Entonces, primero aprendimos a reaccionar y luego postulamos a trabajos.
y luego invertir todos sus nuevos ingresos.
Entonces podemos hacer clic en estos botones aquí.
Entonces tenemos algo de interactividad aquí.
y luego también podemos cerrar y abrir este componente nuevamente.
Muy bien, nuevamente, en esta conferencia, comenzaremos
construyendo la parte estática de este componente.
Entonces solo el componente básicamente sin ninguna interactividad.
Así que simplemente escribo el JSX.
Pero de todos modos, Create-React-App ya ha finalizado.
Rápidamente cambiaré nuevamente el nombre de la carpeta aquí.
y luego arrástrelo y suéltelo aquí en el código VS.
Y como siempre, también puedes abrirlo aquí mismo.
Bien, entonces limpiemos un poco nuestros archivos de inicio.
Y de hecho, borraré casi todo lo que hay aquí.
Entonces simplemente dejaremos app.js e index.js.
para que todos puedan ir a la basura.
Y ahora abramos index.js.
Ahora bien, esta vez no escribiremos todos
de esto aquí otra vez a mano
porque ahora ya sabes cómo funciona.
Y básicamente podemos mantener el código aquí.
que Create-React-App puso allí para nosotros.
Sólo tenemos que deshacernos de esta parte.
y también de esta importación.
Ahora también nos deshicimos del archivo index.css.
Entonces esta importación en este momento no funciona.
pero en realidad tengo un archivo CSS en los archivos iniciales.
Así que abramos los archivos que descargamos.
al principio.
Luego, aquí en los archivos de inicio de pasos, tenemos estos dos.
Así que copiémoslos.
Y luego, en pasos, coloquémoslos aquí en la fuente.
Y luego muevamos también este vanilla.HTML
al público.
Así que más adelante veremos qué es eso.
Bien, entonces regresamos aquí.
Observe cómo estamos importando esta aplicación desde este archivo app.js.
Y ese es este.
Pero aquí, limpiemos todo.
Y una vez más empecemos desde cero.
creando un nuevo componente.
Y como siempre, ese componente será el componente de la aplicación.
Entonces funciona la aplicación y ya ves que usualmente usamos
un componente llamado aplicación como componente raíz
de nuestra aplicación.
Básicamente, como el componente que es el componente principal.
de todos los demás componentes.
Devolvamos algo aquí.
Hola reaccionar.
Y finalmente lo único que tenemos que hacer es exportar esta función.
de aquí.
Entonces exporte el valor predeterminado, para que ahora index.js pueda importarlo aquí
y entregarlo al dom.
Así que de nuevo, como escribimos antes a mano.
pero ahora dejaremos el código aquí.
Por supuesto, no siempre tenemos que hacer todo manualmente.
Ahora vayamos aquí a nuestro terminal de código VS integrado.
Así que con sólo hacer clic aquí, y como ves
esto ya está automáticamente en nuestra carpeta de proyecto
o al menos debería serlo.
Así que ahora no hay necesidad de navegar a ningún lado.
Todo lo que necesitamos hacer para iniciar un proyecto es ejecutar NPM start.
Entonces esto abrirá automáticamente una nueva pestaña del navegador.
Y sí, aquí está.
Este es el contenido de nuestra app.js.
Muy bien, solo nos damos un poco más de espacio aquí.
Y entonces notarás que el nombre del archivo aquí
app.js es exactamente el nombre del componente.
Y entonces esto va a ser un patrón
que veremos a lo largo del curso.
Pero de todos modos, no escribamos juntos el JSX aquí.
para que terminemos con algo como esto otra vez
Simplemente sin la interactividad.
Entonces comenzamos con un div.
que tiene el nombre de clase de pasos.
Y si estás interesado en CSS, entonces, por supuesto.
asegúrese de revisar el archivo CSS que acabamos de incluir.
Y ahora este div aquí tiene tres elementos secundarios.
entonces tiene un div con la clase de números.
Y aquí tendremos estos números.
1, 2, 3.
Y ahora, para hacer esto un poco más rápido, simplemente
Duplica el código aquí, que como te expliqué antes
Simplemente podemos hacerlo con este comando aquí.
Así que copie la línea hacia abajo, creo que en realidad lo personalicé.
este comando aquí mismo.
Entonces para ti probablemente sea otro, pero
Debería ver cuál es aquí.
Y si quieres, también puedes personalizar todos tus atajos
aquí mismo.
bueno. Pero en fin, pasemos ahora al siguiente.
Y aquí realmente queremos un párrafo,
entonces un párrafo con el nombre de clase del mensaje.
Usemos solo un marcador de posición por ahora.
Y finalmente, nuevamente un div para los botones.
Entonces aquí tendremos un elemento de botón.
vamos a ver.
Sí, este primero dice anterior.
y luego otro que dice siguiente.
Así que aquí básicamente tenemos los números.
luego el mensaje y los botones.
Y entonces lo que tenemos aquí ya está buscando
bastante cerca de eso.
Ahora los botones aquí no son morados como en la demostración.
y eso es porque luego tendremos otro botón
que no debería tener ese color de fondo.
Y entonces agreguemos esos estilos aquí directamente.
a los dos botones.
Y con esto, también podemos practicar de nuevo.
cómo agregamos estilos a algunos elementos JSX individuales.
Así que recuerda que lo hacemos pasando básicamente
el accesorio de estilo en este elemento.
Entonces entramos en modo JavaScript.
y luego aquí podemos definir nuestro objeto de estilos.
Entonces color de fondo
y aquí el color es 7950F2.
Y también el color del texto, pongámoslo en blanco,
que es FFF y, por supuesto, debe ser una cadena,
ya que nuevamente, esto es solo un objeto JavaScript.
Ahora, en caso de que te preguntes por qué estos colores
están tan bien resaltados, eso es simplemente porque tengo
Esta extensión se llama resaltado de color.
Uno muy popular con 5 millones de instalaciones.
Y si quieres replicar la apariencia de esto
entonces también puedes instalar eso.
Pero aquí, copiemos todo esto.
para hacerlo más rápido.
próximo.
Y sí, eso se parece bastante.
Todo lo que nos falta ahora es lo más destacado aquí.
del paso actual.
Así que aquí estamos en el paso número uno, y por lo tanto
ahora está resaltado con este color púrpura.
Y para eso tenemos otro nombre de clase.
Entonces, clase activa ahora está bien, ahora finalmente, también
agregue el mensaje aquí.
Y esos mensajes están en realidad en el archivo CSS.
que te proporcioné.
Así que coloqué este objeto JavaScript aquí como comentario.
Entonces peguemos eso aquí fuera del componente.
Entonces estos datos no dependen de nada.
que está dentro del componente.
Y por eso debería estar ubicado afuera.
porque de lo contrario cada vez que aqui esa disfuncion
se ejecuta, estos datos, por lo que esta matriz se creará nuevamente
pero, por supuesto, aprenderemos todo sobre eso un poco más adelante.
Entonces cuando se crean objetos
y cuándo se ejecutan estas funciones, etc.
Así que ahora solo estamos aprendiendo
cómo usamos estas funciones de reacción
pero todavía no cómo funcionan detrás de escena.
Entonces, la mecánica de reaccionar todavía está un poco oculta para nosotros.
Apenas estamos aprendiendo cómo usamos las diferentes funciones.
Así que ahora necesitamos este mensaje aquí básicamente.
Entonces el primer elemento de la matriz aquí
pero no vamos a simplemente copiarlo, ¿verdad?
Por eso queremos leerlo dinámicamente.
Y entonces escuchemos dentro de este componente, definamos una variable
lo que nos dirá en qué paso nos encontramos actualmente.
Así que hagamos un paso constante y pongámoslo en uno.
Y por cierto, es este paso aquí.
que querremos actualizar más tarde
mientras hacemos clic en estos botones.
Pero por ahora sólo estamos construyendo aquí la parte estática.
Así que simplemente lo configuramos manualmente en uno.
Entonces escribamos el paso y luego el número del paso.
y luego leamos el valor de la matriz.
Esos son mensajes en el paso de posición.
Y necesitamos menos uno aquí.
porque, por supuesto, la matriz tiene base cero.
¿está bien? Ah, hermoso.
Entonces, si ahora lo cambiamos manualmente aquí a dos
entonces eso cambiará el mensaje aquí.
Pero lo que no cambió es que este paso número dos
no fue marcado como activo.
Básicamente, ahora necesitamos configurar los estilos aquí.
sobre estos elementos de forma condicional.
Entonces, si simplemente agregamos el nombre de la clase activa a todos ellos
entonces siempre estarían activos
pero eso no es lo que queremos.
Así que básicamente necesitamos determinar esta cadena aquí.
basado en una condición.
Así como aprendimos en la sección anterior.
Así que entremos en modo JavaScript.
para que podamos escribir una plantilla literal.
Y entonces aquí produciremos activo o nada.
Así que básicamente ingresemos al modo JavaScript.
de la plantilla, literal.
Y luego preguntemos si el paso es mayor o igual a uno.
Y si es así, entonces el resultado de la operación.
debería ser la cadena de active.
Y si no, pues nada.
Entonces ves que este de aquí ya se puso morado.
Y eso se debe, por supuesto, a que dos es mayor que uno.
Bien, agreguemos esto a todos ellos.
Pero aquí, por supuesto, tenemos que adaptarnos y sí,
bien, eso está funcionando.
Entonces si tuviéramos el número tres
entonces los tres se volverían activos.
¿está bien?
Y veamos esto rápidamente.
Como ves ahora este tiene la clase de activo.
y estos todavía tienen el atributo de clase
porque lo especificamos aquí
pero entonces no hay ningún compromiso.
Básicamente, eso es solo esta cadena vacía que devolvemos.
en estos dos casos.
excelente. Esa es la parte estática de la aplicación.
Pero claro, ahora queremos navegar aquí.
haciendo clic en estos botones
Entonces no cambiaremos manualmente aquí esta variable de paso, ¿verdad?
Y eso significa que ahora es el momento de aprender.
cómo podemos manejar los eventos de clic en estos botones.
Y eso es lo que la próxima conferencia
se va a tratar.