Aplicações React com styled components

Tutoriais - 10/Dez/2020 - por Lucas Amaral

A maioria dos projetos que utilizam React para construir o front-end de sua aplicação, empregam bibliotecas para organizar e agilizar o trabalho. Para organização de estilos, a biblioteca mais popular é styled components e neste artigo vamos mostrar uma refatoração implementando componentes para substituir CSS puro.

Como seguir esse tutorial!!

Para acompanhar, vá editando o template: https://codesandbox.io/s/styled-components-v2-m6oc7

Explicando o exemplo

Nosso objetivo é refatorar o componente Navigation de uma landing page da Campus Code, utilizando styled components.

Resultado da aplicação final do tutorial.

Esse componente está localizado em src/Navigation/index.js e seus estilos em src/Navigation/styles.css.

Adicionando dependências

Antes de começar, precisamos adicionar a dependência Styled Components.

No codesandbox podemos adicioná-la na aba dependencies, conforme a imagem:

Mostrando como adicionar styled components.

Em um projeto local, adicionaríamos com npm ou yarn:

npm install --save styled-components
yarn add styled-components

O que vamos refatorar

Analisando nosso componente, vemos que a seguinte estrutura se repete 4 vezes:

<a
  className="navlink"
    href="*url*"
  target="_blank"
  rel="noopener noreferrer"
>
    *texto*
</a>

Também podemos aproveitar para transformar nossa div.navcontainer em um elemento de estilo:

<div className="navcontainer">

Como vamos refatorar

Para organizar nossos componentes de estilos, vamos criar um arquivo src/Navigation/styles.js e transferir os estilos de src/Navigation/styles.css para ele.

Depois, vamos passar esses componentes de estilo para nosso componente Navigation.

Removendo CSS puro

Antes de começar, vamos remover a linha import "./styles.css"; em src/Navigation/index.js. Nossa aplicação deve ficar assim:

Aplicação React sem o CSS aplicado.

Refatorando

Vamos criar o arquivo src/Navigation/styles.js.

Nele, vamos importar styled dos styled-components que nos permitirá a criação de componentes de estilo. Depois vamos criar dois componentes de estilo Link e NavContainer:

/* styles.js */
import styled from "styled-components"

export const NavContainer = styled.div``;

export const Link = styled.a``;

Em NavContainer, copiaremos os estilos da classe .navcontainer de src/Navigation/styles.css.

Em Link, copiaremos os estilos da classe .navlink. Como com styled components podemos utilizar seletores Sass, também conseguimos passar o hover para dentro do nosso componente.

/* styles.js */
import styled from "styled-components"

export const NavContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

export const Link = styled.a`
  margin-top: 32px;
  background-color: #47e500;
  text-decoration: none;
  font-family: ArchiaBold;
  letter-spacing: 0.2rem;
  color: #000;
  transition: 0.3s;
  font-weight: 600;
  border-radius: 0;
  line-height: 1.5;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: min(4vw, 1.2rem);
  line-height: 1.5;
  border-radius: 0.25rem;
  width: min(60vw, 400px);
  max-width: 300px;
  cursor: pointer;
  outline: none;

    &:hover {
      background-color: #ff3095;
    }
`;

Agora que já passamos nossos estilos para styles.js, podemos apagar o arquivo styles.css.

Passando nossos componentes de estilo para Navigation

Vamos importar nossos componentes em src/Navigation/index.js e fazer a substituição. Trocaremos: ```html

<a className="navlink" href="url" target="_blank" rel="noopener noreferrer"

*texto*

```

Para:

<NavContainer>
</NavContainer>

<Link
    href="*url*"
  target="_blank"
  rel="noopener noreferrer"
>
    *texto*
</Link>

Nosso componente ficará assim:

import React from "react";
import { Link, NavContainer } from "./styles.js";

export default function Navigation() {
  return (
    <NavContainer>
      <Link
        href="<https://www.campuscode.com.br/conteudos>"
        target="_blank"
        rel="noopener noreferrer"
      >
        conteúdos
      </Link>
      <Link
        href="<https://www.campuscode.com.br/treinamentos>"
        target="_blank"
        rel="noopener noreferrer"
      >
        treinamentos
      </Link>
      <Link
        href="<https://www.campuscode.com.br/para_empresas>"
        target="_blank"
        rel="noopener noreferrer"
      >
        para empresas
      </Link>
      <Link
        href="<https://www.campuscode.com.br/contacts/new>"
        target="_blank"
        rel="noopener noreferrer"
      >
        contato
      </Link>
    </NavContainer>
  );
}

Agora, nossa aplicação deve estar devidamente estilizada, como quando começamos.

Adicionando atributos para componentes de estilo

Ainda podemos melhorar esse componente removendo a repetição dos atributos:

target="_blank"
rel="noopener noreferrer"

Para isso, podemos nos aproveitar do método attrs do styled components, adicionando esses atributos no nosso componente Link:

/* styles.js */
export const Link = styled.a.attrs(() => ({
  target: "_blank",
  rel: "noopener noreferrer"
}))`
  margin-top: 32px;
  background-color: #47e500;
  text-decoration: none;
  ...
`

Dessa forma, conseguimos reduzir ainda mais nosso componente:

/* index.js */
import React from "react";
import { Link, NavContainer } from "./styles.js";

export default function Navigation() {
  return (
    <NavContainer>
      <Link href="<https://www.campuscode.com.br/conteudos>">
        conteúdos
      </Link>
      <Link href="<https://www.campuscode.com.br/treinamentos>">
        treinamentos
      </Link>
      <Link href="<https://www.campuscode.com.br/para_empresas>">
        para empresas
      </Link>
      <Link href="<https://www.campuscode.com.br/contacts/new>">
        contato
      </Link>
    </NavContainer>
  );
}

Passando props para componentes de estilo

No nosso código ainda temos a repetição da url https://www.campuscode.com.br/, então para evitar isso vamos passar a prop to indicando que queremos acessar um caminho dessa url:

/* styles.js */
export const Link = styled.a.attrs(props => ({
  target: "_blank",
  rel: "noopener noreferrer"
    href: `https://www.campuscode.com.br/${props.to}`
}))`
  margin-top: 32px;
  background-color: #47e500;
  text-decoration: none;
  ...
`

E no nosso componente:

/* index.js */
import React from "react";
import { Link, NavContainer } from "./styles.js";

export default function Navigation() {
  return (
    <NavContainer>
      <Link to="conteudos">conteúdos</Link>
      <Link to="treinamentos">treinamentos</Link>
      <Link to="para_empresas">para empresas</Link>
      <Link to="contacts/new">contato</Link>
    </NavContainer>
  );
}

Assim, a nossa aplicação fica bem mais organizada numa estrutura de pastas com cada coisa em seu lugar. Isso torna também nossos componentes mais fáceis de serem reutilizados, na mesma ou em outras aplicações!

Foto de perfil do autor
Lucas Amaral

Dev na Rebase