1 00:00:01,140 --> 00:00:03,480 En la segunda parte de esta sección, 2 00:00:03,480 --> 00:00:05,580 ahora construyamos nuestro primer proyecto 3 00:00:05,580 --> 00:00:08,190 que tiene cierta interactividad real. 4 00:00:08,190 --> 00:00:10,743 Y vayamos directo a ello. 5 00:00:12,060 --> 00:00:14,100 Y ahora ya conoces el procedimiento. 6 00:00:14,100 --> 00:00:17,070 Entonces, si estás en Windows, abre el símbolo del sistema. 7 00:00:17,070 --> 00:00:20,283 Si estás en una Mac, abre tu terminal, por favor. 8 00:00:21,240 --> 00:00:23,760 Y luego, como siempre, navega hasta la carpeta. 9 00:00:23,760 --> 00:00:25,983 donde deseas crear tu proyecto. 10 00:00:27,210 --> 00:00:28,980 Entonces ese es mi escritorio. 11 00:00:28,980 --> 00:00:33,980 Y luego allí, ejecute NPX, create-react-app. 12 00:00:36,150 --> 00:00:39,810 Y luego especifique la versión número cinco aquí. 13 00:00:39,810 --> 00:00:42,660 Y finalmente el nombre del proyecto, 14 00:00:42,660 --> 00:00:44,913 que va a ser la lista de viajes. 15 00:00:46,110 --> 00:00:51,000 Luego presione Enter y luego deje que create-react-app haga su trabajo. 16 00:00:51,000 --> 00:00:53,910 Y mientras tanto, te haré un recorrido rápido. 17 00:00:53,910 --> 00:00:56,460 de la aplicación que vamos a construir. 18 00:00:56,460 --> 00:00:58,770 Entonces esta es la aplicación Far Away. 19 00:00:58,770 --> 00:01:01,800 que es una lista de viajes simple donde podemos agregar 20 00:01:01,800 --> 00:01:05,460 todos los elementos que necesitamos para nuestro próximo viaje. 21 00:01:05,460 --> 00:01:09,120 Entonces, por ejemplo, digamos que necesitamos dos tarjetas de embarque. 22 00:01:09,120 --> 00:01:12,600 que realmente no podemos olvidar, 23 00:01:12,600 --> 00:01:15,270 y luego podemos presionar enter o hacer clic aquí. 24 00:01:15,270 --> 00:01:18,690 Y luego ese elemento se agrega aquí a la lista. 25 00:01:18,690 --> 00:01:21,690 Y también ves que aquí abajo tenemos estas estadísticas. 26 00:01:21,690 --> 00:01:24,240 eso acaba de ser actualizado. 27 00:01:24,240 --> 00:01:27,270 Entonces eso ya es algo de interactividad. 28 00:01:27,270 --> 00:01:29,400 pero, por supuesto, podemos hacer más. 29 00:01:29,400 --> 00:01:31,740 Entonces, por ejemplo, digamos que no necesitamos 30 00:01:31,740 --> 00:01:34,380 el cargador por alguna razón, 31 00:01:34,380 --> 00:01:37,710 Entonces podemos simplemente hacer clic allí y desaparecerá. 32 00:01:37,710 --> 00:01:40,980 También podemos marcar estos elementos como completados, 33 00:01:40,980 --> 00:01:42,990 Así que básicamente está lleno. 34 00:01:42,990 --> 00:01:45,930 Entonces digamos que ya empacamos ese y aquel, 35 00:01:45,930 --> 00:01:48,390 y luego aquí abajo dice que ya empacamos dos 36 00:01:48,390 --> 00:01:52,470 que es el 50%, pero hay aún más. 37 00:01:52,470 --> 00:01:56,670 Entonces también podemos ordenar por estas tres cosas aquí. 38 00:01:56,670 --> 00:02:01,670 Entonces ingrese el orden o por descripción o por el estado de empaquetado. 39 00:02:01,950 --> 00:02:05,370 Y entonces los artículos empaquetados aquí aparecen al final. 40 00:02:05,370 --> 00:02:08,730 Y finalmente, tal vez una vez que regresemos de nuestro viaje. 41 00:02:08,730 --> 00:02:10,530 y queremos preparar el próximo, 42 00:02:10,530 --> 00:02:14,040 podemos borrar toda la lista de una vez. 43 00:02:14,040 --> 00:02:18,240 Luego nos pregunta si estamos seguros y sí, lo estamos. 44 00:02:18,240 --> 00:02:21,990 Y de hecho, entonces nuestra lista queda completamente vacía. 45 00:02:21,990 --> 00:02:23,310 y eso es. 46 00:02:23,310 --> 00:02:26,160 Así que creo que este es un pequeño proyecto realmente agradable. 47 00:02:26,160 --> 00:02:29,130 para que aprendamos un poco más de interactividad, 48 00:02:29,130 --> 00:02:32,370 y tiene todas estas características agradables pero simples 49 00:02:32,370 --> 00:02:33,810 que vamos a construir. 50 00:02:33,810 --> 00:02:35,460 y encima de eso, 51 00:02:35,460 --> 00:02:38,460 También me gusta mucho este bonito diseño aquí. 52 00:02:38,460 --> 00:02:41,850 Es un poco retro, lo cual creo que realmente encaja. 53 00:02:41,850 --> 00:02:44,430 la vibra de esta aplicación. 54 00:02:44,430 --> 00:02:46,890 Y ahora, antes de empezar a escribir cualquier código, 55 00:02:46,890 --> 00:02:48,900 en realidad echemos un vistazo a cómo 56 00:02:48,900 --> 00:02:52,773 Podemos dividir todo este diseño en componentes. 57 00:02:54,030 --> 00:02:56,130 Entonces esta primera gran parte amarilla, 58 00:02:56,130 --> 00:02:59,640 Creo que podemos llamar a esto el logo de la aplicación. 59 00:02:59,640 --> 00:03:01,890 Y entonces vamos a crear un componente. 60 00:03:01,890 --> 00:03:04,980 llamado logo solo para esta parte. 61 00:03:04,980 --> 00:03:08,550 Luego, a continuación, claramente tenemos alguna forma aquí. 62 00:03:08,550 --> 00:03:12,030 y ahí es donde vamos a poner estos elementos. 63 00:03:12,030 --> 00:03:13,923 Entonces, otro componente más. 64 00:03:14,850 --> 00:03:17,220 A continuación, tenemos esta lista completa. 65 00:03:17,220 --> 00:03:20,171 que creo que se puede llamar PackingList. 66 00:03:20,171 --> 00:03:22,650 Y luego allí cada uno de estos elementos. 67 00:03:22,650 --> 00:03:25,320 bien se llama simplemente artículo. 68 00:03:25,320 --> 00:03:27,600 Quizás podríamos llamarlo artículo de embalaje, 69 00:03:27,600 --> 00:03:30,360 pero lo veremos una vez que lleguemos al código. 70 00:03:30,360 --> 00:03:32,790 Finalmente aquí abajo tenemos esta otra área. 71 00:03:32,790 --> 00:03:37,290 que creo que podemos llamar simplemente Estadísticas o estadísticas. 72 00:03:37,290 --> 00:03:39,210 Entonces así es como vamos a romper. 73 00:03:39,210 --> 00:03:41,910 esta interfaz de usuario en componentes. 74 00:03:41,910 --> 00:03:45,480 Y hablaremos mucho más sobre cómo hacemos esto realmente. 75 00:03:45,480 --> 00:03:48,300 Entonces, ¿cómo llegamos a estos diferentes componentes? 76 00:03:48,300 --> 00:03:51,120 Pero ese no es el foco de esta aplicación. 77 00:03:51,120 --> 00:03:54,030 Aquí sólo queremos trabajar un poco más con el estado, 78 00:03:54,030 --> 00:03:55,950 con eventos, y también aprender 79 00:03:55,950 --> 00:03:58,770 sobre cómo podemos manejar los envíos de formularios. 80 00:03:58,770 --> 00:04:01,650 Entonces, si eso suena divertido, sigamos adelante rápidamente. 81 00:04:01,650 --> 00:04:05,223 a la siguiente conferencia y comience a implementar este diseño.