< Return to Video

FEMD CAP01 2025 VA04 REACT ESTILIZACAO

  • 0:08 - 0:10
    Estilização com React.
  • 0:10 - 0:13
    O React pode ser personalizado
    de várias formas.
  • 0:13 - 0:19
    Existem várias bibliotecas de estilos
    que favorecem essa personalização.
  • 0:19 - 0:22
    Temos o Styled Components,
    temos Tailwind
  • 0:22 - 0:24
    e uma infinita gama de ferramentas
  • 0:24 - 0:26
    que você pode escolher
    qual é melhor para você.
  • 0:26 - 0:29
    Vou falar hoje sobre
    o Styled Components.
  • 0:29 - 0:32
    Para isso, vamos criar um componente
    e customizá-lo
  • 0:32 - 0:35
    utilizando todo o benefício
    que o Styled Components já tem
  • 0:35 - 0:37
    pronto e embarcado.
  • 0:37 - 0:38
    Qual é a vantagem disso tudo?
  • 0:38 - 0:40
    Se a gente for olhar
  • 0:40 - 0:42
    o que temos de personalização
    disponível no mercado,
  • 0:42 - 0:45
    a gente pode utilizar várias
    de acordo com as preferências.
  • 0:45 - 0:48
    O React utilizado
    com o Styled Components
  • 0:48 - 0:49
    tem algumas especiais
  • 0:49 - 0:53
    e a gente consegue trazer um pouco
    de benefício nessas customizações.
  • 0:53 - 0:55
    Mas, explicando melhor,
  • 0:55 - 0:59
    para que serve essa estilização
    com bibliotecas e terceiros,
  • 0:59 - 1:01
    imagina a construção de um site
  • 1:01 - 1:04
    e você precisa customizar
    várias partes do seu site.
  • 1:04 - 1:08
    Antigamente,
    a gente usava CSS para tudo.
  • 1:08 - 1:12
    Imagina que cada pedaço
    do seu código, da sua tela,
  • 1:12 - 1:14
    seja customizada com CSS.
  • 1:14 - 1:16
    Você tem que pegar
    elemento por elemento,
  • 1:16 - 1:19
    chamar no CSS e atribuir um parâmetro
    na propriedade
  • 1:19 - 1:23
    de cor, de estilos,
    de espaçamento,
  • 1:23 - 1:27
    para que isso ficasse
    um pouco melhor a visualização.
  • 1:27 - 1:30
    O Styled Components já tem isso
    muito embarcado na sua aplicação
  • 1:30 - 1:31
    e para isso,
  • 1:31 - 1:34
    a gente precisa só chamar
    esse pedaço de estilo
  • 1:34 - 1:36
    dentro do nosso código
    e trazer um pouco de benefício
  • 1:36 - 1:38
    para a nossa explicação.
  • 1:38 - 1:41
    Vamos ao código e eu te explico melhor
    como isso funciona.
  • 1:41 - 1:47
    Eu criei aqui um componente
    chamado "BotaoEstilizado".
  • 1:47 - 1:51
    Esse botão está importando o Styled
    que vem do Styled Components.
  • 1:51 - 1:54
    Então, eu criei uma variável "botao".
  • 1:54 - 1:56
    Essa variável vai receber
    todos os estilos
  • 1:56 - 1:58
    que o Styled Components já tem.
  • 1:58 - 2:01
    Perceba que o Styled aqui,
    simbolizado nesse import,
  • 2:01 - 2:03
    vai trazer tudo
    que o Styled Components tem
  • 2:03 - 2:07
    e permitir que eu utilize
    dentro do meu botão.
  • 2:07 - 2:08
    Esses exemplos,
  • 2:08 - 2:11
    background-color, color,
    padding, border,
  • 2:11 - 2:16
    eu passo como função
    apenas no conceito de chave e valor.
  • 2:16 - 2:19
    Eu tenho um background-color,
    eu quero trazer uma cor para ele.
  • 2:19 - 2:22
    Então, essa cor azul,
    um pouco mais clara,
  • 2:22 - 2:24
    traz a customização
    do meu botão.
  • 2:24 - 2:27
    A cor branca é o label do meu botão.
  • 2:27 - 2:30
    É melhor explicando isso
    mostrando na tela, tá?
  • 2:30 - 2:32
    Então, como é que a gente faz
    para rodar mesmo?
  • 2:32 - 2:36
    Lá no começo do nosso capítulo,
    eu expliquei para vocês
  • 2:36 - 2:38
    que para rodar
    a nossa aplicação React,
  • 2:38 - 2:43
    a gente tem que digitar "npm run dev"
    para que rode a nossa aplicação.
  • 2:43 - 2:45
    Então, eu vou startar aqui,
    dando o enter,
  • 2:45 - 2:48
    e vamos ver o que acontece aqui
    na nossa tela.
  • 2:48 - 2:51
    Ele está falando que minha aplicação
    já está disponível
  • 2:51 - 2:53
    dentro do localhost 5173.
  • 2:53 - 2:57
    Perceba que ele fez o hot reloading,
    mas quebrou a minha aplicação.
  • 2:57 - 2:59
    Ele quebrou de propósito, tá?
  • 2:59 - 3:01
    Eu fiz isso justamente
    para você visualizar
  • 3:01 - 3:06
    que não basta apenas declarar
    os atributos do "styled-components"
  • 3:06 - 3:07
    para você utilizar.
  • 3:07 - 3:10
    É preciso que ele seja embarcado
    na sua aplicação.
  • 3:10 - 3:13
    E para isso,
    precisaremos instalar.
  • 3:13 - 3:16
    Então, para não perder aqui
    o meu código que já está rodando,
  • 3:16 - 3:19
    mesmo com erro,
    eu vou dividir meu terminal.
  • 3:19 - 3:19
    E para isso,
  • 3:19 - 3:23
    você clica aqui nesse botão
    chamado "Split Terminal".
  • 3:23 - 3:26
    Ele vai dividir nosso terminal
    em duas partes.
  • 3:26 - 3:31
    E vai me entregar aqui uma nova sessão
    para que eu digite o código
  • 3:31 - 3:33
    que eu preciso para instalar.
  • 3:33 - 3:38
    Então, o comando que vou utilizar
    é o "npm install styled-components"
  • 3:38 - 3:40
    Explicando esse comando,
  • 3:40 - 3:42
    eu estou pedindo
    para o Node Package Manager
  • 3:42 - 3:45
    instalar essa biblioteca
    que está disponível
  • 3:45 - 3:50
    a partir das nossas interfaces
    pré-prontas dentro da internet.
  • 3:50 - 3:52
    Digitando
    "npm install styled-components",
  • 3:52 - 3:54
    basta dar o enter,
  • 3:54 - 3:57
    ele vai baixar a biblioteca
    para o meu projeto.
  • 3:57 - 3:59
    Vamos aguardar o término.
  • 3:59 - 4:02
    E já, muito rápido,
    ele instalou a biblioteca.
  • 4:02 - 4:05
    A gente pode conferir isso
    olhando para o nosso "package.json".
  • 4:05 - 4:09
    Ele trouxe aqui dentro
    das nossas dependências,
  • 4:09 - 4:12
    além do React e do React DOM,
    que já são naturais da aplicação,
  • 4:12 - 4:14
    ele trouxe agora
    o "styled-components".
  • 4:14 - 4:17
    Então, significa dizer que agora sim
    eu posso utilizar
  • 4:17 - 4:19
    o que está importado.
  • 4:19 - 4:23
    Voltando para o nosso código,
    lembrem que eu instalei aqui, olha,
  • 4:23 - 4:28
    importei, aliás,
    o "styled" do "styled-components".
  • 4:28 - 4:31
    E aí, permitiu que eu usasse
    o "styled-button"
  • 4:31 - 4:33
    para decorar esse botão.
  • 4:33 - 4:36
    Não está rodando aqui ainda
    porque eu tenho que quebrar
  • 4:36 - 4:39
    a minha aplicação
    com o comando "ctrl+ C"
  • 4:39 - 4:44
    onde está dando o erro aqui,
    eu dou o "ctrl + C"
  • 4:44 - 4:49
    e rodo novamente a minha aplicação
    com o comando "npm run dev".
  • 4:49 - 4:52
    Dando enter,
    ele vai fazer o hot reload
  • 4:52 - 4:55
    e vai atualizar instantaneamente
    aqui a minha tela com o erro.
  • 4:55 - 4:57
    Ele já trouxe o meu botão
    totalmente decorado,
  • 4:57 - 4:59
    com o clique aqui,
  • 4:59 - 5:03
    que está sendo chamado
    dentro do meu botão estilizado,
  • 5:03 - 5:10
    que é esse botão aqui,
    e as propriedades de estilos.
  • 5:10 - 5:14
    Esse componente que eu criei
    foi só para dar a decoração
  • 5:14 - 5:14
    para o meu botão.
  • 5:14 - 5:19
    E a função aqui embaixo,
    é onde ele renderiza o botão estilizado.
  • 5:19 - 5:22
    Então, vamos entender
    esse código e como ele funciona.
  • 5:22 - 5:25
    Tenho aqui meu botão,
    esse botão está recebendo
  • 5:25 - 5:30
    tudo o que o "styled" fornece,
    eu pego o "button" dele
  • 5:30 - 5:33
    e coloco para esse botão.
  • 5:33 - 5:35
    Então, eu escrevo o seguinte...
  • 5:35 - 5:41
    Vale inclusive olhar que nós temos aqui
    uma crase,
  • 5:41 - 5:44
    que é uma aspa invertida,
    ele abre aqui em cima
  • 5:44 - 5:46
    e fecha aqui embaixo.
  • 5:46 - 5:49
    É dentro dessa crase aqui,
    que a gente chama de "literals",
  • 5:49 - 5:52
    posso passar meu conceito
    chave e valor.
  • 5:52 - 5:56
    Onde está o meu botão,
    a cor do meu botão,
  • 5:56 - 5:58
    a cor do label do botão
    e todos os atributos
  • 5:58 - 6:01
    que ele precisa para funcionar
    e ficar nesse estilo aqui.
  • 6:01 - 6:02
    Vamos fazer uns testes.
  • 6:02 - 6:05
    Então, perceba que eu tenho aqui
    a cor branca do meu label,
  • 6:05 - 6:09
    e se eu quiser trocar a cor
    do meu botão para um laranja,
  • 6:09 - 6:12
    vamos dizer assim,
    basta eu passar,
  • 6:12 - 6:16
    e se eu souber de cor, é claro,
    a cor do meu hexa,
  • 6:16 - 6:20
    eu passo aqui e ele vai trocar
    a cor do meu botão para laranja.
  • 6:20 - 6:22
    Não, a leitura não ficou muito boa,
  • 6:22 - 6:24
    vamos deixar com o branco mesmo
    para continuar o nosso exemplo.
  • 6:24 - 6:26
    Perceba que está branco aqui.
  • 6:26 - 6:28
    O "padding" 10px e 20px
  • 6:28 - 6:33
    significa dizer que eu tenho 10 pixels
    para cima e para baixo,
  • 6:33 - 6:35
    que é esse espaçamento aqui,
    entre o clique aqui,
  • 6:35 - 6:38
    topo do botão e a parte baixa
    do botão.
  • 6:38 - 6:41
    E 20 pixels para a direita
    e para a esquerda,
  • 6:41 - 6:43
    onde está aqui o meu "i"
    e onde está o meu "c",
  • 6:43 - 6:44
    eu tenho 20 pixels.
  • 6:44 - 6:46
    Posso aumentar,
  • 6:46 - 6:49
    e você vai continuar visualizando ali
    instantaneamente,
  • 6:49 - 6:51
    que esse botão está se comportando
    a partir do momento
  • 6:51 - 6:53
    que você modifica alguns parâmetros
  • 6:53 - 6:57
    que o "styled-components" já trouxe
    pré-definidos para gente.
  • 6:57 - 7:00
    O "border-radius" que é essa curva
    que o meu botão faz,
  • 7:00 - 7:02
    está com 5 pixels.
  • 7:02 - 7:04
    Se eu passar 25 pixels aqui,
  • 7:04 - 7:07
    ele já muda e deixa mais
    arredondado ainda.
  • 7:07 - 7:08
    Então, você consegue perceber
  • 7:08 - 7:10
    que apesar de você ter a biblioteca
    pronta,
  • 7:10 - 7:14
    você consegue dar um pouco
    de personalização ao estilo
  • 7:14 - 7:15
    que ele está te fornecendo também.
  • 7:15 - 7:19
    E esse "pointer" aqui
    é o dedo do mouse.
  • 7:19 - 7:22
    Quando eu encosto o mouse aqui,
    ele tem uma seta.
  • 7:22 - 7:25
    Quando eu encosto no botão,
    ele assume o dedo para clique.
  • 7:25 - 7:27
    Então, ele está nesse "cursor pointer".
  • 7:27 - 7:30
    E quando eu passo o mouse
    no meu botão,
  • 7:30 - 7:32
    ele muda de cor para um azul
    um pouco mais escuro.
  • 7:32 - 7:35
    Está sendo passado aqui
    nesse "background-color".
  • 7:35 - 7:38
    Caso você queira trocar
    o comportamento,
  • 7:38 - 7:42
    dessas chaves que estão setadas no nosso estilo.
  • 7:43 - 7:47
    Exporto aqui a função botão estilizado com o botão clique aqui e
  • 7:47 - 7:52
    utilizo ele dentro do meu app.jsx, onde ele fica disponibilizado
  • 7:52 - 7:52
    aqui.
  • 7:53 - 7:59
    Se eu quiser duplicar, basta eu criar um segundo botão e faço as
  • 7:59 - 8:01
    cores para outro botão.
  • 8:01 - 8:07
    Posso usar aqui o botão 2 e aqui no botão 2 eu crio outras
  • 8:07 - 8:10
    diversidades de estilos para esse meu botão.
  • 8:10 - 8:15
    Se eu estou passando aqui o botão 2 como o meu botão, eu preciso
  • 8:15 - 8:19
    criar aqui uma nova função, botão 2, e estilizar da forma que eu
  • 8:19 - 8:20
    desejo.
  • 8:20 - 8:24
    Como eu quero manter como está, eu vou deixar o botão 1 com as
  • 8:24 - 8:24
    mesmas cores.
  • 8:25 - 8:29
    Só para você entender que componente a gente pode reaproveitar tanto
  • 8:29 - 8:32
    a parte padronizada dele que você já deu, como você pode customizar
  • 8:32 - 8:34
    um para cada estilo que você desejar.
  • 8:35 - 8:39
    Utilizando esse conceito de reaproveitar componentes estilizados,
  • 8:40 - 8:43
    você pode ver no exemplo bem simples aqui que eu fiz no botão, você
  • 8:43 - 8:48
    pode expandir essa mesma forma para um card, para um título, para um
  • 8:48 - 8:51
    input, um formulário completo que você queira personalizar.
  • 8:52 - 8:55
    E toda a página que você precisa customizar, você precisa declarar
  • 8:55 - 8:59
    essa página onde você quer importar o estilo personalizado.
  • 8:59 - 9:04
    Como eu falei anteriormente, o estilo de componente é só um meio de
  • 9:04 - 9:06
    biblioteca que a gente tem disponível para estilizar.
  • 9:06 - 9:10
    Você pode explorar outras bibliotecas aí e visualizar lá no get
  • 9:10 - 9:13
    started dele como você faz para instalar essa biblioteca no seu
  • 9:13 - 9:14
    projeto.
  • 9:14 - 9:17
    Olhe sempre para o npm install dele.
  • 9:17 - 9:20
    Não basta apenas você ter essa biblioteca dentro do seu projeto, você
  • 9:20 - 9:25
    precisa trazer toda a parte de estilos que ela fornece para você para
  • 9:25 - 9:26
    dentro do seu projeto.
  • 9:26 - 9:29
    Ele tem que ser global, ele não pode ser só colocado na página que
  • 9:29 - 9:30
    você quer colocar.
  • 9:30 - 9:35
    Você precisa ter ele declarado, importado e quando você for utilizar
  • 9:35 - 9:38
    o seu projeto, você pode fazer a instalação dele e reaproveitar ele
  • 9:38 - 9:40
    em qualquer parte do seu código.
  • 9:41 - 9:44
    Eu espero que tenha sido proveitoso essa explicação de estilos.
  • 9:44 - 9:50
    Como eu reforcei, você pode modificá-la como você desejar e entender
  • 9:50 - 9:54
    que toda a parte de componentes tem seu estilo próprio ou você pode
  • 9:54 - 9:58
    reaproveitar o que vem nativo do React ou você pode importar outra
  • 9:58 - 10:02
    biblioteca de estilo para que você coloque a sua personalização.
  • 10:03 - 10:07
    Vale ressaltar que por mais que existam várias formas de você fazer
  • 10:07 - 10:11
    essa customização, não use muitas bibliotecas de estilos no mesmo
  • 10:11 - 10:12
    projeto.
  • 10:12 - 10:15
    Isso vai contribuir com que seu projeto perca um pouco da
  • 10:15 - 10:19
    personalização que você criou, uma vez que esses elementos têm
  • 10:19 - 10:23
    comportamentos próprios e você precisa trazer ele exclusivo na classe
  • 10:23 - 10:25
    exclusiva que você quer personalizar.
  • 10:26 - 10:28
    Quando você coloca mais que uma biblioteca de estilo no seu projeto,
  • 10:28 - 10:31
    você acaba perdendo essa flexibilidade de personalização.
  • 10:32 - 10:32
    Agora é a sua vez.
  • 10:32 - 10:36
    Você viu que durante esse capítulo a gente criou uma aplicação React
  • 10:36 - 10:40
    do zero e fizemos algumas adições de estilos, de eventos, de
  • 10:40 - 10:42
    comportamento que a biblioteca fornece pra gente.
  • 10:42 - 10:45
    É hora de praticar e testar com suas aplicações na vida real.
Title:
FEMD CAP01 2025 VA04 REACT ESTILIZACAO
Video Language:
Portuguese, Brazilian
Duration:
10:49

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions