Tutorial Reagir Parte 7: Estilos embutidos

Hoje, na próxima parte do curso React, falaremos sobre estilos em linha.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 15. Estilos Incorporados

→ Original

No final da última lição, criamos um componente que analisa a hora do dia e exibe uma saudação correspondente. Aqui está o index.js completo do arquivo index.js que implementa esta funcionalidade:

 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")) 

Agora precisamos estilizar o que esse código exibe na página. Ao mesmo tempo, usaremos uma abordagem aqui que difere da estilização de elementos considerados anteriormente usando classes CSS. Ou seja, estamos falando sobre o uso do style atributo HTML. Vamos ver o que acontece se você usar este design:

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

Nada de bom mesmo. O texto não chegará à página; em vez disso, uma mensagem de erro será exibida. Sua essência se resume ao fato de que aqui, ao configurar os estilos, não se espera um valor de string, mas um objeto contendo pares da : do formulário : , em que as chaves são os nomes das propriedades CSS e os valores são seus valores.

Ao tentar usar atributos HTML no código JSX, não devemos esquecer que o que estamos trabalhando, embora pareça um código HTML comum, não é. Como resultado, a aparência deste ou daquele design aqui pode diferir do que é aceito em HTML. Nesse caso, precisamos de um objeto JavaScript comum que contenha uma descrição dos estilos. Armado com essa idéia, reescrevemos o fragmento de código acima da seguinte maneira:

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

Infelizmente, nosso código também não funcionará. Como resultado de sua execução, uma mensagem de erro será exibida novamente, embora não seja a mesma da última vez. Agora, ele informa que, onde o sistema pode esperar um colchete, ele encontra outra coisa. Para resolver esse problema, você precisa se lembrar do que falamos na lição anterior. Ou seja, esse código JavaScript incorporado no JSX deve ser colocado entre chaves. Os chavetas que já existem em nosso código são usadas para descrever o literal do objeto, e não para destacar o código JS. Vamos consertar isso:

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

Agora, o componente forma exatamente o que é necessário na página.


Texto estilizado exibido na página pelo componente

E se decidirmos continuar estilizando este texto? Para fazer isso, precisamos lembrar que descrevemos os estilos no objeto JS, o que significa que precisamos adicionar pares de : adicionais a esse objeto. Por exemplo, tentaremos estilizar o plano de fundo do texto dessa maneira usando a propriedade CSS background-color e suplementar o código da seguinte maneira:

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

Esse design resultará em uma mensagem de erro. O ponto aqui é que descrevemos os estilos usando um objeto JS comum e, em JavaScript, variáveis ​​e nomes de propriedades de objetos ( identificadores ) não podem conter o símbolo “-”, traços. De fato, essa restrição pode ser contornada, por exemplo, colocando o nome da propriedade do objeto entre aspas, mas, no nosso caso, não é esse o caso. Nessas situações, quando os nomes de propriedades CSS contêm um traço, removemos esse caractere e tornamos a primeira letra da palavra após ela maiúscula. É fácil ver que, com essa abordagem, os nomes de propriedades CSS serão escritos no estilo camelo - assim como no JavaScript, é comum escrever nomes de variáveis ​​que consistem em várias palavras. Reescreva o código:

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

Vejamos os resultados do seu trabalho.


Texto estilizado exibido na página pelo componente

No processo de estilizar o texto, o código de um objeto com estilos se torna mais longo. É inconveniente trabalhar com ele. Se você tentar quebrar esse código em várias linhas, nada de bom também será obtido. Portanto, derivaremos a descrição do objeto com estilos do código JSX, criando uma constante com o nome styles , gravando o objeto nele e usando seu nome em JSX. Como resultado, obtemos o seguinte:

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

Esse código funciona exatamente da mesma forma descrita acima, mas essa abordagem é muito conveniente quando se torna necessário adicionar novos estilos ao objeto. Isso não faz com que o código retornado pelo componente cresça.

Como você pode ver, agora os valores das propriedades CSS são definidos no objeto styles como strings. Ao trabalhar com esse objeto, vale a pena considerar alguns recursos que, em particular, se referem a propriedades cujos valores são definidos na forma de números. Por exemplo, esta é uma propriedade fontSize (semelhante font-size em CSS). Portanto, essa propriedade pode ser configurada na forma de um número comum e não em uma cadeia de caracteres entre aspas. Por exemplo, a seguinte construção é perfeitamente válida:

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

Aqui, o número 24 será interpretado como o tamanho da fonte indicado em pixels. Se a unidade de medida precisar ser especificada explicitamente, precisaremos novamente usar os valores de sequência das propriedades. Por exemplo, o seguinte fragmento de código é semelhante, em termos do efeito no tamanho da fonte, ao anterior, mas a unidade de medida do tamanho é indicada aqui explicitamente:

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

Aqui indicamos o tamanho em pixels, mas se necessário, outras unidades podem ser usadas em projetos semelhantes.

Falando sobre os estilos internos, não se pode deixar de mencionar as limitações dessa abordagem. Portanto, se você precisar adicionar prefixos de navegador aos estilos, isso pode ser um pouco mais difícil do que adicionar outros estilos. Mas algo como pseudo-classes , como :hover , não é suportado. Se você precisar neste estágio de masterização do React, é melhor aproveitar os elementos de estilo usando as classes CSS. E no futuro, provavelmente será mais conveniente o uso de bibliotecas especializadas, como componentes estilizados para esses fins. Mas, por enquanto, nos restringiremos a estilos embutidos e elementos de estilo usando classes CSS.

Talvez depois de aprender sobre essa limitação de estilos embutidos, você possa se perguntar por que deve usá-los se as classes CSS podem obter o mesmo efeito e ter recursos mais abrangentes. Uma razão para usar estilos embutidos no React é que esses estilos podem ser gerados dinamicamente. Além disso, qual será esse ou aquele estilo é determinado por meio do código JavaScript. Reescrevemos nosso exemplo para que a cor do texto mude dependendo da hora do dia em que a mensagem é exibida.

Aqui está o código completo do componente que usa a formação dinâmica de estilos.

 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 a declaração constante de styles está agora antes do bloco if . No objeto que define o estilo, apenas o tamanho da fonte da inscrição é definido - 30 pixels. Em seguida, a propriedade color é adicionada ao objeto, cujo valor depende da hora do dia. Lembre-se de que estamos falando de um objeto JavaScript completamente comum, e esses objetos oferecem suporte à adição e alteração de propriedades após a criação. Depois que o estilo é formado, ele é aplicado ao exibir texto. Para testar rapidamente todas as ramificações de uma instrução condicional, você pode, ao inicializar a constante da date , passar a data e a hora desejadas para o construtor do tipo Date . Por exemplo, pode ser assim:

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

A rigor, o significado de tudo isso é que os dados dinâmicos podem afetar a aparência dos elementos formados pelos componentes. Isso abre grandes oportunidades para o desenvolvedor.

Sumário

Hoje falamos sobre estilos internos, sobre seus recursos e limitações. Na próxima lição, continuaremos trabalhando no aplicativo TODO, além de familiarizar-nos com as propriedades dos componentes, com o conceito mais importante do React. Portanto, recomenda-se a todos os envolvidos neste curso, antes de continuar seus estudos, como repetir tudo e experimentar tudo o que analisamos até agora.

Caros leitores! Se você é versado no desenvolvimento do React, informe-nos quais bibliotecas você usa para estilizar componentes.