No React, temos diversas formas de lidar com formulários. Em formulários menores, podemos armazenar os valores dos inputs em estados ([Controlled Components](https://pt-br.reactjs.org/docs/forms.html#controlled-components)) ou em refs ([Uncontrolled Components](https://pt-br.reactjs.org/docs/uncontrolled-components.html)), mas com formulários maiores e mais complexos é recomendável o uso de uma biblioteca específica para isso. Atualmente existem diversas libs competentes para essa tarefa, como, por exemplo, a [Formik](https://formik.org/), a [unform](https://unform.dev/) e a [React Hook Form](https://react-hook-form.com/), que usaremos aqui como exemplo.

## React Hook Form

React Hook Form é um lib flexível, baseada nos conceitos de hooks e uncontrolled components, que também suporta React Native e TypeScript. Vamos começar instalando a lib:

```bash
yarn add react-hook-form

# ou
npm install react-hook-form
```

Neste exemplo, criaremos o seguinte componente usando TypeScript: 

```tsx
// LoginForm.tsx

import styles from './LoginForm.module.scss';

const LoginForm = () => {
  return (
    <form className="form">
      <h2>Login</h2>

      <div className="form__wrapper">
        <label htmlFor="email">
          <span>Email</span>
        </label>

        <input
          className={errors.email ? "error" : ""}
          type="email"
          id="email"
          placeholder="jhon_smith@email.com"
        />

        {errors.email && (
          <span className="form__error-message">
            {errors.email.message}
          </span>
        )}
      </div>

      <div className="form__wrapper">
        <label htmlFor="password">
          <span>Senha</span>
        </label>

        <input
          className={errors.email ? 'error' : ''}
          type="password"
          id="password"
          placeholder="******"
        />

        {errors.password && (
          <span className="form__error-message">
            {errors.password.message}
          </span>
        )}
      </div>

      <button>Entrar</button>
    </form>
  );
};

export default LoginForm;
```

Agora temos que importar o hook `useForm` e desestruturar alguns métodos:

```tsx
import { useForm } from 'react-hook-form';

...

const { register, handleSubmit, formState: { errors } } = useForm();
```

O método `register` vai criar referências de forma automática para nossos inputs, basta usá-lo da seguinte maneira:

```tsx
...

<input
  type="email"
  id="email"
  placeholder="jhon_smith@email.com"
  {...register('email')}
/>

...

<input
  type="password"
  id="password"
  placeholder="******"
  {...register('password')}
/>

...
```

Vamos criar a função de `onSubmit` do nosso formulário, e como estamos usando TypeScript, é legal definir as tipagens dos dados que receberemos: 

```tsx
import { useForm, SubmitHandler } from 'react-hook-form';

...

type FormData = {
  email: string;
  password: string;
};

const LoginForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>();

  const onSubmit: SubmitHandler<FormData> = (values, event) => {
    event?.preventDefault();
    console.log(values);
  }

  return (
    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
  ...
```
No código acima, foi importado o `SubmitHandler` de dentro do React Hook Form, que serve para nos auxiliar com as tipagens de formulários. No `onSubmit` do `form`, é necessário usar o método `handleSubmit` para acessar os dados digitados pelo usuário.

## Validando os dados com Yup

O [Yup](https://www.npmjs.com/package/yup) é uma biblioteca para análise e validação de dados, para usá-la em conjunto com o React Hook Form devemos instalar também os resolvers, que permite o uso de qualquer biblioteca de validação externa, como Yup, Zod, Joi, Superstruct, Vest, etc:

```bash
yarn add yup @hookform/resolvers

# ou
npm install yup @hookform/resolvers
```

Importando o Yup e seu respectivo resolver

```tsx
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

...
```

Criando schema de validação: 

```tsx

...

const formSchema = yup.object().shape({
  email: yup.string().required("Email obrigatório").email("Email inválido"),
  password: yup.string().required("Insira sua senha")
});

...
```

Por fim, a função `useForm` pode receber um objeto como argumento, basta passar o `yupResolver` com nosso schema na propriedade `resolver` para a validação funcionar:

```tsx
 const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: yupResolver(formSchema)
  });
```

Você pode acessar todo o código deste artigo no [StackBlitz](https://stackblitz.com/edit/react-hook-form-yup-example?file=src/components/LoginForm/index.tsx).



large_cover.jpg

medium_cover.jpg

small_cover.jpg

thumbnail_cover.jpg

cover.jpg

Lidando com formulários no React

Tratamento e validação de formulários

Para percorrer arrays podemos utilizar laços de repetições, como o `for` ou o `while`, por exemplo. Mas, se tratando de objetos, como fazemos isso? Aqui vão algumas alternativas:

## for...in

Segundo a nossa [amiga mdn](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in), a definição de for...in é a seguinte:

> O laço for...in  interage sobre propriedades enumeradas de um objeto, na ordem original de inserção.  O laço pode ser executado para cada propriedade distinta do objeto.

Vamos fazer um teste:

```js
  const goty = {
    2015: 'The Witcher 3: Wild Hunt',
    2016: 'Overwatch',
    2017: 'The Legend of Zelda: Breath of the Wild',
    2018: 'God of War',
    2019: 'Sekiro: Shadows Die Twice',
    2020: 'The Last of Us Part II'
  };

  for (let prop in goty) {
    console.log(`${prop}: ${goty[prop]}`);
  }

  // output:
  // 2015: The Witcher 3: Wild Hunt
  // 2016: Overwatch
  // 2017: The Legend of Zelda: Breath of the Wild
  // 2018: God of War
  // 2019: Sekiro: Shadows Die Twice
  // 2020: The Last of Us Part II
```

Porém, caso o `prototype` seja modificado, as alterações também serão exibidas:

```js
  Object.prototype.foo = function () {
    console.log('bar');
  }

  const goty = {
    2015: 'The Witcher 3: Wild Hunt',
    2016: 'Overwatch',
    2017: 'The Legend of Zelda: Breath of the Wild',
    2018: 'God of War',
    2019: 'Sekiro: Shadows Die Twice',
    2020: 'The Last of Us Part II'
  };

  for (let prop in goty) {
    console.log(`${prop}: ${goty[prop]}`);
  }

  // output:
  // 2015: The Witcher 3: Wild Hunt
  // 2016: Overwatch
  // 2017: The Legend of Zelda: Breath of the Wild
  // 2018: God of War
  // 2019: Sekiro: Shadows Die Twice
  // 2020: The Last of Us Part II
  // foo: function () {
  //   console.log('bar');
  // }
```

Para evitar que as propriedades herdadas sejam mostradas, devemos fazer uma verificação usando o método `hasOwnProperty()`:

```js
  Object.prototype.foo = function () {
    console.log('bar');
  }

  const goty = {
    2015: 'The Witcher 3: Wild Hunt',
    2016: 'Overwatch',
    2017: 'The Legend of Zelda: Breath of the Wild',
    2018: 'God of War',
    2019: 'Sekiro: Shadows Die Twice',
    2020: 'The Last of Us Part II'
  };

  for (let prop in goty) {
    if (goty.hasOwnProperty(prop)) {
      console.log(`${prop}: ${goty[prop]}`);
    }
  }

  // output:
  // 2015: The Witcher 3: Wild Hunt
  // 2016: Overwatch
  // 2017: The Legend of Zelda: Breath of the Wild
  // 2018: God of War
  // 2019: Sekiro: Shadows Die Twice
  // 2020: The Last of Us Part II
```

Agora sim, obtemos o resultado esperado.

## Object.keys()

Outra estratégia para iterar um objetos é transformá-lo em array e o método `Object.keys()` faz exatamente isso: ele cria um array de strings com as chaves do objeto. Dessa forma, basta percorrer o array retornado:

```js
  const goty = {
    2015: 'The Witcher 3: Wild Hunt',
    2016: 'Overwatch',
    2017: 'The Legend of Zelda: Breath of the Wild',
    2018: 'God of War',
    2019: 'Sekiro: Shadows Die Twice',
    2020: 'The Last of Us Part II'
  };

  const keys = Object.keys(goty);

  keys.forEach(key => {
    console.log(`${key}: ${goty[key]}`)
  });

  // output:
  // 2015: The Witcher 3: Wild Hunt
  // 2016: Overwatch
  // 2017: The Legend of Zelda: Breath of the Wild
  // 2018: God of War
  // 2019: Sekiro: Shadows Die Twice
  // 2020: The Last of Us Part II
```

## Object.entries()

Este método nos retorna um array com as chaves e os valores do objeto. No entanto, ele está em fase experimental, então é recomendado [checar sua compatibilidade](https://caniuse.com/object-entries) antes de usá-lo em produção.

```js
  const goty = {
    2015: 'The Witcher 3: Wild Hunt',
    2016: 'Overwatch',
    2017: 'The Legend of Zelda: Breath of the Wild',
    2018: 'God of War',
    2019: 'Sekiro: Shadows Die Twice',
    2020: 'The Last of Us Part II'
  };

  const entries = Object.entries(goty);

  entries.forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });

  // output:
  // 2015: The Witcher 3: Wild Hunt
  // 2016: Overwatch
  // 2017: The Legend of Zelda: Breath of the Wild
  // 2018: God of War
  // 2019: Sekiro: Shadows Die Twice
  // 2020: The Last of Us Part II
```

large_cover.png

medium_cover.png

small_cover.png

thumbnail_cover.png

cover.png

Veja algumas estratégias para percorrer objetos no JS.

Como iterar objetos no JavaScript

Vamos dar nossos primeiros passos com este poderoso pré-processador CSS.

Com o Sass (Syntactically Awesome Style Sheets), podemos dar "superpoderes" ao nosso CSS, utilizando recursos como variáveis, mixins, aninhamento de código, laços de repetição, dentre outros. Abordarei algumas destas funcionalidades neste post, então vamos lá!

## Instalação

Você pode realizar a instalação de duas maneiras: através de programas de terceiros, como o [Scout-App](https://scout-app.io/), ou usando a CLI. Aqui nós utilizaremos a segunda opção, para isso, abra um terminal e execute o comando:

```bash
npm i -g sass 
```

Após o processo de instalação, execute `sass --version` para conferir se foi instalado corretamente, você verá algo parecido com isso:

![Screenshot do terminal](https://res.cloudinary.com/dzhoowtzw/image/upload/v1626305265/ss_01_8367dfcb33.png)


## .sass vs .scss

O Sass aceita basicamente duas extensões de arquivos: `.sass` e `.scss`. A principal diferença fica na sintaxe, no primeiro o que vale é a indentação, já o segundo é bem similar ao CSS padrão. Veja o exemplo:

```scss
/* ==== .sass ==== */
.search input 
  padding: 0.5rem 1rem
  width: 100%
  font-size: 1rem
  border: 2px solid #00000088

  &:focus 
    border: 2px solid $primary-color


/* ==== .scss ==== */
.search input {
  padding: 0.5rem 1rem;
  width: 100%;
  font-size: 1rem;
  border: 2px solid #00000088;

  &:focus {
    border: 2px solid $primary-color;
  }
}
```

## Compilando para CSS

Como realizamos a instalação por CLI, usaremos o terminal para compilar nosso código. Na verdade, é bem simples, basta usar o comando `sass` apontando o arquivo ou a pasta de origem e em seguida o local de destino:

```bash
sass assets/scss/styles.scss:assets/css/styles.css

# ou
sass assets/scss:assets/css
```

Porém, toda vez que salvarmos nosso arquivo, teremos que executar novamente esse comando. Para tornar esse processo mais prático, você pode passar a flag `--watch`, que vai fazer com que o Sass fique "observando" as alterações feitas a cada salvamento e compilar novamente o código:

```bash
sass --watch assets/scss:assets/css
```

Outra flag interessante é a `style`, que define o estilo de saída, que pode ser: `expanded` que é o padrão, e o `compressed`, que resulta em um código minificado, ou seja, vai gerar todos os estilos em uma só linha:

```bash
# default
sass --watch assets/scss:assets/css --style expanded

# minificado
sass --watch assets/scss:assets/css --style compressed
```

Depois de processado, o código do exemplo usado anteriormente resultará no seguinte CSS:

```css
/* ==== --style expanded ==== */
.search input {
  padding: 0.5rem 1rem;
  width: 100%;
  font-size: 1rem;
  border: 2px solid #00000088;
}

.search input:focus {
  border: 2px solid #5544ee;
}


/* ==== --style compressed ==== */
.search input{padding:.5rem 1rem;width:100%;font-size:1rem;border:2px solid #00000088}.search input:focus{border:2px solid #54e}
```

## Variáveis

Assim como no CSS padrão, é possível armazenar dados como, por exemplo, fontes, cores e tamanhos em variáveis. Dessa forma, conseguimos reaproveitar os valores armazenados em qualquer parte do nosso código. Para declarar uma variável basta iniciá-la com um `$` antes do seu nome:

```scss
/* ==== scss ==== */
$font-primary: Arial, Helvetica, sans-serif;
$color-white: #f4f4f4;
$color-blue: #5544ee;

.btn {
  font-family: $font-primary;
  color: $color-white;
  background: $color-blue;
}


/* ==== css gerado ==== */
.btn {
  font-family: Arial, Helvetica, sans-serif;
  color: #f4f4f4;
  background: #5544ee;
}
```

## Aninhamento

Essa funcionalidade permite agrupar seletores, sendo bem útil para manter o código organizado e mais visual :

```scss
/* ==== scss ==== */
nav ul {
  display: flex;
  background: $primary-color;
  list-style: none;

  a {
    padding: 0.625rem;
    text-decoration: none;
    color: $color-white;
    transition: opacity 0.2s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }
}


/* ==== css gerado ==== */
nav ul {
  display: flex;
  background: #5544ee;
  list-style: none;
}

nav ul a {
  padding: 0.625rem;
  text-decoration: none;
  color: #f4f4f4;
  transition: opacity 0.2s ease-in-out;
}

nav ul a:hover {
  opacity: 0.7;
}
```

Só tenha cuidado: prefira usar no máximo uns três níveis no aninhamento, pois além de aumentar a especificidade dos seletores, o excesso de aninhamento vai fazer com que o código fique parecendo uma árvore de natal 🎄🎄.

## Mixins

Mixins são agrupamentos de código que podem ser reaproveitados. Para declarar um mixin, usamos `@mixin` e em seguida definimos um nome para ele. Para usá-lo, basta usar `@include` antes do nome do mixin:

```scss
/* ==== scss ==== */
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  @include flex-center;
}


/* ==== css gerado ==== */
.card {
  display: flex;
  align-items: center;
  justify-content: center;
}
```

Eles também aceitam parâmetros:

```scss
/* ====
center é o valor padrão
caso o mixin não receba argumentos
==== */
@mixin flex($align: center, $justify: center) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
}

.card {
  @include flex;

  &__footer {
    @include flex(initial, space-around);
  }
}


/* ==== css gerado ==== */
.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__footer {
  display: flex;
  align-items: initial;
  justify-content: space-around;
}
```

## Laços de repetição

De forma similar ao que vemos nas linguagens de programação, também temos laços de repetição no aqui.

### @for

O `@for` vai contar de um número até outro e é usado de dois modos: `@for <variável> from <expressão> to <expressão>` ou `@for <variável> from <expressão> through <expressão>`. No `to` a expressão final é excluída como parte da contagem, já no `through` ela é incluída.

```scss
/* ==== scss ==== */
@for $i from 1 to 6 {
  .text-#{$i} {
    font-size: $i * 8px;
  }
}


/* ==== css gerado ==== */
.text-1 {
  font-size: 8px;
}

.text-2 {
  font-size: 16px;
}

.text-3 {
  font-size: 24px;
}

.text-4 {
  font-size: 32px;
}

.text-5 {
  font-size: 40px;
}
```

Caso utilizássemos o `through`, seria criada mais uma classe com nome `.text-6` e `font-size: 48px`.

### @while

O `@while` vai executar enquanto determinada condição for verdadeira. O código abaixo vai ter o mesmo resultado do anterior:

```scss
$i: 1;

@while $i < 6 {
  .text-#{$i} {
    font-size: $i * 8px;
  }

  $i: $i + 1;
}
```

Lembre sempre de incrementar a variável para evitar um loop infinito.

## Estruturas condicionais (@if, @else if, @else)

O `@if` vai definir os estilos verificando se uma condição é verdadeira. Podemos continuar testando com `@else if` e, caso todas verificações retornem falso, o estilo dentro do bloco `@else` vai ser definido:

```scss
/* ==== scss ==== */
@mixin text-size($val) {
  @if $val == big {
    font-size: 32px;
  }

  @else if $val == medium {
    font-size: 20px;
  }

  @else {
    font-size: 16px;
  }
}

.title {
  text-align: center;
  @include text-size(big);
}


/* ==== css gerado ==== */
.title {
  text-align: center;
  font-size: 32px;
}
```

## Conclusão

Se você gostou e quer se aprofundar mais sobre os recursos deste pré-processador, confira a [documentação completa do Sass](https://sass-lang.com/documentation). Também recomendo assistir esta [excelente Masterclass](https://www.youtube.com/watch?v=BaI8dHUthLA), onde o [Mayk Brito](https://twitter.com/maykbrito) aborda vários conceitos e mostra como colocar seu CSS num outro nível!


Vamos dar nossos primeiros passos com este poderoso pré-processador CSS.

Introduçao ao Sass

Neste post vou falar um pouco sobre como configurar o Styled Components no Next.js. Mas, antes de tudo:

### O que é o Next.js?

O [Next](https://nextjs.org/) é um framework front-end baseado no [ReactJS](https://pt-br.reactjs.org/), de código aberto e criado pela Vercel (conhecida anteriormente como ZEIT). Esse carinha tem várias funcionalidades bacanas, dentre elas: Server Side Render (SSR), Static Site Generation (SSG), suporte ao TypeScript, otimização de imagens e fontes, e muito mais!


### E Styled Components?

Styled Components é uma ferramenta CSS-in-JS, que nos possibilita escrever CSS de forma componentizada, sem nos preocuparmos com erros e conflitos com nomes de classes. Além disso, sua sintaxe é bem semelhante ao SCSS, aceitando, por exemplo, aninhamento automático. Você pode conferir todas as features na [documentação oficial](https://styled-components.com/).


### Iniciando

Bom, vamos começar criando um novo projeto com o seguinte comando: 

```bash
npx create-next-app my-app

# ou
yarn create next-app my-app
```

Entre na pasta do projeto e instale o Style Components:

```bash
npm i styled-components

# ou
yarn add styled-components
```

Dentro da pasta `pages`, crie um arquivo com o nome `_document.js`, ele será necessário para injetar os estilos na renderização no lado do servidor:

```js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}
```

Agora precisamos instalar e configurar o plugin do babel para adicionar o suporte do Styled Components no SSR:

```bash
npm i -D babel-plugin-styled-components

# ou
yarn add -D babel-plugin-styled-components
```

Na raiz do projeto, crie um arquivo com nome `.babelrc`:

```js
{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}
```

Vamos fazer um pequeno teste para verificar se está funcionando corretamente. Para isso, substitua todo conteúdo do arquivo `pages/index.js` por este:

```js
import styled from "styled-components";

export default function Home() {
  const Wrapper = styled.section`
    padding: 4em;
    background: blueviolet;
`;

  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: azure;
`;

  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );
}
```

Rode o comando `npm run dev` ou `yarn dev` e abra `http://localhost:3000` no seu navegador. Após a página carregar, [desabilite o JavaScript](https://developer.chrome.com/docs/devtools/javascript/disable/) do seu navegador e recarregue a página. Se estiver tudo certo, a estilização será mantida como mostra a imagem abaixo:

![screenshot](https://res.cloudinary.com/dzhoowtzw/image/upload/v1625250706/screenshot_44c74afffa.png)

É isso! Depois de todos estes passos, o Styled Components está pronto para ser utilizado em conjunto com o Next.

large_Blue, Violet and Orange Shapes Fitness Influencer YouTube Thumbnail Set.png

medium_Blue, Violet and Orange Shapes Fitness Influencer YouTube Thumbnail Set.png

small_Blue, Violet and Orange Shapes Fitness Influencer YouTube Thumbnail Set.png

thumbnail_Blue, Violet and Orange Shapes Fitness Influencer YouTube Thumbnail Set.png

Blue, Violet and Orange Shapes Fitness Influencer YouTube Thumbnail Set.png

Neste post vou falar um pouco sobre como configurar o Styled Components no Next.js.

Configurando Styled Components no Next.js