Potencializando o React

Potencializando o React

Por Fayra Miranda

Nos últimos três textos, iniciamos uma aventura pelo o universo de uma das bibliotecas mais famosas em JavaScript: o React.

Já abordamos alguns conceitos do React como: JSX, componentes, props, estado, ciclo de vida e virtual DOM. Além disso, demos algumas dicas de como iniciar seus estudos sobre React.

No texto de hoje, vamos falar sobre duas formas potencializar o seu desenvolvimento em React.

Styled-Components

No desenvolvimento front-end, a estilização é uma parte fundamental. Geralmente quando começamos a aprender o desenvolvimento web, usamos o CSS para estilizar o nosso site e deixá-lo bem bonitão.

Quando queremos estilizar algo no React.JS, há algumas outras melhores alternativas. Uma delas é o styled-components. Mas afinal, o que é styled-components?

Styled-Components é uma biblioteca construída para estilizar aplicações em React.JS e React Native. Ele permite uma estilização a nível de componente, pois o mesmo é transformado em uma construção de estilo. Essa biblioteca foi criada com algumas motivações:

  • Eliminação de Bugs devido a colisão de nomes das Classes: O styled-components cria nome das classes exclusiva para cada estilo. Isso permite que não haja uma preocupação com duplicação, sobreposição e nem erros de ortografia.
  • Automatização de CSS Crítico: Controla a renderização dos componentes (quais componentes e estilos serão renderizados). Com isso, diminui a quantidade de código carregada e consecutivamente melhora a experiência do usuário.
  • Facilidade de Excluir CSS: Permite facilitar a verificação se há alguma repetição dos nomes das classes, pois em componentes estilizados isso não ocorre, uma vez que cada estilo tem um componente próprio. Ou seja, se excluirmos um componente, sua estilização também será excluída junto.
  • Simplificação da estilização dinâmica: Você não precisará gerenciar manualmente uma grande quantidade de classes. Além disso, é possível adaptar os estilos de um componente baseando-se em props ou em um tema global.
  • Facilidade de Manutenção: Não é necessário procurar em vários arquivos onde está a estilização que afeta o comportamento do componente. Com isso, independentemente do tamanho do código, a manutenção se torna mais fácil.
  • Prefixação automática do fornecedor: Você pode escrever o CSS no padrão atual e sem se preocupar, pois a biblioteca styled-componentes fará o resto.

Dito tudo isso, você deve estar se perguntando: Como o styled-componentes funciona na pática?

Essa resposta é simples: A grosso modo, você escreverá a estilização entre as crases e, após isso, chamará o nome da estilização no componente. Vamos nos aprofundar um pouquinho mais agora no styled-components.

O primeiro passo para usar o styled-componentes é instalar a biblioteca dando o seguinte comando no terminal:

npm install styled-components

Após instalar, você precisa ter o componente em React criado. Para exemplificar melhor, vamos fazer uma Div chamada quadrado.

import React from ‘react’
function Quadrado() {
return(
<div className=”Quadrado”>
<p>Aqui será o nosso Quadrado</p>
</div>
)
}
export default Quadrado;

O próximo passo é criar um arquivo onde faremos a estilização do componente (você pode fazer tudo no mesmo arquivo, porém conforme a lógica do componente fica mais completa e as linhas de código ficam maiores, mais difícil será a manutenção do código). Criamos um arquivo Javascript chamado estilizacao.js, com o seguinte código:

import styled from ‘styled-components’
export const EstilizacaoQuadrado = styled.div ` `

No código anterior, importamos a biblioteca styled-components e fizemos a estrutura básica para sua estilização: criamos uma constante com o nome da estilização dada e a exportamos, chamamos a palavra reservada styled e colocamos o tipo do componente que será estilizado (nesse caso, uma div).

Após esse processo, vamos realmente estilizar o componente. Nosso quadrado será roxo e com o texto de dentro preto. Para fazer isso, o código ficará assim:

import styled from ‘styled-components’
export const EstilizacaoQuadrado = styled.div `
border : solid 2px white;
background: purple;
`

Depois disso, devemos chamar no componente a estilização.

import React from 'react'
import {EstilizacaoQuadrado} from './Estilizacao'
function Quadrado() {
return (
<EstilizacaoQuadrado className="Quadrado">
<p>Aqui sera o nosso Quadrado </p>
</EstilizacaoQuadrado>
)
}
export default Quadrado;

Esse código, dará o seguinte resultado:

Ou seja, o styled-components nos permite estilizar um componente em um arquivo JavaScript.

Jest

Junto com o React, várias tecnologias foram desenvolvidas para aprimorar o processo de desenvolvimento. Uma delas é o Jest, framework criado pelo Facebook, cujo intuito é realizar testes unitários para verificar os possíveis erros da nossa aplicação.

Algumas vantagens do Jest são:

  • Ser Rápido e Seguro: Jest consegue executar vários testes de forma paralela;
  • Cobertura de Código: Jest coleta as informações de cobertura de código, mesmo se os arquivos não forem testados;
  • Possuir Simulações Fáceis: Facilidade para simular qualquer objeto fora do escopo do teste;
  • Exceções Claras: Facilidade para identificar o motivo do teste não ter passado.

Para iniciar a utilização do Jest é bem simples. Primeiro de tudo, é necessário instalar o framework. Para isso, é só rodar o seguinte comando no seu terminal:

npm install --save-dev jest

Suponhamos que vamos testar se dois valores dão um resultado de soma certo. Para isso, o primeiro passo após a instalação é criar uma função em um arquivo chamado sum.js:

function sum(a, b) {
return a + b;
}
module.exports = sum;

Depois de criar o trecho de código que será testado, criamos um arquivo chamado sum.test.js onde realizaremos os nossos testes.

const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});

Em seguida, é necessário você adicionar o Jest no package.json.

{ 
“scripts”: {
"test": "jest"
}
}'

Depois desse processo, é só executar o teste utilizando o seguinte comando no terminal:

npm run test

Caso o seu teste passe, irá aparecer um PASS! Por isso que o Jest é bem simples!😃

É isso. Você conhece outra biblioteca ou framework interessante para React? Se sim, conte para gente!

….

Se você já utilizou Styled-Components e Jest, compartilhe com a gente a sua experiência!

Gostou do que leu? Então não se esqueça de dar mais de 50 claps e curtir nossas redes. É um pequeno gesto mas que auxilia este conteúdo impactar a vida de mais mulheres.

Deixe um comentário