En la segunda parte de esta sección,
ahora construyamos nuestro primer proyecto
que tiene cierta interactividad real.
Y vayamos directo a ello.
Y ahora ya conoces el procedimiento.
Entonces, si estás en Windows, abre el símbolo del sistema.
Si estás en una Mac, abre tu terminal, por favor.
Y luego, como siempre, navega hasta la carpeta.
donde deseas crear tu proyecto.
Entonces ese es mi escritorio.
Y luego allí, ejecute NPX, create-react-app.
Y luego especifique la versión número cinco aquí.
Y finalmente el nombre del proyecto,
que va a ser la lista de viajes.
Luego presione Enter y luego deje que create-react-app haga su trabajo.
Y mientras tanto, te haré un recorrido rápido.
de la aplicación que vamos a construir.
Entonces esta es la aplicación Far Away.
que es una lista de viajes simple donde podemos agregar
todos los elementos que necesitamos para nuestro próximo viaje.
Entonces, por ejemplo, digamos que necesitamos dos tarjetas de embarque.
que realmente no podemos olvidar,
y luego podemos presionar enter o hacer clic aquí.
Y luego ese elemento se agrega aquí a la lista.
Y también ves que aquí abajo tenemos estas estadísticas.
eso acaba de ser actualizado.
Entonces eso ya es algo de interactividad.
pero, por supuesto, podemos hacer más.
Entonces, por ejemplo, digamos que no necesitamos
el cargador por alguna razón,
Entonces podemos simplemente hacer clic allí y desaparecerá.
También podemos marcar estos elementos como completados,
Así que básicamente está lleno.
Entonces digamos que ya empacamos ese y aquel,
y luego aquí abajo dice que ya empacamos dos
que es el 50%, pero hay aún más.
Entonces también podemos ordenar por estas tres cosas aquí.
Entonces ingrese el orden o por descripción o por el estado de empaquetado.
Y entonces los artículos empaquetados aquí aparecen al final.
Y finalmente, tal vez una vez que regresemos de nuestro viaje.
y queremos preparar el próximo,
podemos borrar toda la lista de una vez.
Luego nos pregunta si estamos seguros y sí, lo estamos.
Y de hecho, entonces nuestra lista queda completamente vacía.
y eso es.
Así que creo que este es un pequeño proyecto realmente agradable.
para que aprendamos un poco más de interactividad,
y tiene todas estas características agradables pero simples
que vamos a construir.
y encima de eso,
También me gusta mucho este bonito diseño aquí.
Es un poco retro, lo cual creo que realmente encaja.
la vibra de esta aplicación.
Y ahora, antes de empezar a escribir cualquier código,
en realidad echemos un vistazo a cómo
Podemos dividir todo este diseño en componentes.
Entonces esta primera gran parte amarilla,
Creo que podemos llamar a esto el logo de la aplicación.
Y entonces vamos a crear un componente.
llamado logo solo para esta parte.
Luego, a continuación, claramente tenemos alguna forma aquí.
y ahí es donde vamos a poner estos elementos.
Entonces, otro componente más.
A continuación, tenemos esta lista completa.
que creo que se puede llamar PackingList.
Y luego allí cada uno de estos elementos.
bien se llama simplemente artículo.
Quizás podríamos llamarlo artículo de embalaje,
pero lo veremos una vez que lleguemos al código.
Finalmente aquí abajo tenemos esta otra área.
que creo que podemos llamar simplemente Estadísticas o estadísticas.
Entonces así es como vamos a romper.
esta interfaz de usuario en componentes.
Y hablaremos mucho más sobre cómo hacemos esto realmente.
Entonces, ¿cómo llegamos a estos diferentes componentes?
Pero ese no es el foco de esta aplicación.
Aquí sólo queremos trabajar un poco más con el estado,
con eventos, y también aprender
sobre cómo podemos manejar los envíos de formularios.
Entonces, si eso suena divertido, sigamos adelante rápidamente.
a la siguiente conferencia y comience a implementar este diseño.