1 00:00:01,080 --> 00:00:02,700 Entonces, en este punto, sabemos 2 00:00:02,700 --> 00:00:05,959 que los componentes de React también pueden contener estilos CSS. 3 00:00:05,959 --> 00:00:09,018 Y ahora aprendamos algunas formas simples. 4 00:00:09,018 --> 00:00:12,577 de aplicar CSS a aplicaciones React. 5 00:00:12,577 --> 00:00:16,035 Entonces en React tenemos muchas maneras diferentes 6 00:00:16,035 --> 00:00:18,498 de diseñar nuestros componentes 7 00:00:18,498 --> 00:00:22,260 y a React realmente no le importa cómo lo hacemos. 8 00:00:22,260 --> 00:00:24,460 No tiene opinión sobre el estilo. 9 00:00:24,460 --> 00:00:27,450 Y la razón de esto es que simplemente 10 00:00:27,450 --> 00:00:29,310 como aprendimos desde el principio 11 00:00:29,310 --> 00:00:32,575 En realidad, React es más una biblioteca que un marco. 12 00:00:32,575 --> 00:00:35,959 Entonces no tiene una forma preferida de cómo debemos diseñar. 13 00:00:35,959 --> 00:00:40,197 nuestros componentes y al final nuestras aplicaciones, por lo tanto 14 00:00:40,197 --> 00:00:43,440 Podemos elegir entre muchas opciones diferentes. 15 00:00:43,440 --> 00:00:45,482 Por ejemplo, podemos usar estilos en línea. 16 00:00:45,482 --> 00:00:49,575 Podemos utilizar archivos CSS externos o incluso SAS. 17 00:00:49,575 --> 00:00:54,575 Podemos usar módulos CSS, componentes con estilo o incluso Tailwind. 18 00:00:54,630 --> 00:00:57,955 CSS es una opción para diseñar nuestros componentes. 19 00:00:57,955 --> 00:00:59,220 Ahora en esta conferencia 20 00:00:59,220 --> 00:01:02,220 No entraremos en todos estos, por supuesto. 21 00:01:02,220 --> 00:01:04,513 pero hablaremos de muchos de ellos más adelante. 22 00:01:04,513 --> 00:01:07,173 Por ahora, sólo quiero usar CSS en línea. 23 00:01:07,173 --> 00:01:10,512 y luego también incluir un archivo CSS externo. 24 00:01:10,512 --> 00:01:13,433 Como sabrás, en HTML 25 00:01:13,433 --> 00:01:17,583 De hecho, podemos diseñar elementos usando este atributo de estilo. 26 00:01:18,660 --> 00:01:21,390 Entonces así. 27 00:01:21,390 --> 00:01:24,445 Y luego en HTML escribimos esos estilos. 28 00:01:24,445 --> 00:01:26,530 en una cadena como esta. 29 00:01:26,530 --> 00:01:30,164 Sin embargo, en JSX, no es así como funciona. 30 00:01:30,164 --> 00:01:33,798 Entonces, en JSX, realmente necesitamos definir estilos en línea. 31 00:01:33,798 --> 00:01:36,124 usando un objeto JavaScript. 32 00:01:36,124 --> 00:01:39,067 Entonces, si necesitamos escribir un objeto JavaScript 33 00:01:39,067 --> 00:01:41,687 Primero debemos ingresar al modo JavaScript. 34 00:01:41,687 --> 00:01:44,765 Entonces para eso están las llaves. 35 00:01:44,765 --> 00:01:47,869 Pero luego necesitamos otro par de llaves. 36 00:01:47,869 --> 00:01:51,247 Y eso es nuevamente, ahora crear un objeto. 37 00:01:51,247 --> 00:01:55,590 Y aquí ahora podemos definir algunas propiedades. 38 00:01:55,590 --> 00:01:59,730 Entonces digamos que queremos darle estilo a este texto. 39 00:01:59,730 --> 00:02:02,789 Entonces este texto H1 es de color rojo. 40 00:02:02,789 --> 00:02:06,887 Y ahora que lo guardo, ahí está, 41 00:02:06,887 --> 00:02:08,373 ahí cambió. 42 00:02:08,373 --> 00:02:11,450 Y con esto, tienes la forma más fácil. 43 00:02:11,450 --> 00:02:16,450 Entonces, la forma más sencilla de diseñar componentes en JSX. 44 00:02:17,046 --> 00:02:20,580 Simplemente usando el atributo de estilo que también es 45 00:02:20,580 --> 00:02:22,351 disponible en HTML. 46 00:02:22,351 --> 00:02:26,067 Ahora, en HTML, básicamente nunca usamos esto. 47 00:02:26,067 --> 00:02:28,320 y eso es por la separacion 48 00:02:28,320 --> 00:02:31,710 de preocupaciones de las que hablamos en la conferencia anterior. 49 00:02:31,710 --> 00:02:33,840 Entonces, ¿dónde siempre tuvimos el CSS? 50 00:02:33,840 --> 00:02:37,950 en un archivo separado y nunca mezclado con el marcado. 51 00:02:37,950 --> 00:02:40,364 Pero aquí en React, como acabamos de descubrir, 52 00:02:40,364 --> 00:02:43,503 Hacer eso está completamente bien y es natural. 53 00:02:44,609 --> 00:02:46,263 Probemos con otro. 54 00:02:47,650 --> 00:02:51,569 Ahora el tamaño de fuente, que en CSS escribirías 55 00:02:51,569 --> 00:02:54,090 así, ¿verdad? 56 00:02:54,090 --> 00:02:57,450 Entonces tamaño de fuente, pero en JavaScript 57 00:02:57,450 --> 00:02:59,610 ese no es un nombre de propiedad válido. 58 00:02:59,610 --> 00:03:02,150 Y por lo tanto todos los nombres de propiedades CSS tienen 59 00:03:02,150 --> 00:03:06,969 se ha convertido básicamente en JSX a esta notación en caso de camello. 60 00:03:06,969 --> 00:03:10,370 Entonces necesitas escribir un tamaño de fuente como este. 61 00:03:10,370 --> 00:03:13,029 Digamos 32 píxeles. 62 00:03:13,029 --> 00:03:15,746 Y así, ya que estamos escribiendo un objeto 63 00:03:15,746 --> 00:03:18,783 entonces también este valor siempre debe ser una cadena. 64 00:03:20,283 --> 00:03:23,040 Bueno, eso no cambió nada. 65 00:03:23,040 --> 00:03:25,380 Quizás esa ya sea la talla. 66 00:03:25,380 --> 00:03:27,483 Veamos qué pasa con 48. 67 00:03:28,680 --> 00:03:30,753 Sí, ahora es más grande. 68 00:03:31,650 --> 00:03:35,880 Y probemos con otro. Transformación de texto. 69 00:03:35,880 --> 00:03:38,880 Y ya ves eso como siempre vs codigo ya 70 00:03:38,880 --> 00:03:40,803 Te muestra aquí las opciones disponibles. 71 00:03:42,284 --> 00:03:46,260 Así que asegúrese de escribir siempre estos valores de propiedad. 72 00:03:46,260 --> 00:03:49,380 Entonces, básicamente, aquí hay cuerdas S, porque, de nuevo, 73 00:03:49,380 --> 00:03:52,440 Al final, esto es solo un objeto JavaScript. 74 00:03:52,440 --> 00:03:55,230 e incluso podrías extraer esto aquí. 75 00:03:55,230 --> 00:03:59,875 Así que simplemente cortando esto, creemos una variable aquí. 76 00:03:59,875 --> 00:04:04,875 Estilo constante y, por supuesto, podría ser cualquier nombre de variable. 77 00:04:07,095 --> 00:04:09,570 Entonces coloquemos eso aquí. 78 00:04:09,570 --> 00:04:12,000 Y todo sigue igual. 79 00:04:12,000 --> 00:04:14,280 excelente. Entonces esta es la forma más fácil. 80 00:04:14,280 --> 00:04:17,820 de agregar algo de estilo a los componentes individuales. 81 00:04:17,820 --> 00:04:20,912 Sin embargo, cuando la aplicación se hace un poco más grande 82 00:04:20,912 --> 00:04:22,636 puede salirse de control 83 00:04:22,636 --> 00:04:26,271 y puede suponer mucho trabajo escribir nuestros estilos como este. 84 00:04:26,271 --> 00:04:28,200 Así como crear un objeto 85 00:04:28,200 --> 00:04:31,059 para cada uno de estos componentes, es perfectamente factible 86 00:04:31,059 --> 00:04:34,854 pero no ves a mucha gente haciendo eso en el mundo real. 87 00:04:34,854 --> 00:04:37,770 Ahora, una cosa que podemos hacer es realmente 88 00:04:37,770 --> 00:04:40,650 incluir archivos CSS externos solo 89 00:04:40,650 --> 00:04:43,890 como lo hemos estado haciendo todo el tiempo en nuestras aplicaciones. 90 00:04:43,890 --> 00:04:46,581 Y esa es la forma más fácil, diría yo. 91 00:04:46,581 --> 00:04:50,190 Estilo de aplicaciones React, que es básicamente lo mismo. 92 00:04:50,190 --> 00:04:52,800 como diseñar cualquier otra página web. 93 00:04:52,800 --> 00:04:55,997 Ahora bien, en ese caso realmente no estamos mezclando la preocupación por DCSS. 94 00:04:55,997 --> 00:04:58,847 con las preocupaciones de JavaScript y HTML 95 00:04:58,847 --> 00:05:02,160 de la manera que aprendimos en la última conferencia 96 00:05:02,160 --> 00:05:04,590 pero eso, por supuesto, no es un problema. 97 00:05:04,590 --> 00:05:07,320 Y también aprenderemos cómo hacerlo un poco más tarde. 98 00:05:07,320 --> 00:05:10,817 Nuevamente, usando algo llamado componentes con estilo. 99 00:05:10,817 --> 00:05:15,659 Pero por ahora, echemos un vistazo al archivo CSS. 100 00:05:15,659 --> 00:05:19,281 que incluimos aquí al comienzo de esta conferencia. 101 00:05:19,281 --> 00:05:21,900 Y así es, bueno 102 00:05:21,900 --> 00:05:26,215 un archivo CSS estándar muy bonito con algunas clases aquí. 103 00:05:26,215 --> 00:05:29,010 Y ahora necesitamos agregar estos nombres de clases. 104 00:05:29,010 --> 00:05:33,063 a los elementos JSX para que estas clases luego se apliquen. 105 00:05:34,162 --> 00:05:38,250 Así que regresemos y antes de hacer nada de eso, 106 00:05:38,250 --> 00:05:39,953 Entonces antes de agregar las clases. 107 00:05:39,953 --> 00:05:43,590 Primero debemos importar este archivo CSS. 108 00:05:43,590 --> 00:05:46,380 Así que ahora mismo nuestra aplicación no tiene forma. 109 00:05:46,380 --> 00:05:50,152 de saber que el archivo CSS existe en el proyecto. 110 00:05:50,152 --> 00:05:55,152 Entonces, lo que debemos hacer aquí es simplemente importar ese archivo. 111 00:05:55,320 --> 00:05:56,610 Y así una vez más 112 00:05:56,610 --> 00:05:59,370 en realidad es el paquete web el que se encargará 113 00:05:59,370 --> 00:06:01,994 de luego sacar los estilos 114 00:06:01,994 --> 00:06:05,293 del archivo CSS e inyectarlos en nuestra aplicación. 115 00:06:05,293 --> 00:06:09,453 Entonces indexe el punto CSS. 116 00:06:09,453 --> 00:06:12,030 está bien. 117 00:06:12,030 --> 00:06:15,180 Y ya ves que aquí las cosas cambiaron. 118 00:06:15,180 --> 00:06:17,133 Entonces el color de fondo es diferente. 119 00:06:17,133 --> 00:06:19,912 la familia de fuentes ha cambiado. 120 00:06:19,912 --> 00:06:23,100 Sí, por ahora, creo que eso es todo. 121 00:06:23,100 --> 00:06:26,190 Y también tenemos este bonito borde amarillo. 122 00:06:26,190 --> 00:06:28,140 al final de la página. 123 00:06:28,140 --> 00:06:30,189 Entonces ves ese paquete web inmediatamente. 124 00:06:30,189 --> 00:06:34,677 Incluimos estos estilos ahora en nuestra aplicación, está bien, 125 00:06:36,180 --> 00:06:38,223 pero ahora agreguemos las clases. 126 00:06:39,585 --> 00:06:42,600 Entonces ves que tenemos un contenedor. 127 00:06:42,600 --> 00:06:47,600 tenemos un encabezado, un menú y probablemente un pie de página. 128 00:06:50,024 --> 00:06:53,163 Sí, muy sencillo. 129 00:06:55,260 --> 00:06:58,320 Entonces aquí, agreguemos la clase de contenedor. 130 00:06:58,320 --> 00:07:00,840 y déjame primero hacerlo de la manera incorrecta. 131 00:07:00,840 --> 00:07:04,180 Entonces escribiré la clase como lo haríamos en HTML. 132 00:07:05,673 --> 00:07:08,343 pero luego React nos advertirá. 133 00:07:09,900 --> 00:07:13,590 Como puede ver aquí, clase de propiedad DOM no válida 134 00:07:13,590 --> 00:07:15,330 ¿Quiso decir el nombre de la clase? 135 00:07:15,330 --> 00:07:19,230 Y esta es una de las reglas importantes de JSX. 136 00:07:19,230 --> 00:07:24,230 Entonces, en JSX no podemos usar la clase, sino el nombre de la clase. 137 00:07:24,970 --> 00:07:26,310 ¿bueno? 138 00:07:26,310 --> 00:07:29,160 Éste es un error común de los principiantes, pero ahora 139 00:07:29,160 --> 00:07:32,511 Te han advertido que todavía funciona aquí de alguna manera. 140 00:07:32,511 --> 00:07:37,407 pero en realidad se supone que no debemos usar clases en JSX. 141 00:07:37,407 --> 00:07:40,500 Eso probablemente se debe a que la clase ya ha comenzado. 142 00:07:40,500 --> 00:07:43,710 Palabras clave reservadas en JavaScript. 143 00:07:43,710 --> 00:07:46,263 Está bien, pero sigamos aquí. 144 00:07:47,100 --> 00:07:50,787 Nuevamente, agreguemos el apellido aquí del encabezado. 145 00:07:54,554 --> 00:07:58,380 ¿está bien? Y ahora esto realmente no cambió mucho. 146 00:07:58,380 --> 00:08:01,860 y eso es porque todavía tenemos este estilo aplicado aquí. 147 00:08:01,860 --> 00:08:04,140 Entonces probablemente no queramos eso. 148 00:08:04,140 --> 00:08:05,550 Y solo para mantener esto aquí 149 00:08:05,550 --> 00:08:08,760 Duplicaré este, coméntalo. 150 00:08:08,760 --> 00:08:11,426 y luego haré de esto un objeto vacío. 151 00:08:11,426 --> 00:08:14,588 Bueno, y eso realmente no cambió mucho. 152 00:08:14,588 --> 00:08:16,910 y sé por qué es así. 153 00:08:16,910 --> 00:08:20,910 Es porque aquí se supone que debemos 154 00:08:20,910 --> 00:08:23,433 tener un elemento de encabezado primero. 155 00:08:25,523 --> 00:08:30,093 ¿está bien? Y entonces esa clase debería ir allí. 156 00:08:31,567 --> 00:08:35,971 Así que esto es un poco de HTML semántico aquí. 157 00:08:35,971 --> 00:08:40,290 o digamos un marcado semántico donde el encabezado 158 00:08:40,290 --> 00:08:42,660 El elemento se adapta un poco mejor aquí. 159 00:08:42,660 --> 00:08:45,070 que simplemente tener el H-1. 160 00:08:45,070 --> 00:08:46,933 Y aquí tenemos algún problema. 161 00:08:46,933 --> 00:08:51,933 Quizás cambiemos algo aquí muy rápidamente. 162 00:08:54,112 --> 00:08:58,470 Entonces aquí tenemos este borde de 12 de ancho. 163 00:08:58,470 --> 00:08:59,913 Cambiemos eso a cuatro. 164 00:09:01,920 --> 00:09:05,370 Así que eso es un poco mejor, aunque todavía no es perfecto. 165 00:09:05,370 --> 00:09:10,130 porque por supuesto esta página es muy estrecha, pero no importa, 166 00:09:10,130 --> 00:09:12,903 Lo arreglaremos en un momento. 167 00:09:14,070 --> 00:09:17,970 A continuación, agreguemos la clase de menú. 168 00:09:17,970 --> 00:09:21,660 Y nuevamente, ese es el nombre de la clase. 169 00:09:21,660 --> 00:09:24,420 Y luego sólo una simple cadena. 170 00:09:24,420 --> 00:09:25,470 Entonces menú. 171 00:09:25,470 --> 00:09:28,680 Y aquí, ya que hablábamos de marcado semántico 172 00:09:28,680 --> 00:09:33,414 De hecho, usemos la etiqueta principal, por lo que el elemento HTML principal 173 00:09:33,414 --> 00:09:38,414 y luego, por supuesto, también debemos cerrarlo correctamente. 174 00:09:38,911 --> 00:09:41,100 Ah, hermoso. 175 00:09:41,100 --> 00:09:41,933 Entonces ya ves eso. 176 00:09:41,933 --> 00:09:46,083 Ahora tenemos este bonito estilo aquí en el menú. 177 00:09:48,071 --> 00:09:53,071 Bien, a continuación tenemos el nombre de esta clase aquí. 178 00:09:54,990 --> 00:09:57,363 que será solo pie de página. 179 00:09:59,640 --> 00:10:04,560 Muy bien, entonces veamos qué tenemos aquí. 180 00:10:04,560 --> 00:10:08,340 Tenemos este estilo extraño aplicado a estos títulos. 181 00:10:08,340 --> 00:10:10,908 lo cual se supone que no debería estar sucediendo. 182 00:10:10,908 --> 00:10:15,543 Así que hagámoslos H3, no H2. 183 00:10:18,570 --> 00:10:21,063 sí. Y aquí tenemos el pie de página. 184 00:10:22,170 --> 00:10:26,790 lindo. Entonces, con esto, realmente hemos aplicado algo de estilo. 185 00:10:26,790 --> 00:10:28,500 a nuestra aplicación ahora mismo. 186 00:10:28,500 --> 00:10:31,800 Y como mencioné, ahora estamos obteniendo estos estilos. 187 00:10:31,800 --> 00:10:35,207 de esta hoja de estilo CSS externa, que recuerda que 188 00:10:35,207 --> 00:10:38,970 simplemente importado aquí usando esta sintaxis de importación 189 00:10:38,970 --> 00:10:41,670 lo que hará que el paquete web importe los estilos 190 00:10:41,670 --> 00:10:43,608 en nuestra aplicación. 191 00:10:43,608 --> 00:10:47,869 Entonces aquí, recuerda que usamos nombre de clase y no clase. 192 00:10:47,869 --> 00:10:52,560 porque clase ya es una palabra clave reservada en JavaScript. 193 00:10:52,560 --> 00:10:56,430 Y, por cierto, hay algunas reglas JSX más como esta. 194 00:10:56,430 --> 00:10:59,700 del que hablaremos un poco más adelante en esta sección. 195 00:10:59,700 --> 00:11:03,113 Por ahora, sólo observe que los estilos que incluimos aquí 196 00:11:03,113 --> 00:11:06,360 Son estilos globales, por lo que no tienen alcance. 197 00:11:06,360 --> 00:11:10,212 a cada componente en particular, y eso es muy fácil de mostrar. 198 00:11:10,212 --> 00:11:15,212 Por ejemplo, también podríamos agregar aquí la clase de encabezado. 199 00:11:16,934 --> 00:11:20,730 Y aunque eso se ve más o menos igual 200 00:11:20,730 --> 00:11:22,860 intentemos algo más. 201 00:11:22,860 --> 00:11:26,553 Quizás agreguemos la clase de pie de página también al encabezado. 202 00:11:27,480 --> 00:11:31,200 sí. Y nuevamente, no cambia mucho, pero si 203 00:11:31,200 --> 00:11:36,200 inspeccionamos el elemento aquí, sí, así que aquí mismo, entonces 204 00:11:41,340 --> 00:11:43,620 por supuesto, ambas clases aquí. 205 00:11:43,620 --> 00:11:47,265 Entonces todos estos estilos se aplicarán a este mismo elemento. 206 00:11:47,265 --> 00:11:50,580 y al final al mismo componente. 207 00:11:50,580 --> 00:11:54,090 Y nuevamente, cada componente no contiene realmente 208 00:11:54,090 --> 00:11:57,583 sus propios estilos pero simplemente usa los estilos globales 209 00:11:57,583 --> 00:12:01,140 que están en index.CSS. 210 00:12:01,140 --> 00:12:03,630 Y esto funciona bien para aplicaciones pequeñas, 211 00:12:03,630 --> 00:12:06,504 pero también usaremos algo llamado componentes con estilo 212 00:12:06,504 --> 00:12:08,760 más tarde en otro proyecto. 213 00:12:08,760 --> 00:12:12,250 Y así tendremos CSS que en realidad sólo pertenece 214 00:12:12,250 --> 00:12:14,463 a un solo componente.