O styled-components é uma ferramenta excelente para quem desenvolve front-end. Com ela, podemos facilmente criar
componentes independentes e separados da nossa aplicação sem ter que se preocupar com os nomes das classes CSS.

Nesse artigo, abordarei alguns exemplos de boas práticas com styled-components que faço em meus projetos.

 
 
<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Classes CSS
</Heading>

Vamos supor que nós tenhamos um componente Button, e que ele terá diferentes tamanhos para cada página da aplicação.

```js
const Button = styled.button`
 background: #47b04b;
 border: none;
 border-radius: 4px;
 color: #fff;
 cursor: pointer;
 font-size: 16px;
 padding: 15px 20px;
 transition: 0.5s;
 margin: 20px;
 &:hover {
 box-shadow: 0 0 6px 1px #20bc2678;
 background: #32b437;
 }
`
```

O mais comum é criarmos uma classe CSS para cada tamanho e alterar o className do Button para o tamanho que a gente quer.

```js
const Button = styled.button`
 ...
 &.small {
 width: 100px;
 font-size: 14px;
 }
 
 &.medium {
 width: 150px;
 font-size: 16px;
 }
 
 &.large {
 width: 250px;
 font-size: 18px;
 }
 
 &.xlarge {
 width: 350px;
 font-size: 28px;
 }
`
```

Agora, vamos supor que precisemos de mais classes para alterar as cores dos nossos botões.

```js
const Button = styled.button`
 ...
 
 &.primary {
 background-color: #007bff;
 }
 
 &.success {
 background-color: #28a745;
 }
 
 &.warning {
 background-color: #ffc107;
 }
 
 &.danger {
 background-color: #dc3545;
 }
`
```

Nesse exemplo, temos classes CSS que apenas alteram o tamanho e a cor do componente mas poderíamos ter milhares de outras classes.

Quando temos muitas classes CSS podemos nos perder no código e demorar para entender o que, exatamente, cada classe faz. O mais indicado seria usar <code>props</code>.

Podemos simplesmente passar as <code>props</code> que desejamos que o componente tenha em cada página da aplicação. No nosso caso, podemos passar a <code>prop size</code> e a <code>prop color</code>.

```js
//index.js 
<Button size="small" color="primary">Entrar</Button>

//styled.js
const Button = styled.button`
 ...
`
```

E em nosso styled.js, criaremos um objeto chamado <code>modifierButton</code>, e dentro dele funções com os nomes dos valores das <code>props</code> que acabamos de passar para o componente.

```js
 import styled, { css } from "styled-components"
 
 const modifierButton = {
 small: () => css`
 width: 100px;
 font-size: 14px;
 `,
 
 medium: () => css`
 width: 150px;
 font-size: 16px;
 `,
 
 large: () => css`
 width: 250px;
 font-size: 18px;
 `,
 
 xlarge: () => css`
 width: 350px;
 font-size: 20px;
 `,
 
 primary: () => css`
 background-color: #007bff;
 `,
 
 success: () => css`
 background-color: #28a745;
 `,
 
 warning: () => css`
 background-color: #ffc107;
 `,
 
 danger: () => css`
 background-color: #dc3545;
 `,
 }
```

Agora, é só receber a <code>props</code> passada no componente em nosso arquivo styled.js e chamar a <code>modifierButton</code> de acordo com o valor da própria <code>props</code>.

```js
const Button = styled.button`
 ... 
 
 $({ size, color }) => css`
 ${!!size && modifierButton[size]()}
 ${!!color && modifierButton[color]()}
 `
 
`
```

Com isso carregamos dinamicamente o estilo que queremos no componente via <code>props</code>.

Note que, eu faço uma validação em <code>${!!size...}</code> e outra em <code>${!!color ...}</code>. Se a validação passar,
vai ser chamado uma função dentro do <code>modifierButton</code> de acordo o valor de <code>size</code> ou <code>color</code>

 
 
<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 CSS Aninhado
</Heading>

Você já deve ter visto/feito um componente com vários elementos dentro de outro elemento dentro de outro elemento e assim por diante.

```js
export const section = styled.section`
 background-color: #fff;
 display: flex;
 justify-content: center;
 
 &.about {
 background: #aaa;
 padding: 20px;
 .content {
 background-color: #aaa;
 .card {
 .card-header {
 h1 {
 span {
 color: #32b437;
 }
 }
 }
 }
 }
 } 
`
```

Ao invés de fazer um componente com muitos elementos internos, classes e subclasses, quebre esse componente em diversos outros componentes.

```
export const About = styled(Section)`
 background: #aaa;
 padding: 20px;
`
export const Content = styled.div`
 ...
`
export const Card = styled.div`
 ...
`
export const CardHeader = styled.div`
 ...
` 
```
Dessa forma, o código fica mais organizado e de fácil compreensão.

 
 
<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Sobrescrever CSS
</Heading>

Em alguns casos, quando estamos usando biblioteca de terceiros principalmente, precisamos alterar um componente que já possui seus estilos próprios dentro de alguma página na nossa aplicação.

Para isso, podemos importar o componente que queremos alterar e criar outro componente a partir dele.

Com a função <code>styled(componente)</code>, conseguimos importar todo o estilo de algum elemento e aplicar no componente que estamos criando.


```js
export const About = styled(Section)`
 background: #aaa;
 padding: 20px;
`
```

Também podemos importar dentro do nosso componente 'pai' o componente 'filho' que queremos alterar. Nesse caso, 
o componente Button apenas terá <code>color: red;</code> dentro do componente About.

```js
export const About = styled.section`
 ${Button} {
 color: red;
 }
`
```

 
 
<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Conclusão
</Heading>

E chegamos ao fim desse post.😁

Mostrei algumas práticas que faça no meu dia a dia desenvolvendo com styled-components e que tem me ajudado bastante, espero que 
esse conteúdo tenha te ajudado de alguma forma.

Até mais!👋

O styled-components é uma ferramenta excelente para quem desenvolve front-end. Com ela, podemos facilmente criar componentes independentes e separados da nossa aplicação sem ter que se preocupar com os nomes das classes CSS.

Boas práticas com styled-components

Há muitas formas de se estruturar e organizar uma aplicação em React e temos muita liberdade para fazermos da forma como
acharmos melhor.

Uma das coisas que temos que ter em mente quando iniciamos
um novo projeto, é ter uma noção de como esse projeto vai se expandir, se ele vai ser um projeto de grande duração e com muitas
interações, muitas páginas, muitos componentes, muitas chamadas de api.

Ou, se ele vai ser um projeto pequeno, com poucas páginas,
poucos componentes e que consuma poucos serviços.

Tendo isso em mente, podemos pensar em uma estrutura de diretórios que faça sentido ao tamanho do projeto e também pensar nas tecnologias
adequadas para a nossa necessidade.

As tecnologias que eu costumo usar para desenvolver com React são:

- <LinkStyled
 href='https://create-react-app.dev/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 Create React App
 </LinkStyled> ou <LinkStyled
 href='https://nextjs.org/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 NextJS
 </LinkStyled> (Criar a aplicação)
- <LinkStyled
 href='https://styled-components.com/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 Styled Components
 </LinkStyled> (Estilização dos componentes)
- <LinkStyled
 href='https://www.typescriptlang.org/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 TypeScript
 </LinkStyled> (Melhora o código com a tipagem)
- <LinkStyled
 href='https://www.typescriptlang.org/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 Storybook
 </LinkStyled> (Criação e documentação dos componentes)
- <LinkStyled
 href='https://redux.js.org/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 Redux
 </LinkStyled>
 , <LinkStyled
 href='https://redux-toolkit.js.org/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 Redux Toolkit
 </LinkStyled> ou <LinkStyled
 href='https://pt-br.reactjs.org/docs/context.html'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 Context API
 </LinkStyled> (Gerenciar o estado global)
- <LinkStyled
 href='https://prettier.io/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 Prettier
 </LinkStyled> (Formatação de código)

Dependendo do projeto eu faço algumas variações dessas tecnologias, mas acho que para todo
tipo de projeto o <LinkStyled href='https://styled-components.com/' target='_blank' rel='noopener noreferrer' insideText='true'>Styled Components</LinkStyled>
é essencial.

Para estruturação de diretórios eu costumo criar as pastas de arquivos dentro da pasta `/src`, ficando assim:

```js
/src
 ├─ /components
 ├─ /context
 ├─ /hooks
 ├─ /pages
 ├─ /services
 ├─ /store
 ├─ /styles
 ├─ /utils
```

- `/components`: 
 Todos os componentes que estão sendo usados em 2 ou mais páginas

- `/context`: 
 Para armazenar a <LinkStyled href='https://pt-br.reactjs.org/docs/context.html' target='_blank' rel='noopener noreferrer' insideText='true'>Context API</LinkStyled> (se eu estiver usando)

- `/hooks`: 
 Coloco todos os Custom Hooks

- `/pages`: 
 Aqui fica todas as páginas da aplicação

- `/services`: 
 Aqui coloco todos os módulos, ou algumas chamadas externas

- `/store`: 
 Caso eu use o <LinkStyled href='https://redux.js.org/' target='_blank' rel='noopener noreferrer' insideText='true'>Redux</LinkStyled>, <LinkStyled href='https://redux-toolkit.js.org/' target='_blank' rel='noopener noreferrer' insideText='true'>Redux Toolkit</LinkStyled>

- `/styles`: 
 Estilos globais e temas do <LinkStyled href='https://styled-components.com/' target='_blank' rel='noopener noreferrer' insideText='true'>Styled Components</LinkStyled>

- `/utils`: 
 Scripts helpers que podem ajudar (máscaras de formatação e etc)
 

<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Como organizar os componentes
</Heading>

Dentro da pasta `/components`, eu crio uma subpasta para cada componente separadamente:

```js
/components
	├─ /Heading
	│ ├─ index.tsx
	│ ├─ styled.ts
	│ ├─ stories.tsx
	├─ /Footer
	│ ├─ index.tsx
	│ ├─ styled.ts
	│ ├─ stories.tsx
```

Note que nesse exemplo eu estou usando o <LinkStyled href='https://www.typescriptlang.org/' target='_blank' rel='noopener noreferrer' insideText='true'>TypeScript</LinkStyled>,
por isso os arquivos estão com a extensão .ts e .tsx.

Caso queria implementar testes nos componentes, minha recomendação é criar um arquivo test.ts dentro
do diretório do próprio componente.

 
 

<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Como organizar as páginas
</Heading>

Para as páginas, sigo basicamente a mesma estrutura usada para os componentes, com pequenas alterações:

```js
/pages
	├─ /Home
	│ ├─ index.tsx
	│ ├─ styled.ts
	├─ /About
	│ ├─ index.tsx
	│ ├─ styled.ts
	
```

Nesse caso, tenho apenas uma `index.tsx` que é a própria página e um arquivo `styled.ts` para estilizar
ela.

 

<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Conclusão
</Heading>

E chegamos ao fim desse post.😁

Essa é a organização e estruturação que eu uso para os meus projetos em React,
e funciona muito bem tanto em projetos menores quanto em projetos maiores.

Até mais!👋

Para nós Devs Front-End é de extrema importância que fiquemos atentos na estruturação de um novo projeto em React para evitarmos retrabalho no futuro. Nesse post, mostro uma forma bem legal de como estruturar um projeto em React.

Uma abordagem de como organizar diretórios em aplicações React

Como estruturar e organizar aplicações em React

Quando estamos trabalhando em um grande projeto, normalmente é feito a separação das API's em ambientes. Temos o ambiente de
desenvolvimento (DEV), homologação (HMG) e produção (PRD).

No ambiente de DEV e HMG apenas vai ser disponibilizado as API's que estão em desenvolvimento. Já em PRD, vai ser
disponibilizado as API's que já estão prontas e validadas para uso.

Mas, como o nosso Front-End vai saber quais API's carregar para cada tipo de ambiente ?

 
 

<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Variáveis de ambientes
</Heading>

Com as variáveis de ambientes conseguimos carregar as API's de acordo com o ambiente que o nosso Front-End está sendo executado.

Para usá-las basta criar na pasta raíz do seu projeto o arquivo `.env.development` e incluir todos os endpoints das API's e
chaves do ambiente de DEV e outro arquivo `.env.production` e incluir todos os endpoints das API's e chaves de PRD.

Por exemplo:

```js
// .env.development
REACT_APP_API_KEY='Sua API Key de DEV'
REACT_APP_API_CLIENT_ID='Seu Client_ID de DEV'
REACT_APP_ENDPOINT_NOME='Seu endpoint de DEV'
REACT_APP_ENDPOINT_NOME2='Outro endpoint de DEV'
```

 

Agora preencha o `.env.production` com os mesmos nomes das variáveis, mas com os valores de produção:

```js
// .env.production
REACT_APP_API_KEY='Sua API Key de PRD'
REACT_APP_API_CLIENT_ID='Seu Client_ID de PRD'
REACT_APP_ENDPOINT_NOME='Seu endpoint de PRD'
REACT_APP_ENDPOINT_NOME2='Outro endpoint de PRD'
```

 

Lembre-se também de criar um arquivo `.env.example` para servir como exemplo de todas as possíveis variáveis que a aplicação possui:

```js
// .env.example
REACT_APP_API_KEY=''
REACT_APP_API_CLIENT_ID=''
REACT_APP_ENDPOINT_NOME=''
REACT_APP_ENDPOINT_NOME2=''
```

<BlockQuote>
 
 Note que, as variáveis estão com o prefixo <code>REACT_APP_</code>, pois
 nesses exemplos usei o{' '}
 <LinkStyled
 href='https://create-react-app.dev/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 CRA
 </LinkStyled>
 , caso esteja usando o <LinkStyled
 href='https://nextjs.org/'
 target='_blank'
 rel='noopener noreferrer'
 insideText='true'
 >
 NextJS
 </LinkStyled> altere os prefixos das variáveis para <code>NEXT_PUBLIC_</code>
 
</BlockQuote>

 

Agora, basta apenas importar a variável ou as variáveis que queremos usar em nossa aplicação:

```js
const fetchData = async () => {
 const endpointUrl = process.env.REACT_APP_ENDPOINT_NOME
 const response = await fetch(endpointUrl)
 const data = await response.json()
 return data
}
```

Com isso, quando rodarmos a nossa aplicação em DEV será carregado os dados do arquivo `.env.development`,
e no ambiente de PRD será carregado os dados do arquivo `.env.production`.

No entanto, toda vez que buildarmos a nossa aplicação sempre será carregado os dados do arquivo `.env.production`.

Mas, como fazer um build separado e carregar os dados de DEV ?

Nesse caso, podemos instalar o pacote <LinkStyled href='https://www.npmjs.com/package/env-cmd' target='_blank' rel='noopener noreferrer' insideText='true'> env-cmd</LinkStyled>
e fazer uma pequena alteração no `package.json` para fazer um build de DEV separado:

```js
"scripts": {
 "start": "react-scripts start",
 "build:dev": "env-cmd -f .env.development react-scripts build",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
},
```

Basta agora rodarmos `yarn build:dev` ou `npm run build:dev` para fazer o build da aplicação no ambiente de desenvolvimento.

 
 

<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Conclusão
</Heading>

E chegamos ao fim desse post.😁

Vimos uma forma legal de trabalhar com as variáveis de ambientes no React.

Aqui abordei apenas DEV, HMG e PRD, mas poderíamos ter mais outros ambientes ou também poderíamos ter mais variáveis com mais
configurações.

Até mais!👋

Em uma aplicação Front-End podemos ter diversos ambientes e cada um deles com suas especifidades. Neste post falo sobre como podemos trabalhar com eles de forma prática.

Uma forma legal de usar múltiplos ambientes em React

Como trabalhar com múltiplos ambientes em React

A pseudo-classe <LinkStyled insideText='true' className="external"><code>:is()</code></LinkStyled> serve para <LinkStyled insideText='true' className="external">simplificar</LinkStyled> a escrita em CSS e para evitar "quebras" de layout.

Ela pode ser bem útil de se usar quando temos que estilizar muitos elementos dentro de um outro elemento.

Vamos adicionar esse código HTML como exemplo:
```html
<header>
 <a href="#!">Header Link</a> 
 <h1>olá mundo</h1>
 <h2>olá mundo 2</h2>
 Header Paragraph
</header>
```

E inicialmente, vamos adicionar esse código em CSS:
```css
header a,
header h1,
header h2,
header :p {
 color: green;
}
```
Note que, todos os elementos estão sendo chamados no CSS corretamente <LinkStyled insideText='true' className="external">menos</LinkStyled> o elemento <LinkStyled insideText='true' className="external"><code>:p</code></LinkStyled>
 

Quando temos <LinkStyled insideText='true' className="external">vários</LinkStyled> elementos sendo estilizados de uma 
vez só e <LinkStyled insideText='true' className="external">erramos</LinkStyled> na chamada de apenas um elemento CSS, toda a 
estilização <LinkStyled insideText='true' className="external">não funciona</LinkStyled>

<Embed src='https://codepen.io/RamonCP/embed/Jjbewbm' />
 
 
 
 

Para evitar esse tipo de erro usaremos a pseudo-classe <LinkStyled insideText='true' className="external"><code>:is()</code></LinkStyled>:
```css
header :is(a, h1, h2, :p) {
 color: green;
}
```

Se <LinkStyled insideText='true' className="external">errarmos</LinkStyled> na chamada de um elemento, 
os outros elementos ainda serão estilizados:

<Embed src='https://codepen.io/RamonCP/embed/YzERemX' />
 
 
 
 

Outra vantagem de se utilizar a <LinkStyled insideText='true' className="external"><code>:is()</code></LinkStyled> é que não 
precisamos escrever o mesmo elemento diversas vezes. Por exemplo:

Sem <LinkStyled insideText='true' className="external"><code>:is()</code></LinkStyled>:
```css
section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6, 
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
 color: #BADA55;
}
```
 

Com <LinkStyled insideText='true' className="external"><code>:is()</code></LinkStyled>:
```css
:is(section, article, nav, .content) :is(h1, h2, h3, h4, h5, h6) {
 color: #BADA55;
}
```
 
 
 
 
<Heading border='borderLeft' borderColor='pinkColor' size='xxlarge'>
 Conclusão
</Heading>

E chegamos ao fim desse post.😁

Espero que tenha gostado. Se quiser saber mais sobre a pseudo-classe <LinkStyled insideText='true' className="external"><code>:is()</code></LinkStyled> dê
uma olhada na <LinkStyled href='https://developer.mozilla.org/en-US/docs/Web/CSS/:is' target='_blank'
 rel='noopener noreferrer'
 insideText='true'>documentação</LinkStyled>.

Até mais!👋

Um post para mostrar um pouco sobre a :is() uma das mais novas pseudo-classes que foram implementadas no CSS.

Blog

Últimos Posts

A pseudo-classe :is() do CSS

O seletor que pode te ajudar a escrever um CSS puro melhor

Boas práticas com styled-components

Como trabalhar com múltiplos ambientes em React

Uma forma legal de usar múltiplos ambientes em React

Como estruturar e organizar aplicações em React

Uma abordagem de como organizar diretórios em aplicações React