Entonces, en este punto, sabemos
que los componentes de React también pueden contener estilos CSS.
Y ahora aprendamos algunas formas simples.
de aplicar CSS a aplicaciones React.
Entonces en React tenemos muchas maneras diferentes
de diseñar nuestros componentes
y a React realmente no le importa cómo lo hacemos.
No tiene opinión sobre el estilo.
Y la razón de esto es que simplemente
como aprendimos desde el principio
En realidad, React es más una biblioteca que un marco.
Entonces no tiene una forma preferida de cómo debemos diseñar.
nuestros componentes y al final nuestras aplicaciones, por lo tanto
Podemos elegir entre muchas opciones diferentes.
Por ejemplo, podemos usar estilos en línea.
Podemos utilizar archivos CSS externos o incluso SAS.
Podemos usar módulos CSS, componentes con estilo o incluso Tailwind.
CSS es una opción para diseñar nuestros componentes.
Ahora en esta conferencia
No entraremos en todos estos, por supuesto.
pero hablaremos de muchos de ellos más adelante.
Por ahora, sólo quiero usar CSS en línea.
y luego también incluir un archivo CSS externo.
Como sabrás, en HTML
De hecho, podemos diseñar elementos usando este atributo de estilo.
Entonces así.
Y luego en HTML escribimos esos estilos.
en una cadena como esta.
Sin embargo, en JSX, no es así como funciona.
Entonces, en JSX, realmente necesitamos definir estilos en línea.
usando un objeto JavaScript.
Entonces, si necesitamos escribir un objeto JavaScript
Primero debemos ingresar al modo JavaScript.
Entonces para eso están las llaves.
Pero luego necesitamos otro par de llaves.
Y eso es nuevamente, ahora crear un objeto.
Y aquí ahora podemos definir algunas propiedades.
Entonces digamos que queremos darle estilo a este texto.
Entonces este texto H1 es de color rojo.
Y ahora que lo guardo, ahí está,
ahí cambió.
Y con esto, tienes la forma más fácil.
Entonces, la forma más sencilla de diseñar componentes en JSX.
Simplemente usando el atributo de estilo que también es
disponible en HTML.
Ahora, en HTML, básicamente nunca usamos esto.
y eso es por la separacion
de preocupaciones de las que hablamos en la conferencia anterior.
Entonces, ¿dónde siempre tuvimos el CSS?
en un archivo separado y nunca mezclado con el marcado.
Pero aquí en React, como acabamos de descubrir,
Hacer eso está completamente bien y es natural.
Probemos con otro.
Ahora el tamaño de fuente, que en CSS escribirías
así, ¿verdad?
Entonces tamaño de fuente, pero en JavaScript
ese no es un nombre de propiedad válido.
Y por lo tanto todos los nombres de propiedades CSS tienen
se ha convertido básicamente en JSX a esta notación en caso de camello.
Entonces necesitas escribir un tamaño de fuente como este.
Digamos 32 píxeles.
Y así, ya que estamos escribiendo un objeto
entonces también este valor siempre debe ser una cadena.
Bueno, eso no cambió nada.
Quizás esa ya sea la talla.
Veamos qué pasa con 48.
Sí, ahora es más grande.
Y probemos con otro. Transformación de texto.
Y ya ves eso como siempre vs codigo ya
Te muestra aquí las opciones disponibles.
Así que asegúrese de escribir siempre estos valores de propiedad.
Entonces, básicamente, aquí hay cuerdas S, porque, de nuevo,
Al final, esto es solo un objeto JavaScript.
e incluso podrías extraer esto aquí.
Así que simplemente cortando esto, creemos una variable aquí.
Estilo constante y, por supuesto, podría ser cualquier nombre de variable.
Entonces coloquemos eso aquí.
Y todo sigue igual.
excelente. Entonces esta es la forma más fácil.
de agregar algo de estilo a los componentes individuales.
Sin embargo, cuando la aplicación se hace un poco más grande
puede salirse de control
y puede suponer mucho trabajo escribir nuestros estilos como este.
Así como crear un objeto
para cada uno de estos componentes, es perfectamente factible
pero no ves a mucha gente haciendo eso en el mundo real.
Ahora, una cosa que podemos hacer es realmente
incluir archivos CSS externos solo
como lo hemos estado haciendo todo el tiempo en nuestras aplicaciones.
Y esa es la forma más fácil, diría yo.
Estilo de aplicaciones React, que es básicamente lo mismo.
como diseñar cualquier otra página web.
Ahora bien, en ese caso realmente no estamos mezclando la preocupación por DCSS.
con las preocupaciones de JavaScript y HTML
de la manera que aprendimos en la última conferencia
pero eso, por supuesto, no es un problema.
Y también aprenderemos cómo hacerlo un poco más tarde.
Nuevamente, usando algo llamado componentes con estilo.
Pero por ahora, echemos un vistazo al archivo CSS.
que incluimos aquí al comienzo de esta conferencia.
Y así es, bueno
un archivo CSS estándar muy bonito con algunas clases aquí.
Y ahora necesitamos agregar estos nombres de clases.
a los elementos JSX para que estas clases luego se apliquen.
Así que regresemos y antes de hacer nada de eso,
Entonces antes de agregar las clases.
Primero debemos importar este archivo CSS.
Así que ahora mismo nuestra aplicación no tiene forma.
de saber que el archivo CSS existe en el proyecto.
Entonces, lo que debemos hacer aquí es simplemente importar ese archivo.
Y así una vez más
en realidad es el paquete web el que se encargará
de luego sacar los estilos
del archivo CSS e inyectarlos en nuestra aplicación.
Entonces indexe el punto CSS.
está bien.
Y ya ves que aquí las cosas cambiaron.
Entonces el color de fondo es diferente.
la familia de fuentes ha cambiado.
Sí, por ahora, creo que eso es todo.
Y también tenemos este bonito borde amarillo.
al final de la página.
Entonces ves ese paquete web inmediatamente.
Incluimos estos estilos ahora en nuestra aplicación, está bien,
pero ahora agreguemos las clases.
Entonces ves que tenemos un contenedor.
tenemos un encabezado, un menú y probablemente un pie de página.
Sí, muy sencillo.
Entonces aquí, agreguemos la clase de contenedor.
y déjame primero hacerlo de la manera incorrecta.
Entonces escribiré la clase como lo haríamos en HTML.
pero luego React nos advertirá.
Como puede ver aquí, clase de propiedad DOM no válida
¿Quiso decir el nombre de la clase?
Y esta es una de las reglas importantes de JSX.
Entonces, en JSX no podemos usar la clase, sino el nombre de la clase.
¿bueno?
Éste es un error común de los principiantes, pero ahora
Te han advertido que todavía funciona aquí de alguna manera.
pero en realidad se supone que no debemos usar clases en JSX.
Eso probablemente se debe a que la clase ya ha comenzado.
Palabras clave reservadas en JavaScript.
Está bien, pero sigamos aquí.
Nuevamente, agreguemos el apellido aquí del encabezado.
¿está bien? Y ahora esto realmente no cambió mucho.
y eso es porque todavía tenemos este estilo aplicado aquí.
Entonces probablemente no queramos eso.
Y solo para mantener esto aquí
Duplicaré este, coméntalo.
y luego haré de esto un objeto vacío.
Bueno, y eso realmente no cambió mucho.
y sé por qué es así.
Es porque aquí se supone que debemos
tener un elemento de encabezado primero.
¿está bien? Y entonces esa clase debería ir allí.
Así que esto es un poco de HTML semántico aquí.
o digamos un marcado semántico donde el encabezado
El elemento se adapta un poco mejor aquí.
que simplemente tener el H-1.
Y aquí tenemos algún problema.
Quizás cambiemos algo aquí muy rápidamente.
Entonces aquí tenemos este borde de 12 de ancho.
Cambiemos eso a cuatro.
Así que eso es un poco mejor, aunque todavía no es perfecto.
porque por supuesto esta página es muy estrecha, pero no importa,
Lo arreglaremos en un momento.
A continuación, agreguemos la clase de menú.
Y nuevamente, ese es el nombre de la clase.
Y luego sólo una simple cadena.
Entonces menú.
Y aquí, ya que hablábamos de marcado semántico
De hecho, usemos la etiqueta principal, por lo que el elemento HTML principal
y luego, por supuesto, también debemos cerrarlo correctamente.
Ah, hermoso.
Entonces ya ves eso.
Ahora tenemos este bonito estilo aquí en el menú.
Bien, a continuación tenemos el nombre de esta clase aquí.
que será solo pie de página.
Muy bien, entonces veamos qué tenemos aquí.
Tenemos este estilo extraño aplicado a estos títulos.
lo cual se supone que no debería estar sucediendo.
Así que hagámoslos H3, no H2.
sí. Y aquí tenemos el pie de página.
lindo. Entonces, con esto, realmente hemos aplicado algo de estilo.
a nuestra aplicación ahora mismo.
Y como mencioné, ahora estamos obteniendo estos estilos.
de esta hoja de estilo CSS externa, que recuerda que
simplemente importado aquí usando esta sintaxis de importación
lo que hará que el paquete web importe los estilos
en nuestra aplicación.
Entonces aquí, recuerda que usamos nombre de clase y no clase.
porque clase ya es una palabra clave reservada en JavaScript.
Y, por cierto, hay algunas reglas JSX más como esta.
del que hablaremos un poco más adelante en esta sección.
Por ahora, sólo observe que los estilos que incluimos aquí
Son estilos globales, por lo que no tienen alcance.
a cada componente en particular, y eso es muy fácil de mostrar.
Por ejemplo, también podríamos agregar aquí la clase de encabezado.
Y aunque eso se ve más o menos igual
intentemos algo más.
Quizás agreguemos la clase de pie de página también al encabezado.
sí. Y nuevamente, no cambia mucho, pero si
inspeccionamos el elemento aquí, sí, así que aquí mismo, entonces
por supuesto, ambas clases aquí.
Entonces todos estos estilos se aplicarán a este mismo elemento.
y al final al mismo componente.
Y nuevamente, cada componente no contiene realmente
sus propios estilos pero simplemente usa los estilos globales
que están en index.CSS.
Y esto funciona bien para aplicaciones pequeñas,
pero también usaremos algo llamado componentes con estilo
más tarde en otro proyecto.
Y así tendremos CSS que en realidad sólo pertenece
a un solo componente.