React: estilize componentes com Styled Components e manipule arquivos estáticos

Iniciando o projeto - Apresentação

Vinicios: Olá! Boas-vindas a mais um curso de React. Sou Vinny Neves, seu dev nem sempre de boina, mas sempre barbudo, e estou aqui animado para construirmos mais uma aplicação.

Audiodescrição: Vinicios Neves é um homem de pele clara com rosto oval. Tem olhos castanhos escuros, sobrancelhas grossas, nariz comprido e boca larga. Usa barba cheia, bigode preto e óculos de grau com armação quadrada preta. Tem cabelo raspado, uma camiseta preta e está sentado em uma cadeira gamer com encosto cinza. Atrás dele, uma parede lisa é iluminada em tons gradientes de azul e roxo.

João: Olá, devs! Eu sou o João Vitor, instrutor aqui da Alura. E estou pronto para iniciar esse projeto com você.

Audiodescrição: João Vitor é um homem branco, de cabelos curtos e castanhos, uso barba e bigode. Atrás dele, uma parede lisa é iluminada em tons gradientes de azul claro e branco.

Vinicios: Para hoje, temos a construção do SpaceApp. Vamos construir uma aplicação que será um catálogo de imagens do espaço, onde conseguiremos transformar fotos em favoritas. Vamos trabalhar também com uma modal que tem o zoom da imagem, então teremos tamanhos diferentes de exibição, manipular arquivos estáticos e usar algumas ferramentas que são muito importantes para nós, pessoas desenvolvedoras front-end, termos em nosso cinto de utilidades.

Coisas como o Vite, para controlar nosso ambiente de desenvolvimento, e o Styled Components, para conseguirmos fazer uma boa estilização e maximizar o uso de JavaScript, inclusive para estilizar componentes.

Pré-requisitos

João: Se você já tem os fundamentos do React e sabe utilizar o seu HTML com CSS, principalmente com Flexbox, tem os pré-requisitos para iniciar essa jornada conosco, codando o SpaceApp.

Vinicios: E se você ficar conosco até o final, terá uma surpresa muito interessante para acrescentarmos a esse projeto. Vem com a gente!

Iniciando o projeto - Criando app

Vinicios: Temos o nosso SpaceApp, que está pronto no Figma, aguardando que nós o transformemos em uma aplicação React. Como costumo dizer no início de cada curso: começamos com o Figma e um sonho.

Então, vamos lá, vamos realizar isso e transformar este layout em uma aplicação React.

Vou abrir o terminal na minha máquina e acessar minha área de trabalho, onde desejo criar essa aplicação. Então, cd desktop. Estou navegando pelo terminal e vou pedir para o npm criar para nós. Vamos pedir para ele criar uma aplicação vite@latest, ou seja, na última versão da aplicação Vite.

npm create vite@latest

João: Vinny, por que seria interessante nós utilizarmos para o nosso projeto o Vite e não o Creative React App?

Vinicios: Boa pergunta! O ponto é o seguinte: na nova versão da documentação do React e até com alguns comunicados oficiais que o time que desenvolve o React trouxe para a comunidade, para criarmos uma aplicação que funciona como uma SPA (Single Page Application), eles não recomendam mais o uso do Creative React App.

Isso quer dizer que teremos um monte de aplicações que já estão no Creative React App e está tudo certo, são as aplicações legadas.

Mas para novas aplicações, eles sugerem o uso do Vite ou do Parcel. E, no nosso caso, vamos usar o Vite.

Podemos até dar uma olhada na documentação deles. Vou usar o meu navegador para acessar a documentação do Vite. Nesse site eles explicam como é que ele funciona e até como é que se pronuncia o nome dele.

Uma curiosidade é que Vite é uma palavra francesa relacionada com velocidade.

Agora que já entendemos qual é a ferramenta que vamos usar, podemos voltar ao terminal e vamos executar o seguinte comando:

npm create vite@latest

Tivemos a seguinte mensagem como retorno:

Need to install the following packages:
create-vite@4.3.2
Ok to proceed?(y)

Ele está dizendo que, para conseguir fazer isso, precisamos instalar localmente o create-vite na versão 4.3.2, vamos confirmar a instalação.

Em seguida, ele vai perguntar qual é o nome do projeto. O nome será space-app.

Em seguida, ele pergunta qual é o framework que vamos utilizar, se vai ser JavaScript puro, Vue, React, Preact, Lit, Svelt, entre outros. E o que queremos é o React. Podemos selecionar o React e pressionar "Enter".

João: Então, podemos utilizar o Vite para vários tipos de frameworks e bibliotecas diferentes?

Vinicios: Exatamente! Inclusive se quisermos usá-lo sem biblioteca nenhuma, somente com JavaScript puro, que é o que ele chama de Vanilla.

Ele é versátil nesse ponto, permitindo a nós a escolha do que queremos fazer. Tão versátil que agora ele está no ponto em que pergunta se queremos fazer React usando TypeScript ou JavaScript. Vamos selecionar o JavaScript puro.

Na nossa máquina, foi praticamente instantâneo, o que ele fez foi criar todos os arquivos iniciais do projeto dentro dessa pasta chamada "space-app". Ele está dizendo que completou com sucesso. E para colocar isso para rodar, precisamos acessar essa pasta, então cd space-app, executar o comando npm install para instalar todas as dependências. Quando terminarmos de instalar essas dependências, executamos npm run dev que ele vai subir um servidor e irá deixar disponível para começarmos a codificar.

cd space-app

npm install

npm run dev

Ele fez a instalação do npm install. É muito rápido. Em poucos minutos conseguimos colocar o projeto rodando.

Aqui temos alguns fatores que podem influenciar nisso, como a velocidade da internet e a velocidade da escrita em disco. Mas a ideia do Vite, a premissa dele, é mesmo ser um ambiente de desenvolvimento rápido.

Agora, que temos tudo pronto aqui, vamos limpar o terminal e abrir o VS Code na pasta em que estamos. Então, vamos executar:

code.

Estou fazendo isso aqui pelo terminal, porque sou "preguiçoso". Portanto, ao invés de abrir o VS Code manualmente e fazer tudo manualmente, utilizei o terminal, pedindo para o VS Code abrir a pasta desejada. Essa ação é equivalente a ir em "File" e solicitar a abertura da pasta, fazendo um "Open Folder".

Para encerrar, no terminal executaremos o comando npm run dev. Este comando subirá o ambiente de desenvolvimento e deixará disponível na porta 5173, por padrão. Caso essa porta esteja em uso, o sistema irá utilizar uma porta subsequente.

Então, vamos para o navegador e vaso colar na barra de endereços a URL gerada no terminal:

http://localhost:5173/

No navegador, será aberta uma página com o Vite + React funcionando com um contador. Ou seja, existe um componente React funcionando. Ele está sugerindo que, para testarmos o recurso de hot reload , devemos editar o arquivo App.jsx. Se salvarmos, veremos as alterações sendo carregadas automaticamente.

Vamos testar isso? No VS Code, vamos abrir o arquivo App.jsx. Ele carregou todos os componentes. Ao invés de uma tag h1 com o texto "Vite + React", deixar o título como "Space App".

Vamos salvar as alterações e ir direto para o navegador. Agora está aparecendo o título "Space App". Quando salvamos a página é recarregada automaticamente.

Agora, temos os nossos alicerces para começar a construir nosso SpaceApp.

Mas temos um detalhe que está faltando. Vamos acessar o Figma do nosso projeto.

Os componentes visuais aqui são muito ricos, com diversos estilos envolvidos. Para codar esses estilos, ou seja, trazer nosso CSS para dentro da aplicação, existem várias formas diferentes.

O que vamos utilizar no decorrer desse curso e para criar o Space App é o Styled Components.

Acesse aqui a documentação do Styled Components.

Essa é uma das formas de estilizar componentes React. Essa técnica é chamada de "CSS in JS" e existem outras alternativas além do Styled Components, mas para nosso caso, vamos continuar com ele.

João: Vinny, é interessante lembrar que o Styled Components é bastante utilizado. Inclusive aqui na Alura mesmo. Nossa Imersão React utilizou o Styled Components e existem outros cursos aqui de React que utilizam. É simples de utilizar e acredito que as pessoas vão gostar bastante.

Vinicios: Eu também espero que quem está nos acompanhando goste bastante. Eu também sou um dos fãs do Styled Components. E o interessante de trazer esse conceito é que temos o JSX para trazer o conceito do HTML para dentro do JavaScript. Se vamos usar o JavaScript para tudo, por que não usar também os estilos?

Na documentação do Styled Components temos instruções para instalação. Vamos copiar o seguinte comando:

npm install styled-components

Vamos abrir o terminal e executar o atalho "Ctrl + C" para parar o npm run dev. Em seguida, vamos colar e executar o comando para instalação do Styled Components. Vamos adicionar um @latest para que ele traga a última versão.

npm install styled-components@latest

Styled Components foi instalado. No terminal, executaremos o comando npm run dev. Ele aponta que está na porta 5173. Vamos voltar ao navegador e abrir o localhost na porta 5173.

http://localhost:5173/

Em seguida, vamos abrir o developer tools do navegador, deixaremos a aba "Console" aberta para verificarmos nela se tudo está funcionando corretamente. Com o console em evidência. Todos os erros aparecerão em vermelho, saberemos que precisamos corrigir algo.

Vamos recarregar para ter certeza de que continua funcionando. Está funcionando.

Vamos acessar o código no VS Code e alterar o título de "Space App" para "Space App V1", de Versão 1. Podemos salvar, voltar ao navegador e verificar que o texto foi atualizado.

Portanto, nós instalamos o Styled Components e não quebramos nada que estava funcionando anteriormente. Agora, sim, temos todas as bases necessárias para começar a construir os componentes do SpaceApp. Vamos lá?

Iniciando o projeto - Fundo com gradiente

Vinicios: Já deixamos nossa base pronta. Temos a aplicação React funcionando com o Styled Components já instalado e disponível para nós.

Vamos começar a transformar esse "sonho de Figma" em uma aplicação.

Nesse momento em que estamos olhando para uma tela que é um desenho, certo? Figma é um desenho. Eu penso em como vamos transpor isso para componentes e, por uma questão de orientação, eu costumo começar de cima para baixo.

Como vamos começar de cima para baixo, mas temos um fundo diferente, um gradiente diferente com um azul muito bonito, começaremos por esse fundo.

Um detalhe a ser informado é que estamos construindo a aplicação na resolução de desktop 1440, então essa é a versão que vamos construir aqui juntos.

Dentro do nosso projeto de design elaborado no Figma, clicaremos no fundo da aplicação para ele exibir a opção do gradiente do fundo. Será exibido um botão para mostrar qual é esse gradiente. Dentro desse botão, ele abre uma outra janela que informa o código CSS desse gradiente. Vamos copiar esse código CSS e seguir para o VS Code.

Mas como criar um componente que é um styled component?

Vamos lá. Vamos começar apagando todo esse conteúdo que está no código do arquivo App.jsx, vamos deixar só o React Fragment.

function App() {

  return (
    <>

    </>
  )
}

export default App

Em seguida, podemos deletar o arquivo App.css, que é o CSS da aplicação de exemplo. Podemos também deletar o index.css.

Lembrando de apagar a linha da importação do index.css que está dentro do arquivo main.jsx.

João: Vinny, nesse caso aí você deletou esses vários arquivos e a importação porque ele estava presente lá no projeto que foi criado pelo Vite para servir como exemplo, mas nós não vamos precisar utilizar, certo?

Vinicios: É exatamente isso. Ele entrega isso para nós apenas para servir de exemplo de como as coisas funcionam. Ele deixa lá um CSS global, um CSS da página, então temos lá o CSS da aplicação toda e o CSS mais relacionado àquela página. Mas como não vamos ter os estilos daquele botão, aquela logo, tudo aquilo, podemos mesmo deletar sem nenhum problema.

Para ter certeza de que deletamos um monte de coisa e não quebramos nada, antes de começar a escrever mais código, vamos abrir o terminal e verificar se tem algum console.log() de erro.

Agora, vamos no navegador, na página da aplicação, podemos recarregar. E veremos que está tudo branco, vazio e também não tem erro no console do painel developer tools do navegador. Isso significa que deletamos tudo e não ficou nenhuma referência perdida a algum arquivo que estava sendo importado.

Criando componente do fundo gradiente

Agora vamos voltar para a nossa missão, que é criar aquele componente que será o nosso fundo gradiente, certo?

No VS Code, vamos acessar o App.js e antes de ter essa function App(), vamos criar esse componente e vamos criar ele como uma constante chamada FundoGradiente. Ele será única e exclusivamente um fundo gradiente.

Essa constante recebe... Se fosse um componente React padrão, nós poderíamos aqui já criar uma Arrow Function, e retornar aqui um JSX qualquer, um h1 por exemplo.

const FundoGradiente = () => {
    return (<h1></h1>)
}

Se fosse um componente React padrão, seria assim, mas nós queremos um componente styled (estilizado).

Então, como chamar essa biblioteca que acabamos de instalar?

Vamos apagar essa Arrow Function e vamos digitar aqui "styled". Ao escrevermos "styled", o VS Code, vai abrir uma lista perto do cursos sugerindo de onde queremos importar ele, se queremos importar da biblioteca styled component que já temos como dependência do nosso projeto. Sim, é exatamente isso que queremos, vamos selecionar a opção "styled do styled components" para criar automaticamente a linha de import no topo do código:

import { styled } from "styled-components"

const FundoGradiente = styled
}

Para usar o styled, vamos inserir um ponto e passar o nome da tag HTML que queremos. Nesse caso, vamos começar com a tag padrão que é uma div, então styled.div. Em seguida, fazemos uma interpolação de strings, então vamos usar duas crases ``, e isso já é suficiente para gerar o componente.

import { styled } from "styled-components"

const FundoGradiente = styled.div``
}

Agora, podemos usar o FundoGradiente como se fosse uma div. Em vez de ter o React Fragment, vamos colar aqui o FundoGradiente. Isso já gera para nós um Styled Component. Podemos salvar esse arquivo.

import { styled } from "styled-components"

const FundoGradiente = styled.div``
}

function App() {

  return (
    <FundoGradiente>

    </FundoGradiente'>
  )
}

export default App

João: Neste caso, você criou o nosso componente FundoGradiente, e utilizou o styled seguido de um ponto e aquilo que você quer criar. Isso é padrão ou existem outras formas de fazer dentro do Styled Component?

Vinicios: Sim, existem outras formas de fazer essa criação de componentes. Inclusive, mais de uma forma.

Então, nesse primeiro momento e para coisas mais simples, normalmente é isso que vemos por aí.A sequência de styled seguido de ponto, nome da tag e duas crases.

Por padrão, é isso que se vê. Em alguns casos que temos cenários mais complexos, precisamos fazer mais coisas, mas vamos passando por isso, se é que vamos ter um caso mais complexo assim. Mas, são variações disso que fizemos.

Continuando, ainda não temos nenhum estilo, mas quero jogar seguro, então já vamos conferir se não quebramos nada na aplicação.

Vamos voltar no navegador, o console está limpo, recarreguei a página, então está lá, está funcionando. O que queremos agora é colocar aquele fundo gradiente.

Vamos para o Figma, copiar o gradiente de novo, pois não tenho certeza se ele ainda está na minha área de transferência. Vamos trazê-lo agora para dentro do componente.

background: linear-gradient(174.61deg, #041833 4.16%, #04244F 48%, #154580 96.76%);

Agora, no VS Code, onde vai o estilo? Ele vai justamente dentro das crases que colocamos após o styled.div.

Essa interpolação de string já é preparada para receber código CSS, então podemos fazer propriedade e valor, chave e valor. Então, o que queremos aqui é esse background: linear-gradient, com todos esses números que nossa designer preparou para nós:

import { styled } from "styled-components"

const FundoGradiente = styled.div`
  background: linear-gradient(174.61deg, #041833 4.16%, #04244F 48%, #154580 96.76%);
`

function App() {

  return (
    <FundoGradiente>

    </FundoGradiente'>
  )
}

export default App

Um pequeno detalhe: colamos esses estilos e o VS Code já usou cores diferentes nas palavras, para indicar que o background é uma propriedade e que linear-gradient é uma função.

O VS Code nos ajuda muito nesse ponto.

Vou mostrar a aba de extensões do VS Code. Tenho instalada aqui a extensão "vscode-styled-components". Essa extensão consegue identificar que temos código CSS dentro da interpolação de string.

Se você não tem a extensão vscode-styled-components no seu VS Code, as cores do código ficam todas iguais à de uma string comum, sem diferenciar que aquilo é um CSS.

João : Essa extensão é bem legal, porque além de visualizar o que você está fazendo, ela meio que te orienta para verificar se está certo ou errado. Então, se você vai utilizar o Styled Components, é importante também usar essa extensão, ela é bastante útil.

Vinicios: Vejam, por exemplo, eu quero agora que essa div tenha 100% de largura e, no mínimo, 100% do viewport da tela, ou seja, 100% do que está disponível. Para fazer isso, vamos trazer agora a dica do João na prática.

Eu quero que ela tenha uma largura de 100%, então vamos começar a digitar a palavra width, e ele já me dá o autocomplete, o IntelliSense.

Sem essa extensão, não teríamos esse IntelliSense para autocompletar as palavras, e teríamos que fazer tudo à mão, sem essa ajuda preciosa do VS Code. Então, nesse exemplo aqui, quero uma largura de 100%.

import { styled } from "styled-components"

const FundoGradiente = styled.div`
  background: linear-gradient(174.61deg, #041833 4.16%, #04244F 48%, #154580 96.76%);
    width: 100%;
`

function App() {

  return (
    <FundoGradiente>

    </FundoGradiente'>
  )
}

export default App

Por último, quero estabelecer uma altura mínima, min-height, de 100%. Porém, não desejo um valor fixo de 100%, mas sim uma altura correspondente ao viewport da página, portanto preciso do valor vh e que corresponda a 100% do que está disponível na tela.

import { styled } from "styled-components"

const FundoGradiente = styled.div`
  background: linear-gradient(174.61deg, #041833 4.16%, #04244F 48%, #154580 96.76%);
    width: 100%;
    min-height: 100vh;
`

function App() {

  return (
    <FundoGradiente>

    </FundoGradiente'>
  )
}

export default App

Ótimo! Muitas linhas de código foram escritas e a extensão do VS Code já foi instalada.

Agora, vamos verificar no navegador como nosso código está se comportando. No nosso Vite + React, tudo parece estar correto. Temos nosso gradiente, porém percebo algo levemente estranho. Há uma pequena margem na borda .

Vamos inspecionar os elementos da página. Aqui no body, já identificou a margem - no meu navegador a margem é representada pela cor laranja e o padding pela cor verde. Portanto, essa linha laranja que está em torno da nossa visualização é uma margem que o navegador coloca por padrão.

Isso, no entanto, depende do navegador e do sistema operacional. Por exemplo, estou usando o Opera em uma versão específica, em uma versão específica do macOS. Isso pode variar para o Chrome, Firefox, Safari, e pode variar até mesmo de acordo com o sistema operacional, pois algumas configurações do sistema operacional ajustam e alteram propriedades do navegador.

Para lidar com isso, nós temos uma solução antiga chamada normalize CSS ou reset CSS, que corresponde a um ponto comum, a partir do qual todos os navegadores terão mais ou menos o mesmo comportamento. Existem bibliotecas famosas que fazem isso, uma delas é o Normalize CSS.

Acesse aqui a biblioteca Normalize.css

Essa biblioteca é bem pequena, composta apenas por um conjunto de arquivos CSS. Se clicarmos em "Download", seremos redirecionado para o CSS puro.

No entanto, neste arquivo temos muitos comentários explicando a função do reset. Pensando nisso, gerei um gist no github com todos esses estilos do normalize CSS sem os comentários. Esse link estará disponível para você nas atividades da plataforma.

Queremos pegar esses estilos todos e colocar disponível, por padrão, na nossa aplicação. Mas nós estamos usando o Styled Components e este código é um CSS global. Agora temos um desafio: como lidar com estilos globais e Styled Components?

Sobre o curso React: estilize componentes com Styled Components e manipule arquivos estáticos

O curso React: estilize componentes com Styled Components e manipule arquivos estáticos possui 204 minutos de vídeos, em um total de 57 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Iniciando o projeto
Componentes iniciais e fontes
Criando galeria
Uma modal de zoom
Favoritando imagens