Tutorial React Parte 7: Estilos en línea

Hoy, en la próxima parte del curso React, hablaremos sobre los estilos en línea.



→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados ​​en clases
→ Parte 14: taller sobre componentes basados ​​en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 15. Estilos incorporados

→ Original

Al final de la última lección, creamos un componente que analiza la hora del día y muestra un saludo correspondiente. Aquí está el index.js completo del archivo index.js que implementa esta funcionalidad:

 import React from "react" import ReactDOM from "react-dom" function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Ahora necesitamos diseñar lo que este código muestra en la página. Al mismo tiempo, vamos a utilizar un enfoque aquí que difiere de la estilización de elementos considerados anteriormente usando clases CSS. Es decir, estamos hablando de usar el style atributo HTML. Veamos qué sucede si usa este diseño:

 <h1 style="color: #FF8C00">Good {timeOfDay}!</h1> 

Nada bueno realmente. El texto no llegará a la página; en su lugar, se mostrará un mensaje de error. Su esencia se reduce al hecho de que aquí, al configurar los estilos, no se espera un valor de cadena, sino un objeto que contiene pares de la : forma : , donde las claves son los nombres de las propiedades CSS, y los valores son sus valores.

Cuando intentemos utilizar atributos HTML en el código JSX, no debemos olvidar que lo que estamos trabajando, aunque parece un código HTML normal, no lo es. Como resultado, cómo se verá este o aquel diseño aquí puede diferir de lo que se acepta en HTML. En este caso, necesitamos un objeto JavaScript normal que contenga una descripción de los estilos. Armados con esta idea, reescribimos el fragmento de código anterior de la siguiente manera:

 <h1 style={color: "#FF8C00"}>Good {timeOfDay}!</h1> 

Entonces, desafortunadamente, nuestro código tampoco funcionará. Como resultado de su ejecución, se mostrará nuevamente un mensaje de error, aunque no será el mismo que la última vez. Ahora informa que donde el sistema puede esperar un soporte rizado, encuentra algo más. Para resolver este problema, debe recordar lo que hablamos en la lección anterior. A saber, ese código JavaScript incrustado en JSX debe estar encerrado entre llaves. Las llaves que ya existen en nuestro código se usan para describir el objeto literal y no para resaltar el código JS. Vamos a arreglar esto:

 <h1 style={{color: "#FF8C00"}}>Good {timeOfDay}!</h1> 

Ahora el componente forma exactamente lo que se necesita en la página.


Texto estilizado mostrado en la página por el componente

¿Qué pasa si decidimos continuar diseñando este texto? Para hacer esto, debemos recordar que describimos los estilos en el objeto JS, lo que significa que debemos agregar pares : adicionales a este objeto. Por ejemplo, trataremos de diseñar el fondo del texto de esta manera utilizando la propiedad CSS background-color y complementaremos el código de esta manera:

 <h1 style={{color: "#FF8C00", background-color: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Este diseño dará como resultado un mensaje de error. El punto aquí es que describimos los estilos usando un objeto JS regular, y en JavaScript, las variables y los nombres de propiedad de objeto ( identificadores ) no pueden contener el símbolo "-", guiones. De hecho, esta restricción se puede eludir, por ejemplo, encerrando el nombre de la propiedad del objeto entre comillas, pero en nuestro caso este no es el caso. En tales situaciones, cuando los nombres de propiedad CSS contienen un guión, eliminamos este carácter y hacemos que la primera letra de la palabra que sigue a la mayúscula. Es fácil ver que con este enfoque, los nombres de propiedad de CSS se escribirán en estilo camello, al igual que en JavaScript es habitual escribir nombres de variables que consisten en varias palabras. Reescribe el código:

 <h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Veamos los resultados de su trabajo.


Texto estilizado mostrado en la página por el componente

En el proceso de diseño de texto, el código de un objeto con estilos se alarga. Es inconveniente trabajar con él. Si intentas dividir este código en varias líneas, tampoco saldrá nada bueno. Por lo tanto, derivaremos la descripción del objeto con estilos del código JSX creando una constante con los styles nombre, escribiendo el objeto en él y usando su nombre en JSX. Como resultado, obtenemos lo siguiente:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) 

Este código funciona exactamente igual que el descrito anteriormente, pero este enfoque es muy conveniente cuando es necesario agregar nuevos estilos al objeto. Esto no hace que el código devuelto por el componente crezca.

Como puede ver, ahora los valores de las propiedades CSS se establecen en el objeto de styles como cadenas. Al trabajar con este objeto, vale la pena considerar algunas características, que, en particular, se relacionan con propiedades cuyos valores se establecen en forma de números. Por ejemplo, esta es una propiedad fontSize (que se parece font-size en CSS). Por lo tanto, esta propiedad se puede establecer en forma de un número ordinario, y no una cadena entre comillas. Por ejemplo, la siguiente construcción es perfectamente válida:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: 24 } 

Aquí, el número 24 se interpretará como el tamaño de fuente indicado en píxeles. Si la unidad de medida necesita especificarse explícitamente, nuevamente necesitaremos usar los valores de cadena de las propiedades. Por ejemplo, el siguiente fragmento de código es similar, en términos del efecto sobre el tamaño de fuente, al anterior, pero la unidad de medida del tamaño se indica aquí explícitamente:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: "24px" } 

Aquí indicamos el tamaño en píxeles, pero si es necesario, se pueden usar otras unidades en diseños similares.

Hablando de los estilos incorporados, uno no puede dejar de mencionar las limitaciones de este enfoque. Entonces, si necesita agregar prefijos de navegador a los estilos, esto puede ser un poco más difícil que agregar otros estilos. Pero algo como pseudo-clases , como :hover , no es compatible. Si lo necesita en esta etapa de masterización de React, es mejor aprovechar los elementos de estilo usando clases CSS. Y en el futuro, probablemente sea más conveniente para usted usar bibliotecas especializadas como componentes con estilo para tales fines. Pero por ahora, nos limitaremos a estilos en línea y elementos de estilo usando clases CSS.

Quizás después de conocer esta limitación de los estilos en línea, se pregunte por qué debería usarlos si las clases CSS pueden lograr el mismo efecto y tienen características más amplias. Una razón para usar estilos en línea en React es que dichos estilos se pueden generar dinámicamente. Además, cuál o cuál será el estilo se determinará mediante un código JavaScript. Reescribimos nuestro ejemplo para que el color del texto cambie según la hora del día en que se muestre el mensaje.

Aquí está el código de componente completo que usa la formación de estilo dinámico.

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay const styles = {   fontSize: 30 } if (hours < 12) {   timeOfDay = "morning"   styles.color = "#04756F" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon"   styles.color = "#2E0927" } else {   timeOfDay = "night"   styles.color = "#D90000" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) } 

Observe que la declaración constante de styles ahora está antes del bloque if . En el objeto que define el estilo, solo se establece el tamaño de fuente de la inscripción: 30 píxeles. Luego, la propiedad de color se agrega al objeto, cuyo valor depende de la hora del día. Recuerde que estamos hablando de un objeto JavaScript completamente ordinario, y dichos objetos admiten agregar y cambiar propiedades después de su creación. Una vez que se forma el estilo, se aplica al mostrar texto. Para probar rápidamente todas las ramas de una declaración condicional, puede, al inicializar la constante de date , pasar la fecha y hora deseadas al constructor del tipo Date . Por ejemplo, podría verse así:

 const date = new Date(2018, 6, 31, 15) 

Estrictamente hablando, el significado de todo esto es que los datos dinámicos pueden afectar la apariencia de los elementos formados por los componentes. Esto abre grandes oportunidades para el desarrollador.

Resumen

Hoy hablamos sobre estilos incorporados, sobre sus capacidades y limitaciones. En la próxima lección, continuaremos trabajando en la aplicación TODO, así como también comenzaremos a conocer las propiedades de los componentes, con el concepto más importante de React. Por lo tanto, se recomienda a todos los involucrados en este curso, antes de continuar sus estudios, cómo repetir todo y experimentar con todo lo que hemos analizado en este momento.

Estimados lectores! Si conoce bien el desarrollo de React, díganos qué bibliotecas utiliza para diseñar componentes.