Create react app e emotion js

Não existem inocentes, apenas diferentes graus de responsabilidade. Stieg Larsson.

gif

Importante

Pode ser que esse post esteja um pouco desatualizado, pois escrevi há muito tempo, no fim desse artigo vou deixar alguns links que podem ajudar. Obrigado 😊

Se assim como eu, você gosta de testar algumas novidades (elas aparecem todos os dias), e não gosta de fazer muitas configurações, você está no lugar certo. Lembro que quando comecei a trabalhar como desenvolvedor front-end (há dois anos atrás) ainda existiam projetos com o bom e velho css puro.

Mas em muitos lugares, os pré-processadores Sass, Less e Stylus já bombavam e era praticamente uma skill obrigatória.

No projeto que eu estava usávamos css puro, quando saí para novos projetos eles estavam usando uma nova forma de css, que é o css in js. Por isso resolvi testar como funciona junto com o create-react-app para ver se realmente é uma forma legal de se escrever nossos estilos direto no javascript e o quanto pode ser vantajoso para o nossa aplicação. Chega de enrolar, bora codar.

Criando o projeto

Vamos o CRA para criar o projeto npx create-react-app emotion depois basta entrar na pasta do projeto cd emotion e rode um yarn start seu projeto estará rodando na normalmente.

Agora vamos instalar nossa biblioteca de estilo, para isso basta executar dois comandos no terminal:

yarn add @emotion/styled @emotion/react

Pronto agora que já temos nossa biblioteca de estilos instaladas vamos modificar algumas coisas.

No nosso App.js, importamos o css para estilizar o componente, vamos pegar o estilo do nosso link e vamos modifica-lo dentro do App.js

Dentro do App.css temos o seguinte estilo:

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Vamos fazer uma pequena alteração no nosso link, para vocês entenderem o quanto é fácil de usarmos o emotion.

import styled from '@emotion/styled'
import logo from './logo.svg';
import './App.css';
import styled from '@emotion/styled'

const AppLink = styled.a`
  color: #61dafb;
`

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <AppLink
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </AppLink>
      </header>
    </div>
  );
}

export default App;

Como vocês puderam perceber é bem simples de se usar o css in js. Espero que tenham gostado desse tutorial básico de como instalar e utilizar essa lib de css.

Alguns links:

5 plugins legais para VIM que vão deixar seu dia mais tranquiloPost AnteriorPróximo Post