Como usar Styled Components

Nós programadores temos o desafio de fazer seus códigos ficarem bonitos e fáceis de entender. Eles precisam organizar as informações e seguir padrões para que qualquer um possa ler e entender o que está acontecendo. Isso é importante porque ajuda a tornar o código mais eficiente, fácil de manter e de escalar. Programadores experientes sabem disso e fazem o possível para escrever códigos limpos, curtos e fáceis de entender.

Styled Components é uma ferramenta de estilos muito usada em React que tem como objetivo deixar a estilização mais simples e componentizada. Muitos desenvolvedores passaram a utilizar o css inline como uma alternativa ao CSS normal, como o Tailwind CSS, porém ao usar essa abordagem para estilizar, deixamos os arquivos densos e de difícil leitura. Nesse contexto, o Styled Components surge como uma solução para esses problemas, oferecendo uma maneira simples e intuitiva de criar e gerenciar estilos em aplicações React, sem fugir muito do CSS, mas com recursos adicionais como variáveis, mixins e props condicionais.

Onde e como usamos o Styled Components?

O Styled Components é muito usado em diversas áreas da indústria de tecnologia, principalmente no desenvolvimento web. Ele tem se tornado popular por ser fácil de usar e por permitir uma divisão mais clara dos componentes estilizados. Empresas como Netflix, Airbnb, GitHub e Slack são alguns exemplos de organizações que utilizam o Styled Components em suas aplicações, mostrando que é uma tecnologia requisitada e confiável.

Além disso, essa biblioteca tem sido cada vez mais adotada por desenvolvedores independentes e equipes de desenvolvimento de todos os tamanhos, tornando-se uma das ferramentas mais usadas dos dias de hoje.

Vale ressaltar também que o Styled Components permite a utilização de variáveis, funções e outros recursos do JavaScript para criar estilos dinâmicos e reutilizáveis. Isso também facilita a manutenção do código, pois é possível fazer alterações em estilos específicos, sem precisar vasculhar toda a folha de estilos do projeto.

O Styled Components trás quais ferramentas?

O Styled Components oferece diversas ferramentas para a estilização de nossas páginas Web. Com uma sintaxe semelhante ao CSS e funcionalidades como componentização, props condicionais, estilos globais e extensão de estilos.

Um dos maiores desafios do programador é dividir e organizar os componentes de maneira que seja fácil de ler e por consequência de se fazer manutenção. Com o aumento da popularidade do React, surgiram diversas soluções para esse problema, como o CSS-e-JS. Sò que essa abordagem apresenta algumas desvantagens, como a dificuldade de separar responsabilidades entre estilos e componentes, e a complexidade de se trabalhar com pseudo-seletores e media queries.

Nesse contexto, o Styled Components surge como uma solução para esses problemas, oferecendo uma maneira intuitiva de criar e gerenciar estilos em aplicações React. Com a utilização do Styled Components, é possível definir estilos diretamente no componente React, o que facilita a separação de responsabilidades. Além disso, é possível criar estilos condicionais baseados em props do componente, o que oferece uma grande flexibilidade na criação de interfaces dinâmicas e interativas.

Outra vantagem do Styled Components é a possibilidade de definir estilos globais para toda a aplicação, utilizando a ferramenta createGlobalStyle. Isso facilita a padronização e consistência dos nossos componentes web, o que é especialmente útil em projetos de grande escala. Além disso, é possível estender estilos de um componente para outro, utilizando a propriedade extend do Styled Components, o que permite a criação de temas e estilos compartilhados.

Em resumo, o Styled Components é uma biblioteca extremamente útil que oferece diversas ferramentas para a criação de ótimas interfaces de usuário em aplicações React.

Como criar um projeto React usando Styled Components?

Garanta que você tem o npm instalado. O npm é o gerenciador de pacotes do Node.js e é instalado automaticamente com o Node.js. Se você não tem o Node.js instalado, pode baixá-lo gratuitamente em https://nodejs.org/.

Quando tiver o Node.js em seu sistema, você pode usar o npm para instalar o Styled Components em seu projeto React. Para fazer isso, abra o terminal do seu sistema e navegue até a pasta do seu projeto. Em seguida, execute o seguinte comando para inicializar um novo projeto React:

npx create-react-app my-styled-components-project

Assim que você tiver instalado o Node.js em seu sistema, você pode usar o npm para instalar o Styled Components em seu projeto React. Para fazer isso, abra o terminal do seu sistema e navegue até a pasta do seu projeto. Em seguida, execute o seguinte comando para inicializar um novo projeto Node.js:

cd my-styled-components-project

npm install --save styled-components

Para demonstrar a utilização do Styled Components faremos uma página de login. Primeiro crie um arquivo chamado LoginComponents.js.

/components/LoginComponents.js

A primeira linha importa a biblioteca Styled Components. Em seguida, são criadas quatro constantes usando a função styled. Cada constante representa um elemento diferente do formulário de login que estamos estilizando: a div que envolve o formulário, o próprio formulário, o título do formulário, o input de login e o botão de login.

Dentro de cada constante, há uma série de propriedades CSS que serão aplicadas ao elemento correspondente. É possível utilizar propriedades CSS como em um arquivo CSS tradicional, porém de uma forma mais modularizada e dinâmica.

A constante LoginForm, por exemplo, tem um fundo branco (background-color: #fff), um espaçamento interno de 40 pixels (padding: 40px), bordas arredondadas (border-radius: 5px) e uma sombra aplicada (box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2)). A constante LoginButton tem um fundo azul claro (background-color: #008CBA), texto branco (color: #fff), bordas arredondadas (border-radius: 5px) e um estilo diferente quando o cursor é passado sobre ele (background-color: #006B8E).

Em seguida podemos utilizar esse componentes em outras páginas, tendo nossos componentes já estilizados.

Primeiro, são criadas constantes que definem o estilo dos elementos do formulário, como a div que envolve o formulário, o formulário em si, o título, os campos de entrada e o botão de login. Esses componentes serão a base para a nossa página de Login.

Em seguida, é criada uma função de componente chamada Login, que retorna a estrutura HTML do formulário de login utilizando as constantes de estilo definidas anteriormente. No nosso exemplo ele não está funcionando de maneira prática, caso deseje fazer algo mais avançado, recomendo fazer o login com uma requisição a um banco de dados e adicione uma função de navegação.

Em resumo, o código cria um formulário de login estilizado usando a biblioteca Styled Components e o torna disponível como um componente React reutilizável.
Por fim, entre altere o App.js e rode o projeto para ver os componentes em funcionamento:

Este código é um exemplo de como utilizar o React Router para criar rotas na aplicação. O React Router é uma biblioteca que permite a navegação entre diferentes páginas sem recarregar a página inteira, o que torna a experiência do usuário mais suave e rápida.

No nosso exemplo, o componente App é definido como uma função que retorna o componente BrowserRouter que envolve uma única rota definida pelo componente Route. Essa rota é definida com o caminho "/", o que significa que o componente LoginPage será renderizado quando o usuário acessar a raiz do site.

Assim, quando o usuário acessa a página, o React Router verifica a URL e se ela corresponde ao caminho definido no Route, o componente LoginPage é renderizado na página sem recarregar a página inteira.

Com isso temos o projeto funcionando e podemos aplicar e criar componentes já estilizados que podem ser usados em diversas outras páginas do mesmo projeto.

Conclusão

Em resumo, o Styled Components é uma biblioteca que está sendo usada em muitos projetos e é muito útil para a estilização componentizada em aplicações React. É muito semelhante ao CSS e tem diversas funcionalidades adicionais  Além disso se tornou uma das ferramentas mais usadas no desenvolvimento Web.

Desenvolvedores frontend plenos devem conhecer essa biblioteca e saber como utilizá-la em seus projetos, já que a popularidade do Styled Components tem crescido rapidamente nos últimos anos, sendo amplamente utilizado em empresas de tecnologia de todos os tamanho.

Resumidamente, o Styled Components é uma biblioteca que pode trazer grande produtividade e eficiência na estilização de suad aplicações React, tornando-se uma ferramenta indispensável para desenvolvedores frontend plenos que buscam criar interfaces de usuário.