## Sobre o Projeto
Desenvolvido pelos membros da **He4rt Developers**, este repositório é destinado à introdulçao de desenvolvedores iniciantes ao universo do **ReactJS** com seu conteúdo construido para um simples entendimento.
## Como Contribuir
Encontrou algo de errado que pode ser modificado? Ou até mesmo introduzir um novo conteúdo para a comunidade? Você pode contribuir com o repositório público de forma muito simples, basta apenas ter conhecimento mínimo sobre `ReactJS`.
Ao contribuir será criado um vínculo com a comunidade open source, na qual todos, incluindo você, utilizam todos os dias para aprender e criar seus projetos. Portanto todas as contribuições nos fazem felizes e aquecem nossos corações roxos 💜
1. Faça um Fork do projeto
2. Clone o projeto localmente em sua máquina
3. Crie uma branch sempre que houver uma nova feature (`git checkout -b 'feature/loveReact'`)
4. Faça seu Commit (`git commit -m 'adding some stuff'`)
5. Faça Push no seu Branch (`git push origin 'feature/loveReact'`)
6. Abra um Pull Request e vem pro abraço!
**Extra:** Gostaria de contribuir com algo, porém não sabe ainda com o quê? Nós utilizamos uma ferramenta disponiblizada pelo Github chamada Projects para organização de tarefas concluidas, em andamento e que ainda precisam ser feitas, ele é disponibilizado publicamente e você pode acessá-lo [clicando aqui](https://github.com/he4rt/react4noobs/projects/1).
## Idealizadora do projeto
Criado em abril de 2020, esse projeto foi idealizado pela queridíssima **[Anna Campelo ( Anne )](https://twitter.com/Annerland)**, uma desenvolvedora experiente e apaixonada por compartilhar seus conhecimentos com a comunidade 😃
Atualmente o projeto conta com o esforço da comunidade para manter o conteúdo atualizado e revelante, incluindo novas explicações e exemplos. Com essa contribuição, o repositório vem cada vez mais se tornando uma das melhores fontes de aprendizado de ReactJS para iniciantes.
## Colaboradores
Made with 💜
================================================
FILE: docs/Bibliotecas de utilidade/1-Lodash.md
================================================
[](https://github.com/he4rt/4noobs)
# _Lodash
## O que é o Lodash
Por mais que seja divertido implementar do zero aquela função cheia de malabarismos
que demonstram todo seu conhecimento em ciência da computação, às vezes a gente
precisa de rapidez, eficiência, performance e modularidade o mais rápido possível.
Para resolver este problema, eu lhes apresento: [Lodash](https://lodash.com).
Lodash é uma biblioteca Javascript que possui várias funções que são frequentemente
utilizadas por quem desenvolve software com JS.
## Instalando o Lodash
A melhor forma instalar o Lodash é usando um gerenciador de pacotes.
Na pasta do seu projeto, utilize um dos dois comandos (conforme o gerenciador de
pacotes que você está utilizando):
```bash
npm install --save lodash
# ou
yarn add lodash
```
No seu código, dentro do arquivo desejado, você pode importar o lodash:
```js
import _ from "lodash"
```
**Nota**: usar `_` para nomear o pacote é apenas uma convenção da comunidade que
utiliza o lodash. Você pode utilizar o nome que preferir.
## Categorias
O Lodash tem 13 categorias de funções:
- Array
- Collection
- Date
- Function
- Lang
- Math;
- Number;
- Object;
- Seq;
- String;
- Util;
- Properties;
- Methods.
## Algumas funções
Utilizar o lodash é super simples, pois funciona como qualquer outro objeto em
javascript. Nesse artigo, utilizaremos as funções mais conhecidas, mas você pode
checar a [documentação](https://lodash.com/docs/4.17.15) para mais exemplos.
---
### Contexto
Vamos supor que você acaba de ser contratado e ainda está conhecendo o sistema no
qual vai trabalhar. As pessoas estão te passando algumas pequenas tasks.
Existe uma tabela na interface da aplicação que está sendo desenvolvida, e enviado
para esta tabela, nós temos o seguinte [array de
objetos](https://www.freecodecamp.org/portuguese/news/tutorial-de-arrays-de-objetos-em-javascript-como-criar-atualizar-e-percorrer-objetos-em-lacos-usando-metodos-de-array-do-js/):
```js
const devDepartment = [
{ id: 1, firstName: "kendrick", lastName: "lamar", salary: 4500, age: 22, level: "jr" },
{ id: 2, firstName: "ada", lastName: "lovelace", salary: 12000, age: 59, level: "sr" },
{ id: 3, firstName: "childish", lastName: "gambino", salary: 4800, age: 49, level: "jr" },
{ id: 4, firstName: "cardi", lastName: "b", salary: 9700, age: 32, level: "pl" },
{ id: 5, firstName: "david", lastName: "glover", salary: 10000, age: 31, level: "pl" },
{ id: 7, firstName: "leonardo", lastName: "daVinci", salary: 1200, age: 31, level: "jr" },
{ id: 4, firstName: "cardi", lastName: "b", salary: 5700, age: 32, level: "jr" },
{ id: 6, firstName: "chico", lastName: "science", salary: 15000, age: 46, level: "sr" },
];
```
Te passaram algumas tasks para manipular apenas o array enquanto fazem seu onboarding.
Agora chega de papinho e vamos botar a mão na massa!
### capitalize
Como você pode notar, todos os nomes estão com a primeira letra minúscula. É legal
fazer isso para fins de normalização da informação, mas não queremos mostrar assim
para o usuário.
Então sua primeira task é deixar a primeira letra de todos os nomes em maiúsculo.
Felizmente, com o lodash, isso ficar mais simples do que já é:
```js
const capitalizedDevDepartment = devDepartment.map((worker) => ({
...worker,
firstName: _.capitalize(worker.firstName),
lastName: _.capitalize(worker.lastName)
}));
```
No trecho de código acima nós usamos o map para gerar uma nova lista! Aqui
[iteramos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration)
sobre os elementos da lista `devDepartment`, e para cada elemento, nós adicionamos a
informação já existente do funcionário usando o [spread
operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
e sobrescrevemos o primeiro e segundo nome pelo retorno da função `capitalize()`
aplicada aos valores antigos.
Pareceu complicado na explicação, mas se você não entendeu, olhe o código novamente
e pense em cada operação que ele está executando.
Pronto! Resolvido. Temos todos os nomes começando com letra maiúscula. Nosso lista está
assim:
```js
[
{ id: 2, firstName: "Ada", lastName: "Lovelace", salary: 12000, age: 59, level: "sr" },
{ id: 5, firstName: "David", lastName: "Glover", salary: 10000, age: 31, level: "pl" },
{ id: 4, firstName: "Cardi", lastName: "B", salary: 9700, age: 32, level: "pl" },
{ id: 4, firstName: "Cardi", lastName: "B", salary: 9700, age: 32, level: "pl" },
{ id: 3, firstName: "Childish", lastName: "Gambino", salary: 4800, age: 49, level: "jr" },
{ id: 7, firstName: "Leonardo", lastName: "DaVinci", salary: 1200, age: 31, level: "jr" },
{ id: 1, firstName: "Kendrick", lastName: "Lamar", salary: 4500, age: 22, level: "jr" },
{ id: 6, firstName: "Chico", lastName: "Science", salary: 15000, age: 46, level: "sr" },
];
```
Pode mover o card dessa task e enviar o pull request. Vamos para a próxima!
---
### orderBy
Agora você precisa implementar um filtro de ordenação na lista de funcionários. O
usuário deve ser capaz de **ordenar os funcionários pelo salário.**
A lodash nos oferece o `orderBy` para resolver esse problema:
```js
const workersOrderedBySalary = _.orderBy(capitalizedDevDepartment, 'salary', 'desc')
```
No snippet acima, nós estamos ordenando a lista `capitalizedDevDepartment` de forma
decrescente, utilizando a chave `salary` como parêmetro de ordenação. Então nós
armazenamos o [retorno da função](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Return_values) na constante workersOrderedBySalary.
E dessa forma você consegue a lista anterior ordenada do maior salário para o menor:
```js
[
{ id: 6, firstName: "Chico", lastName: "Science", salary: 15000, age: 46, level: "sr" },
{ id: 2, firstName: "Ada", lastName: "Lovelace", salary: 12000, age: 59, level: "sr" },
{ id: 5, firstName: "David", lastName: "Glover", salary: 10000, age: 31, level: "pl" },
{ id: 4, firstName: "Cardi", lastName: "B", salary: 9700, age: 32, level: "pl" },
{ id: 4, firstName: "Cardi", lastName: "B", salary: 9700, age: 32, level: "pl" },
{ id: 3, firstName: "Childish", lastName: "Gambino", salary: 4800, age: 49, level: "jr" },
{ id: 1, firstName: "Kendrick", lastName: "Lamar", salary: 4500, age: 22, level: "jr" },
{ id: 7, firstName: "Leonardo", lastName: "DaVinci", salary: 1200, age: 31, level: "jr" },
];
```
Já pode rodar a pipeline de produção, galera. Essa aqui foi fácil!
---
### uniqWith & isEqual
Ao subir o código para produção, o cliente nota um problema: ele só tem 7 funcionários
nesse departamento, mas estão aparecento 8. Você já deve ter notado o problema, certo?
O funcionário de ID 4 e firstName "Cardi", está duplicado!
Esse é um problema simples de resolver, mas com o lodash fica ainda mais fácil. **Você
vai combinar duas funções do lodash: `uniqWith` e `isEqual`**.
```js
const normalizedWorkersList = _.uniqWith(workersOrderedBySalary, _.isEqual)
```
Nessa curtia linha de código o Lodash está trabalhando bastante. Em resumo, a função
`uniqWith` faz a comparação entre dois elementos de cada vez, utilizando um
**comparador**, que no nosso caso é a função `isEqual()`. A função `isEqual` será
invocada com dois itens como argumento, o elemento da vez (othVal), e os outros
elementos que serão comparados(arrVal). Assim, todos os valores são comparados com
todos os outros valores, livrando a lista de toda duplicação.
Tá vendo como o Lodash abstrai bastante a complexidade dessas operações?
Foi tão fácil que nem parece que a gente tá trabalhando. Agora nosso array de objetos
está assim:
```js
[
{ id: 6, firstName: "Chico", lastName: "Science", salary: 15000, age: 46, level: "sr" },
{ id: 2, firstName: "Ada", lastName: "Lovelace", salary: 12000, age: 59, level: "sr" },
{ id: 5, firstName: "David", lastName: "Glover", salary: 10000, age: 31, level: "pl" },
{ id: 4, firstName: "Cardi", lastName: "B", salary: 9700, age: 32, level: "pl" },
{ id: 3, firstName: "Childish", lastName: "Gambino", salary: 4800, age: 49, level: "jr" },
{ id: 1, firstName: "Kendrick", lastName: "Lamar", salary: 4500, age: 22, level: "jr" },
{ id: 7, firstName: "Leonardo", lastName: "DaVinci", salary: 1200, age: 31, level: "jr" },
];
```
Existem formas até mais fáceis de resolver esse problema, como, por exemplo, utilizando
a função `uniqBy` do lodash. Mas eu quis mostrar esse exemplo para demonstrar que você
pode compor funções do lodash à vontade.
Que tal tentar resolver esse mesmo problema utilizando o uniqBy? Cheque a
[documentação](https://lodash.com/docs/4.17.15#uniqBy).
---
### groupBy
Outra feature que o cliente te pediu, é que o usuário possa agrupar os funcionários
pelo seu nível. Como sempre, a Lodash deixa essa tarefa mamão com açúcar. Vamos ao
exemplo:
```js
const workersGroupedByLevel = _.groupBy(normalizedWorkersList, 'level')
```
Aqui nós indicamos que queremos gerar um objeto a partir da lista `normalizedWorkersList`
e agrupar os elementos a partir da key `level`.
Com apenas uma linha, nós temos todos os funcionários agrupados pelo nível de senioridade.
Nosso array de funcionários agora é um objeto, e está assim:
```js
{
sr: [
{ id: 6, firstName: "Chico", lastName: "Science", salary: 15000, age: 46, level: "sr" },
{ id: 2, firstName: "Ada", lastName: "Lovelace", salary: 12000, age: 59, level: "sr" },
],
pl: [
{ id: 5, firstName: "David", lastName: "Glover", salary: 10000, age: 31, level: "pl" },
{ id: 4, firstName: "Cardi", lastName: "B", salary: 9700, age: 32, level: "pl" },
],
jr: [
{ id: 3, firstName: "Childish", lastName: "Gambino", salary: 4800, age: 49, level: "jr" },
{ id: 1, firstName: "Kendrick", lastName: "Lamar", salary: 4500, age: 22, level: "jr" },
{ id: 7, firstName: "Leonardo", lastName: "DaVinci", salary: 1200, age: 31, level: "jr" },
],
}
```
Agora pode pedir um aumento!
---
## Conclusão
Se você chegou até aqui, você já tem ótimos exemplos e uma boa justificativa para utilizar
o Lodash. Muitas vezes as abstrações criadas pelo Lodash não serão o bastante para o caso
que você precisa tratar, mas certamente esses momentos serão raros. É uma biblioteca que
casa muito bem com o jeito funcional de pensar que o React trás enquanto framework.
Um exercício muito interessante de fazer é **tentar implementar todas essas funções
do zero**. Isso vai te dar uma boa ideia da complexidade que o lodash resolve.
Além disso, tentar ler o código que eles produzem é uma ótima forma de aprender
também, este é o link para o repositório open source deles:
[Lodash](https://github.com/lodash/lodash).
Bons estudos!
[](https://github.com/he4rt/4noobs)
================================================
FILE: docs/Bibliotecas de utilidade/2-Storybook.md
================================================
[](https://github.com/he4rt/4noobs)
# Storybook
## O que é o Storybook
[**Storybook**](https://storybook.js.org/) é uma ferramenta de desenvolvimento que permite criar e testar componentes de interface de usuário (UI) de forma isolada. É amplamente utilizada em projetos de desenvolvimento front-end para criar bibliotecas de componentes reutilizáveis e garantir a consistência visual e funcionalidade dos componentes antes de integrá-los em um projeto maior.
### Design System
Quando alinhado a um Design System, o Storybook potencializa a criação de interfaces consistentes e reutilizáveis.
Essa adição destaca os principais benefícios e a sinergia entre o Storybook e um Design System, proporcionando uma visão clara de como eles trabalham juntos para melhorar o desenvolvimento de interfaces de usuário.
Aqui vai um exemplo:
- [Atomium](https://github.com/juntossomosmais/atomium)
- [Atomium StoryBook](https://juntossomosmais.github.io/atomium/?path=/docs/introduction--docs)
## Instalando o Storybook
```bash
npx storybook@latest init
# ou
yarn dlx storybook@latest init
```
O comando acima fará as seguintes alterações em seu ambiente local:
📦 Instalará as dependências necessárias.
🛠 Configurará os scripts necessários para executar e construir o Storybook.
🛠 Adicionará a configuração padrão do Storybook.
📝 Adicionará alguns exemplos de histórias para você começar.
## Iniciar o Storybook
O Storybook inclui um servidor de desenvolvimento integrado. Ao executar o comando do Storybook, ele inicia o servidor local, exibe o endereço e abre automaticamente uma nova aba no navegador com uma tela de boas-vindas.
```bash
npm run storybook
# ou
yarn storybook
```
## Renderizar estilos de componentes
O Storybook não impõe uma maneira específica de gerar ou carregar CSS e renderiza os elementos DOM fornecidos. No entanto, pode ser necessário configurar suas ferramentas de CSS para que os componentes sejam exibidos corretamente. Existem guias de configuração disponíveis para ferramentas populares na comunidade.
- [Tailwind](https://storybook.js.org/recipes/tailwindcss/)
- [Material UI](https://storybook.js.org/recipes/@mui/material/)
- [Vuetify](https://storybook.js.org/recipes/vuetify/)
- [Styled Components](https://storybook.js.org/recipes/styled-components/)
- [Emotion](https://storybook.js.org/recipes/@emotion/styled/)
- [Sass](https://storybook.js.org/recipes/sass/)
- [Bootstrap](https://storybook.js.org/recipes/bootstrap/)
- [Less](https://storybook.js.org/recipes/less/)
- [Vanilla-extract](https://storybook.js.org/recipes/@vanilla-extract/css/)
================================================
FILE: docs/Cliente GraphQL/1-Conceito.md
================================================
# O que é o GraphQL?
[GraphQL](2) é um padrão de API conceitualizada e usada pelo time de engenharia do Facebook desde 2012 e da por uma grande comunidade que inclui [empresas](8) e [membros ativos](9), o intuito do graphql não é substituir o [_REST_](5) como um novo conceito de paradigma de [_API_](6), mas sim entender a análise de dados de uma perspectiva diferente, é possível utilizar REST e Graphql ao mesmo tempo, tudo depende das necessidades do software a ser desenvolvido.
# O conceito do GraphQL
## História
Por que foi criado?
- Uma forma diferente de entender e manipular os dados.
Para explicar isso, vamos tentar entender a cor azul.
Imagina que você tem uma tabela "cores" com a cor azul, vermelha, amarela, etc.
Agora imagina que está tentando entender o que ela significa no seu conjunto de dados.
Se você tem um database sobre carros, a cor azul simboliza a cor do carro.
Mas se você tem uma database sobre psicologia, a cor azul pode simbolizar que o paciente está deprimido, ou chateado [(pacientes da lingua inglesa)](10), ou que ele está feliz [(pacientes brasileiros)](11).
Isso significa que se você quiser entender o que a cor azul representa no seu conjunto de dados, terá que ter em mão muito mais do que somente o recurso da tabela cores.
Será necessário ter mais dados juntos com a cor azul para ser capaz de entender o que ela significa.
- Qual o problema que o facebook queria resolver?
O problema do facebook era a necessidade em ter uma API e um sistema de dados que fossem faceis de entender e que pudessem ser usados por muitos ao mesmo tempo.
Era necessario entender por exemplo, pessoas que gostam da cor preta, também gostam de heavy metal?
Eu posso oferecer uma propaganda de chinelo para uma pessoa que estar saindo de férias para florianópolis?
Mas como fazer isso quando você usa um padrão de API que isola os dados do seu sistema?
Como fazer isso quando você tem muitos dados?
Como fazer isso em pequenas requisições?
Vamos agora tentar melhorar a compreensão do [GraphQL](2), já que ele é muito amplo, vou lhe apresentar alguns exemplos.
## Exemplos
Em um Instagram, precisamos exibir os dados especifico de um usuário. Nessa página temos, username, posts, bio, stories... Como podemos fazer solução com [_REST_](5) e [GraphQL](2)?
### Rest
- **GET** `/user/`
- **GET** `/post//stories`
- **GET** `/post//posts`
_Exemplo de consulta em REST_
### GraphQL
Agora vamos ver como o [GraphQL](2) faria a manipulação dos mesmos dados.
Você envia apenas uma consulta que inclui todos os dados requisitados e o servidor responde com um objeto JSON com eles.
```graphql
query {
User(id: 1234) {
name
posts {
title
media {
url
}
likes {
totalCount
}
}
stories {
media {
url
}
}
}
}
```
_Exemplo de consulta em GraphQL_
## Benefício da modelagem de dados distribuída
Ao usar o [GraphQL](2) ele permite que você defina o significado de um único dado [_API_](6). Todos os _schemas_ da [_API_](6) são definidos pela modelagem definida, **na maioria das vezes**,no back-end e a partir disso temos queries que tem a capacidade de entender que o dados que será retornado e garantir que tem a mesma característica dos dados buscados pelo cliente ao realizar queries no servidor.
Assim, tanto o back-end, quanto o front-end estão ciente da estrutura de dados definidas envidas nas comunicações.
Vamos exemplificar para entender melhor esse conceito.
### Modelando o usuário
```graphql
type User {
id: ID!
name: String!
posts: [Post]
stories: [Story]
}
```
Oq significa esse modelo acima definido?
Temos uma fonte de dados chamada User, ao ser acessada ela permite que você receba como resposta id, name, posts, stories.
Vamos tentar entender agora o campo name.
O tipo do campo `name` é string?
- `Não!` string é aquilo que este campo vai responder ao ser acessado pelo cliente. Os campos no graphql são recursos que abrem as portas para a ligação ou não com outros recursos.
Para entender melhor precisamos olhar agora para o compo `posts`.
O tipo do campo `posts` é um array? Ou um `Post`? Mas que tipo é `Post`? string? int? boolean?
Não há um tipo definido para `posts` no GraphQL. O que existe de fato é um acordo no modelo de dados que a resposta será um array de Post. Que pode ainda ser muitas coisas, por isso vamos definir o tipo de Post.
```graphql
type Post {
id: ID!
title: String!
media: Media
}
```
Agora com o tipo Post definido, sabemos que ao consultar um usuário no sistema e requisitarmos o campo `Post` ele vai retornar um array de Post. Que por sua vez tem seus próprios campos definidos.
A todas essas definições de dados, a todas essas modelagens, chamamos `typedefs` definições de tipos.
ATENÇÃO! _Os tipos no graphql nada tem que ver com "tipagem de dados"_
### Definindo resolução de tipos
Os `resolvers` no graphql são os responsáveis por, dado um modelo de dados, analisar o que o cliente quer e responder com o modelo de dados que esta definido.
É normalmente definido por um objeto que nele tem suas funções que ao serem executadas retornam o modelo de dados que o cliente quer.
- Exemplo:
```javascript
const resolvers = {
User: {
id: () => '1'
name: () => 'User',
posts: () => [],
stories: () => []
},
Post: {
id: () => '1',
title: () => 'Post',
media: () => {}
}
}
```
Este é um exemplo `aceitável` de resolvers para um graphql, mas não é o ideal.
O que quero com esse exemplo é fazer você entender que o campo `name` do tipo `User` é um resolver que retorna uma string, mas ele não é uma string por si.
Para fazermos algo mais interessante, vamos fazer um resolver um user por uma querie.
Primeiro precisamos modelar essa query!
```graphql
type Query {
User(id: ID): User
}
```
Criamos no nosso modelo que é uma query User que recebe um id como parametro e retorna um User, mas agora precisamos criar o resolver que retorna esse user:
```javascript
const resolvers = {
Query: {
User: () => ({
id: '1',
name: 'User',
posts: [{ title: 'Post1' }, { title: 'Post2' }],
stories: [],
}),
},
};
```
Temos aqui um objeto resolver, que resolve Query, temos um item User que é uma função que retorna um objeto User.
Com isso podemos realizar no cliente uma query como:
```graphql
query {
User(id: 1) {
id
name
posts {
title
}
}
}
```
E com isso podemos ter como resposta:
```json
{
"data": {
"User": {
"id": 1,
"name": "User",
"posts": [{ "title": "Post1" }, { "title": "Post2" }]
}
}
}
```
## Vantagens
- Rápido.
- Sem problemas de over-fetching e under-fetching.
- Fortemente tipada.
- Entrega somente dos dados requisitados, barato para o cliente e servidor. (Menor e rápido)
- Única versão, rota e dados totalmente desacoplados.
- Documentação automática.
## Desvantagens
- Curva de aprendizado, pois você terá que aprender um novo conceito.
- Armazenamento em cache, mas pode ser desligado.
- Rate Limiting
De maneira simples, utilizamos os hooks para receber os dados requisitados pelo formulário. Após isso, chamamos o método responsável por se conectar a [_API_](6) e executar a ação `POST`. Com isso, um novo usuário é registrado!
## Conclusão
_Como utilizo o GraphQL?_ Nas próximas seções veremos como utilizar o [GraphQL](2) mais afundo com algumas bibliotecas dentro do React. Caso já queira ir dando uma olhada no [GraphQL](2), o [_GitHub_](7) possui um **[playground do GitHub público](https://docs.github.com/en/graphql/overview/explorer)**!
# Desmistificando o retorno 200 do Graphql
Precisamos fazer uma viagem pela história do HTML, antes de desmistificar o retorno do Graphql.
O década é de 1990, e o http (Hypertext Transfer Protocol) começa a ser difundido mundialmente.
E endereços como www.ig.com.br começam a surgir e com eles uma série de recursos podem ser acessados e interpretados por browsers.
## O procotolo HTTP
### Protocolo
Primeiro precisamos enteder o que é um protocolo.
Protocolo é uma camada de abstração que define um mecanismo de comunicação entre dois pontos.
Imagina que você acaba de conhecer uma pessoa na rua, você olha para ela e diz: "Olá!"
Você acabou de usar um protocolo para comunicar com a pessoa. Se ela estiver ciente do protocolo ela provavelmente vai reconhecer a mensagem e responder.
Da mesma forma funcionam os computadores, existem vários protocolos para executar diferentes tarefas.
### HTTP
O protocolo utilizado para buscar recursos na web é o http (Hypertext Transfer Protocol).
Vamos pegar um recurso como exemplo:
http://api.sotops.com.br/images/nudedodaniel.jpg
E quebrá-lo em partes:
http://: Protocolo
api: Maquina no servidor
sotops: Servidor
com: nameServer comercial
br: nameServer brasileiro
images: Pasta no servidor
nudedodaniel.jpg: arquivo no servidor
Quando você acessa essa página, o browser irá buscar o recurso e enviará uma requisição para o servidor.
Primeiro procura por um servidor que seja responsável por recursos no br e lá pergunta sobre onde está o responsável por recursos comerciais.
Ao encontrar os recursos comerciais, pergunta onde está o servidor sotops.
Ao encontrar o servidor sotops, pergunta qual maquina no servidor é responsável pela api.
Ao encontrar a máquina api, requisita o arquivo nudedodaniel.jpg na pasta images.
Dentro do pacote de requisição não existe nada, apenas cabeçalhos com a informação dela em si, como o endereço de quem requisitou o recurso.
Agora imagina que algums erros podem ocorrer nessa requisição, como por exemplo:
- Ao chegar no servidor ele diz que o endereço no cabeçalho não tem autorização para acessar o recurso, então o protocolo retorna um código de resposta `HTTP 403`.
- Vamos supor que a pasta images existe, mas o arquivo não existe, então o protocolo retorna um código de resposta `HTTP 404`.
- Vamos supor que ocorre um erro no servidor, entao o protocolo retorna um código de resposta `HTTP 500`.
- Vamos supor que tudo ocorre bem e você consegue acessar o recurso. Então o protocolo retorna um código de resposta `HTTP 200`.
Por uns bons anos o protocolo http foi utilizado dessa forma, mas com o passar do tempo e a modernização do desenvolvimento web e com o advento do REST, a forma como o protocolo http foi entendi mudou.
E ele se tornou reponsável não só pelo que está em seu nome "TRANSFER", mas colocaram dentro do protocolo também tudo aquilo que podia ou não acontecer "dentro" do servidor.
E com isso o protocolo http ficou responsável não só para ser utilizado para transferir arquivos, mas também pode ser utilizado para fazer requisições ao servidor e responsável por analisar tudo aquilo que acontece internamente no servidor.
Quando por exemplo você faz um `put` em um usuario com email inválido, o servidor altera o protocolo e faz com que ele responda `HTTP 400`, ou seja, o servidor não conseguiu fazer o `put` do usuario com email inválido.
Se você analisar pela perspectiva de um protocolo de transferência, o mais "correto" é que ele respondesse um 200, uma vez que o protocolo não é responsável pelo conteúdo da requisição mas pela TRANSFERENCIA dela.
Quando você recebe uma pizza de calabresa na sua casa com peperoni, a responsabilidade é do entregador ou do restaurante?
O que você pode fazer é pedir que o entregador devolva a pizza para o restaurante com a `mensagem` de que o sabor da pizza estava incorreto.
Quando perguntado se ocorreu tudo bem ao transferir a pizza para a casa do cliente o motorista vai dizer que sim, mas que ele tem uma mensagem de que a pizza não tinha o sabor correto.
E por que isso é importante para o graphql?
## Requisições graphql
Vamos usar como exemplo a requisição de usuário que temos no capítulo de conceito.
Mas dessa vez vamos utilizar requisições multiplas, ou seja, ao inves de fazer apenas uma requisição para o backend eu vou fazer duas, ao mesmo tempo.
```graphql
query{
q1:user(id: 1){
id
name
post {
id
title
}
}
q2: user(id: 2){
id
name
post {
id
title
}
}
```
Agora imagina que o usuário de id:1 existe, mas o usuário de id:2 não.
Portanto eu teria um http 200 para o primeiro e um 404 para o segundo.
E ai vem a pergunta de um milhão, qual reponse eu dou para meu cliente?
Por isso o graphql fez com que o protocolo http voltasse as suas origens e ficasse responsável apenas pela transferência de dados, não pelo conteúdo dos dados.
Pelo conteúdo dos dados a responsabilidade fica no mensagem da resposta, que normalmente feita em json.
Um exemplo de resposta:
```json
{
"error": {
"q1": {},
"q2": {}
},
"data": {
"q1": {},
"q2": {}
}
}
```
Uma resposta típica graphql sempre contem um objeto com dois objetos dentro.
Um deles o `error` responsável por dizer o que houve de errado com a requisição.
E o outro `data` responsável pelos dados da requisição.
Dentro de cada um desses objetos poderemos ter separadamente cada uma das queries e suas respectivas respostas.
## O que é o Fetch?
[Fetch][1] é uma biblioteca nativa dos *browsers* para executar requisições HTTP. Usamos *Fetch* para requerer dados de um servidor na Web, que pode servir desde páginas HTML, arquivos CSS, JS, PDF, entre outros, até informações por meio de uma [*API*][2]. Quando a requisição é atendida, a aplicação decide o que faz com o que recebeu, sendo erro ou não.
O Fetch é o sucessor do [*XMLHTTPRequest*][3], que também é nativo nos navegadores e, assim como o *Fetch*, provê ao código da aplicação uma forma de transferir dados entre o *browser* (cliente) e um servidor. *XMLHttpRequest* era usado constantemente na programação de [*AJAX*][4].
Como estamos falando do *ReactJS*, que é executado nos navegadores, *Fetch* não precisa ser instalada, por ser nativa. É importante dizer que, no ambiente [*nodejs*][5], isso não é verdade, e para poder usar a mesma ideia do *Fetch*, é necessário importar a biblioteca [*node-fetch*][6].
## Requisições HTTP
### Recurso
Uma requisição HTTP possui regras bem definidas para que possamos executá-las, e assim usar os dados da resposta à essa requisição. Para poder fazer uma requisição com a biblioteca *Fetch*, devemos informar pelo menos o **recurso** que queremos acessar e coletar dados. Esse recurso é, normalmente, a URL de algum serviço exposto na Web. Se a sua requisição tiver apenas a URL, *Fetch* subentende que o **método** `GET` deve ser usado para a requisição, assim como toda chamada que fazemos de um navegador. Ou seja, quando você faz uma pesquisa no Google, você está fazendo uma requisição HTTP com método `GET`. :wink:
## Método
Como dissemos, precisamos informar o método na requisição para coletar dados desse recurso. Existem vários métodos e [aqui][7] vai a lista completa deles. Vamos nos concentrar nos mais usados e suas respectivas funções:
- `GET`: solicitar dados de um determinado recurso, por exemplo a página do Google;
- `POST`: assim com o `GET`, mas podemos passar dados no corpo na requisição;
- `DELETE`: apagar dados ou arquivos do serviço.
- `PUT`: alterar recursos já existentes ou criar um recurso inexistente no serviço Web;
- `PATCH`: parecido com o `PUT`, mas altera dados específicos.
Normalmente os serviços Web executam verificações (autorização, permissão, etc.) nas requisições que recebem, ou seja, elas são tratadas quando chegam. Portanto, é necessário que o serviço implemente o método, para que seja possível usá-lo. Por exemplo, o Google retorna erro quando tentamos executar uma requisição o método `DELETE`.
```shell
foo@bar:~$ curl -X DELETE google.com
Error 405 (Method Not Allowed)!!1
405. That’s an error.
The request method DELETE is inappropriate for the URL /.
That’s all we know.
foo@bar:~$
```
### Status Codes
Quando fazemos uma requisição, recebemos a resposta da mesma, que também contém muita informação, e uma delas é o *status code*, que serve para informar para a aplicação o que aconteceu com sua requisição. Alguns [exemplos][12]:
- `200`: "Tudo certo com o seu pedido";
- `201`: "Seu pedido foi aceito e foi criado na API";
- `400`: "Não deu para entender seu pedido, pode ser que há uma falha na ;estrutura nele";
- `404`: Muito famoso por dizer que não encontrou o que você pediu.
A lista completa dos *status codes* HTTP você vê [aqui][8]. Recomendamos tornar a experiência mais divertida e, para isso o site [*http cats*][9] pode ajudar. Lá você pode ver o título de cada status com gatos.
## Como usar o Fetch
Como dissemos, a requisição HTTP a ser executada pelo navegador precisa de algumas informações para sua execução. A estrutura básica de uma requisição usando *Fetch* é a seguinte:
```js
const fetchResponsePromise = fetch(resource [, init])
```
- `resource`: a url que a requisição vai chamar. Por exemplo: http://www.example.com
- `init`: um objeto **opcional**, no qual configuramos de forma mais detalhada a requisição. Todos os detalhes sobre esse objeto [aqui][10].
Como o *Fetch* já é carregado por padrão no browser, usar o *Fetch* fica fácil. Você pode executar as chamadas diretamente no seu código:
````js
...
fetch("https://swapi.dev/api/people/1/")
.then(res => res.json())
.then(
(result) => {
console.log(result);
},
(error) => {
console.error(error);
}
)
...
````
O *Fetch* também pode estar em algum dos métodos do seu componente React:
````js
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.items
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return
Error: {error.message}
;
} else if (!isLoaded) {
return
Loading...
;
} else {
return (
{items.map(item => (
{item.name} {item.price}
))}
);
}
}
}
````
No exemplo acima, o componente trata a requisição assim que é montado pelo React. Depois, o componente itera pelos items e os dispõe em tela.
### Mais informações
- [ReactJS Docs - AJAX e APIs][11]
[Ir para Próxima Seção](./2-Axios.md)
## O que é o Axios?
Axios é uma biblioteca criada com o intuito de realizar conexões HTTP de maneira dinâmica.
## Como instalar o Axios
Para instalar, digite um dos comandos abaixo:
> npm install axios
> yarn add axios
## O conceito de API para o Axios
Primeiramente, devemos compreender que o termo API é muito amplo e tem inúmeras funções. O axios faz uma ponte entre a sua aplicação e uma API. Você pode pensar nele como um garçom entre você e a cozinha, levando o seu pedido e trazendo o seu prato de comida.
## Regras de uma API HTTP
Antes de colocamos a mão no código devemos saber que uma API HTTP tem regras. Dependendo da situação será necessário usar um método **X** e em outro momento **Y**. Então, que tal conhecer esses métodos?
`GET`: Com o método GET solicitamos dados de um recurso específico
`POST`: Com o método POST podemos realizar interações na API
`DELETE`: Com esse método podemos apagar dados via API
`PUT`: Com esse método podemos alterar dados da API. Ele atualiza recursos já existentes ou pode criar um recurso inexistente
`PATCH`: Esse método é parecido com o `PUT`. No entanto, ele altera dados específicos
Exemplos:
`GET`: Listar todos os usuários registrados
`POST`: Registrar um novo usuário
`DELETE`: Apagar um ou mais usuários
`PUT`: Alterar os dados de um usuário, caso não encontre o usuario ele é criado.
`PATCH`: Alterar um dado do usuário, como por exemplo a senha
Tambem existem outros métodos que não são usados tanto em uma API. Caso queira dar uma conferida numa lista completa, [clique aqui](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods).
Alem dos métodos apresentados, temos os status da API. Eles servem para informar para o desenvolvedor o que aconteceu com sua requisição.
Por exemplo:
`201`: Seu pedido foi aceito e foi criado na API
`200`: Tudo certo com o seu pedido
`400`: Não deu para entender seu pedido, pode ser que há uma falha na estrutura nele
`404`: Muito famoso por dizer que não encontrou o que você pediu
Como são vários, recomendamos o site **http cats**. Lá você pode ver o título de cada status de um jeito divertido e com muitos gatos. [Clique aqui](https://http.cat/)
### Como usar o Axios
Então chega de teoria, e vamos praticar o uso do axios?. Para esse exemplo criaremos um novo arquivo com o nome de `api.js`
````js
import axios from 'axios';
const API = axios.create({
baseURL: 'link da API'
})
export default API;
````
Nesse arquivo iremos criar nosso componente que ficará responsável por interagir com a API.
Feito isso, podemos ir para o arquivo que queremos que tenha uma interação entre o front-end e o back-end.
```js
import React, { useState } from 'react';
import api from 'api';
export default function Register() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
async function handleRegister(e){
e.preventDefault();
const data = {
name,
email,
password,
};
try {
const response = await API.post('users', data)
console.log('Registrado com sucesso ');
} catch (error) {
alert(`Erro ao Registrar`);
console.log(error);
}
};
return (
)
}
```
De maneira completamente simples utilizamos os hooks para receber os dados requisitados pelo formulário. Após isso, chamamos o método responsável por se conectar a API e executar a ação `POST`. Com isso, um novo usuário é registrado!
[Ir para Próxima Seção](../Cliente%20GraphQL/1-Conceito.md)
Made with :purple_heart:
================================================
FILE: docs/Controle de estado/1-API-de-Contexto copy.md
================================================
# API de Contexto
Quando estamos trabalhando em um projeto React, aprendemos que os dados trafegam sempre de pai para filho (via props).
Em algumas situações, replicar essa passagem de props em vários níveis acaba se tornando repetitivo e extremamente verboso.
A API de Contexto (Context API) serve exatamente nesse caso. Ela fornece uma forma de compartilhamento de dados entre todos os componentes dentro de sua árvore, sem que o desenvolvedor precise escrever a passagem de props entre os níveis.
## Quando usar?
Você gostaria de personalizar as cores do seu sistema baseado em uma escolha do usuário.
Para isso, você escreve um componente para o usuário escolher a cor e o coloca na sua aplicação.
```jsx
function App() {
const [userColor, setUserColor] = React.useState('#3DB7F4');
return
Olá mundo colorido
}
```
Você cria um novo componente e precisa usar as cores do usuário. Vamos criar esse componente:
```jsx
function ListaColorida({ items, color }) {
return
{
items.map((item) =>
{item}
)
}
}
```
Além da lista, você desenvolve outros componentes e coloca-os em uma parte da sua aplicação:
```jsx
function Dashboard({ color }) {
return
}
```
E a nossa aplicação, que precisa também passar essa propriedade adiante:
```jsx
function App() {
const [userColor, setUserColor] = React.useState('#3DB7F4');
return
Olá mundo colorido
}
```
Quando a sua aplicação cresce, a propriedade `color` será passada em 4, 5, 6 níveis de hierarquia, incluindo componentes que só terão a responsabilidade de delegar a propriedade para seus componentes filhos.
Não seria legal se apenas os componentes que vão lidar com a cor do usuário tenham conhecimento desse dado? É exatamente nesse tipo de situação em que a `ContextAPI` pode ser usada.
## Como usar
Para iniciar, é necessário criar um Contexto. Este será o objeto que vai representar o dado que será trafegado entre os componentes.
```javascript
const ContextoCorUsuario = React.createContext();
```
Depois, vamos colocar um provedor do contexto. Este provedor deve ficar no nível mais alto da hierarquia dos componentes.
```jsx
function App() {
const [userColor, setUserColor] = React.useState('#3DB7F4');
return
...
}
```
Agora, todo componente dentro dessa árvore pode receber a cor escolhida pelo usuário através desse contexto. Por exemplo, nossa lista colorida.
```jsx
function ListaColorida({ items }) {
return
{ (color) => (
{
items.map((item) =>
{item}
)
}
) }
}
```
Com isso, os componentes não precisam receber a cor do usuário através dos seus pais. Eles pró-ativamente consomem a cor vinda do contexto.
Nosso App e nosso Dashboard ficam mais simples também:
```jsx
function Dashboard() {
return
}
```
```jsx
function App() {
const [userColor, setUserColor] = React.useState('#3DB7F4');
return Olá mundo colorido
}
```
## Usando useContext
Na implementação anterior, usamos o `ContextoCorUsuario.Consumer` para obter a cor vinda do contexto. Nós podemos simplificar a escrita desse componente usando o `useContext`.
```jsx
function ListaColorida({ items }) {
const color = useContext(ContextoCorUsuario)
return
{
items.map((item) =>
{item}
)
}
}
```
Na prática, o comportamento do componente permanece igual. A vantagem é que seu código fica mais limpo e a leitura do JSX fica mais clara.
## Considerações adicionais
Você pode construir quantos contextos forem necessários. Você pode criar um contexto diferente para cada tipo de dado, colocar os provedores hierarquizados no topo da árvore e cada componente apenas com os contextos relevantes para a própria montagem.
```jsx
function App() {
return
...
}
```
```jsx
function BarraDeNavegacao() {
const localizacao = useContext(ContextoLocalizacaoUsuario)
const corUsuario = useContext(ContextoCorUsuario)
return
{localizacao.latitude} {localizacao.longitude}
{corUsuario}
}
```
## Agora que você já sabe
A Context API é simples e poderosa, e você pode usá-la em várias circunstâncias (como internacionalização, temas, localização do usuário, controle de estado global). Mas é importante avaliar se o seu componente deveria absorver a responsabilidade de obter suas propriedades.
Você aprendeu na sua jornada de React até aqui que as props dão poder para que seus componentes sejam reutilizáveis. Isso continua valendo, e muito.
Seus componentes mais reutilizáveis devem continuar recebendo os dados via props. Você pode consumir dados do Contexto em componentes menos especializados e mais focados. A beleza do React está no poder de combinar várias técnicas para que seus dados fluam como você preferir com o melhor design de código possível. Conhecer cada técnica e quando usá-la vai te ajudar a construir aplicações robustas e consistentes.
Achou algo de errado? Algo que possa melhorar? Fique a vontade para [abrir uma issue](https://github.com/he4rt/react4noobs/issues). Vejo você na próximo seção!
[Ir para Próxima Seção](../Verificadores%20de%20Tipo/Typescript.md)
Made with :purple_heart:
================================================
FILE: docs/Controle de estado/2-Redux.md
================================================
# Redux
"Redux é um "container" de estado previsível para aplicativos JavaScript.
Ele ajuda a escrever aplicativos que se comportam de forma consistente, pode ser executado em ambientes diferentes (cliente, servidor e nativo) e fáceis de testar. Além disso, ele fornece uma ótima experiência para o desenvolvedor, como edição de código em tempo real combinado com um depurador em tempo de execução.
Você pode usar o Redux junto com o React ou com qualquer outra biblioteca/Framework Front-end. É compacto (2kB, incluindo dependências), mas tem um grande ecossistema de "add-ons" (componente de software que adiciona novas funcionalidades ou características) disponíveis." - definição traduzida do site https://redux.js.org/introduction/getting-started
## O que é o Flux?
Primeiramente precisamos entender como funciona a arquitetura do Redux, no caso entender primero o que é a arquitetura Flux.
Flux é uma arquitetura criada pelo Facebook como solução alternativa ao padrões de arquitetura usuais como por exemplo MVC, para solucionar problemas de controle de estados, na época um problema constante do Facebook era as notificações que não atualizavam o seu estado de forma correta.
Essa arquitetura tem como conceito o princípio do fluxo unidirecional tendo 4 (quatro) estados Action, Dispatcher, Store e View, dessa forma o usuário provoca algum evento que gera uma "Action" especifica, essa "Action" vai acionar um "Dispatcher" que comunica ao "Store" a necessecidade de mudar algum dado e por fim envia um evento para que seja mostrado na "View" a alteração realizada. veja abaixo no diagrama uma vizualização da arquitetura:
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/
Perceba também que nessa estrutura a View também podem gerar novas "Actions" para os "Dispatchers" e retornar o fluxo do ínicio, veja abaixo no diagrama essa interação:
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/
Apenas vou fazer algumas observações sobre características do Flux, os estados da aplicação são mutáveis, possuí apenas um único "Dispatcher" e possuí multiplos "Store".
## Como Funciona o Redux
Agora que entendemos a arquitetura do Flux, vamos entender como funciona o Redux, que é baseado no Flux, mas não é completamente igual a ele. Primeiro de tudo temos a "Action", "Reducers", "Store" e "React", essa é a estrutura do Redux, nela já observamos que temos de igual algumas coisa e outras não.
No geral tudo funciona bem parecido mas existem diferenças importantes, os "Reducers" são equivalente ao "Dispatcher" com uma diferença não existe um único "Reducers" e sim pode haver 1 (um) ou mais deles, a "Store" é igual com a diferença que só existe uma em vez de várias "Stores", o "React" é igual a "View" mas como estamos aplicando em React ela tem esse nome, e as "Actions" possuem a mesma função e da mesma forma que no Flux. Abaixo temos um diagrama comparando o funcionamento do Flux com o Redux:
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/
## Como usar o Redux no React
Primeiramente para instalar os pacotes do Redux na sua aplicação React, use os seguintes comandos:
- npm install redux
- npm install react-redux
- npm install --save-dev redux-devtools
### Action
Agora vamos entender como a estrutura funciona no código em si, começando pelas "Actions", elas basicamente vão ser as informações de estado que a aplicação vai enviar para o "Store" através dos "Reducers".
Nesse primeiro código vemos um exemplo de um "Action Creator", ele basicamente é um objeto que passara os nomes de estados a ser informado para a "Store".
```jsx
export const ActionsTypes = {
SET_PRODUCTS: "SET_PRODUCTS",
SELECTED_PRODUCTS: "SELECTED_PRODUCTS",
REMOVE_SELECTED_PRODUCTS: "REMOVE_SELECTED_PRODUCTS",
};
```
Nesse código agora estou exportando minhas "Actions", que irão usar as "Action Creator" criadas anteriormente, para enfim passar os valores de estado da aplicação.
```jsx
import { ActionsTypes } from "../contants/action-types";
export const setProducts = (products) => {
return {
type: ActionsTypes.SET_PRODUCTS,
payload: products,
}
}
export const selectedProducts = (products) => {
return {
type: ActionsTypes.SELECTED_PRODUCTS,
payload: products,
}
}
export const removeSelectedProducts = () => {
return {
type: ActionsTypes.REMOVE_SELECTED_PRODUCTS,
}
}
```
Agora veja no código a seguir como usar as "Actions" criadas para avisar ao "Reducers" que houve alguma mudança e é necessário avisar ao "Store".
```JSX
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import ProductComponent from './ProductComponent';
import { setProducts } from '../redux/actions/productActions';
const ProductListing = () => {
const products = useSelector((state) => state);
const dispatch = useDispatch();
const fetchProducts = async () => {
const response = await axios
.get("https://fakestoreapi.com/products")
.catch((err) => {
console.log("error: ", err);
});
dispatch(setProducts(response.data));
};
useEffect(() => {
fetchProducts()
}, []);
return(
);
}
export default ProductListing;
```
Veja que crio uma constante "dispatch" para receber a função "useDispatch()" Dentro da constante "fetchProducts" crio uma "Arrow Function" e nela quando faço uma requisição a API passo o argumento a "dispatch" como "setProducts(response.data)", para assim avisar a necessidade de mundança no estado da aplicação e como argumento da função passo os dados retornados de minha API, onde serão armazenadas no "payload" de "setProducts()".
Uma observação para quem ficou confuso sobre o nome da função "useDispatch()", foi mantido a referência ao nome "Dispatcher" por convenção do próprio pessoal do Facebook, os mesmos acharam melhor manter a referência apesar da biblioteca do Redux em sua estrutura não usar "Dispatcher" e sim "Reducers".
### Reducers
Os "Reducers" são funções puras, ou seja a mesma entrada da função também será o seu retorno, isso porque os "Reducers" tem a função de enviar uma chamada para o "Store" enfim verificar a mudança de estado, e então poder realizar a mudança.
Nesse próximo código vamos ver a estrutura que um "Reducer" possui.
```JSX
import { ActionsTypes } from '../contants/action-types';
const initialState = {
products: [],
};
export const productReducer = (state = initialState, { type, payload }) => {
switch (type) {
case ActionsTypes.SET_PRODUCTS:
return {...state, products: payload};
default:
return state;
}
};
export const selectedProductReducer = (state = {}, { type, payload }) => {
switch (type) {
case ActionsTypes.SELECTED_PRODUCTS:
return {...state, ...payload};
case ActionsTypes.REMOVE_SELECTED_PRODUCTS:
return {};
default:
return state;
}
}
```
Veja que no "Reducer" acima o estado da aplicação inicial é vazio, e após alguma solicitação ou mudança de estado disparado pelos "Actions" por causa de alguma interação, as funções "Reducers" verificam a mudança e repassam para o "Store".
No código a seguir, apenas estou copilando os reducers usando o "combineReducers()", para exportar em uma única constante "reducers" e deixar os nomes das funções mais semântico.
```JSX
import { combineReducers } from 'redux';
import { productReducer, selectedProductReducer } from './productReducer';
const reducers = combineReducers({
allProducts: productReducer,
product: selectedProductReducer,
});
export default reducers;
```
Neste próximo código será mostrado como se faz o uso do "Reducer", onde na constante "products" foi usado o Hook do Redux "useSelector()", e passamos como argumento uma "Arrow Function" e como argumento tenho o "state" que seria o estado atual do elemento, onde basicamente aplico meu "Reducer" e passo a propriedade "products". Sendo assim, o valor inicial era vazio, mas após a API enviar os dados e o "Reducer" verificar a alteração de estado, o mesmo informara ao "Store" para mudar seu estado e acrescentar as informações ao Componente.
```JSX
import React from 'react';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';
const ProductComponent = () => {
const products = useSelector((state) => state.allProducts.products);
const renderList = products.map((product) => {
const {id, title, image, price, category} = product;
return(
{ title }
$ { price }
{ category }
);
});
return <>{renderList};
}
export default ProductComponent;
```
De forma análoga acontece neste código abaixo também, mas ao invés de verificar o estado de mudança de todos os items retornados, agora ele verifica o estado de um único item selecionado.
```JSX
import React, { useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { selectedProducts, removeSelectedProducts } from "../redux/actions/productActions";
const ProductDetail = () => {
const product = useSelector((state) => state.product)
const {image, title, price, category, description} = product;
const { productId } = useParams();
const dispatch = useDispatch();
const fetchProductDetail = async () => {
const response = await axios.get(`https://fakestoreapi.com/products/${productId}`)
.catch(err => {
console.error("Error: ", err);
})
dispatch(selectedProducts(response.data));
};
useEffect(() => {
if(productId && productId !== "")
{
fetchProductDetail();
}
return () => {
dispatch(removeSelectedProducts());
}
}, [productId]);
return (
);
}
export default ProductDetail;
```
### Store
Por fim, nossa "Store", antes de partimos para analizar sua aplicação em código vou salientar alguns pontos sobre a mesma. Inicialmente a "Store" em si é um container imutável, ele não altera-se mas apenas evolui, no qual vai reunir todos os estados da aplicação de forma global, sendo assim segue o princípio do Redux: "Um único ponto de verdade".
Outras duas caracteristicas é que justamente ser Imutável já citado anteriormente e que apenas funções puras ("Reducers") podem realizar alterações de estados, no caso enviando as alterações ao "Store" para serem tratadas.
No código a abaixo, usamos o "createStore()" para criar o objeto "store" da aplicação, o mesmo recebe os "reducers", um objeto vazio e a última linha recebe um código para poder utilizar a extensão Redux-devtools, que habilita uma ferramenta muito boa e ajuda no debbuging da aplicação, vou falar mais ao final de toda a explicação.
```JSX
import { createStore } from 'redux';
import reducers from './reducers/index';
const store = createStore(
reducers,
{},
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
export default store;
```
E aqui estamos praticamente finalizando o uso do Redux, onde por fim, é importado tanto a "store" que foi criada no código anterior, quanto o "Provider". Basicamente aqui é colocado o "" dentro desse componente Provider que está recebendo a "store" assim, basicamente o "Provider" faz a comunicação entre o React e o Redux da aplicação, sendo assim muito importante ele ser o elemento que envolve todos os outros componentes que você está utilizando o Redux.
```JSX
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './redux/store';
ReactDOM.render(
,
document.getElementById('root')
);
```
## Conclusão sobre o Redux
Chegamos ao fim e ao analisarmos com calma aprendemos que o Redux é uma ferramenta poderosa para compartilhar estados de forma global e ter controle sobre eles. Existem muitas mais coisas sobre o Redux, até como ele usa internamente "middlewares", mas já são assunto para uma outra aula.
Pensando também sobre o uso em si do Redux, podemos perceber que nem todo projeto precisa do Redux, é necessário avaliar a necessidade de usa-lo assim como qualquer outra biblioteca. Não descarte o uso de guardar estado de forma local, as vezes não há necessidade de compartilhar estados de forma global.
Em relação ao Redux DevTools, é uma extansão que pode ser encontrada na maioria dos browser e se faz muito útil para auxiliar no seu uso. Também estou deixando um link para o GitHub do projeto completo onde utilizo esse código para o desenvolvimento de um Shop, é bem simples mas exemplifica muito bem o uso do Redux para fins didáticos.
Link para código do projeto:
Achou algo de errado? Algo que possa melhorar? Fique a vontade para [abrir uma issue](https://github.com/he4rt/react4noobs/issues). Vejo você na próximo seção!
[Ir para Próxima Seção](../Verificadores%20de%20Tipo/Typescript.md)
Made with :purple_heart:
================================================
FILE: docs/Controle de estado/3-Zustand.md
================================================
# Zustand
O Zustand é um dos menores gerenciadores de estado para React encontrado atualmente. Ele possui um tamanho de 1.17kB, sendo assim menor do que o Redux (2kB) e o Jotai (2.73kB) por exemplo.
É de fácil utilização por se prover de conceitos da arquitetura flux, utilizada pelo Redux, de maneira mais simplificada.
# Instalação
Você pode instalar o zustand através do npm ou yarn:
```bash
# NPM
npm install zustand
# Yarn
yarn add zustand
```
# Como ele funciona
Assim como no Redux, o Zustand funciona com uma única "store" onde serão armazenados os estados necessários a sua aplicação.
Primeiramente criamos a nossa `store`:
```js
import { create } from 'zustand'
const useStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
```
Como podemos ver no código acima, a nossa `store` é um `hook`
onde temos:
1. O estado e o seu valor inicial -> `bears: 0`
2. Função para acrescentar 1 ao valor do estado atual -> `increasePopulation`
3. Função onde é zerado o valor do estado -> `removeAllBears`
Agora com a "store" criada e suas "actions" podemos utilizá-la nos respectivos componentes:
```jsx
function BearCounter() {
const bears = useStore((state) => state.bears)
return
{bears} around here...
}
function Controls() {
const increasePopulation = useStore((state) => state.increasePopulation)
return
}
```
Perceba que pode-se utilizar o "hook" `useStore` em qualquer lugar e sem a necessidade de `providers` como acontece no Redux.
## Atualizando estado
Para atualizar o estado basta utilizar a função que realiza esta ação (`action`).
Pegando o exemplo da "store" anterior e adcionando o estado `bearName` e a respectiva `action` `updateBearName` temos a seguinte configuração da nossa `store`:
```js
const useStore = create((set) => ({
bears: 0,
bearName: '',
updateBearName: (bearName) => set(() => ({ bearName: bearName}))
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
```
Com isso no código do nosso app podemos atualizá-lo da seguinte forma:
```js
function App() {
const [bearName, updateBearName] = useStore(
(state) => [state.bearName, state.updateBearName]
shallow
)
return (
)
}
```
Observação: `shallow` se trata de uma função comparadora utilizada para verificar se arrays e objetos tem os mesmos elementos aos anteriores. Se você verificar `{name: 'zustand'} === {name: 'zustand'}` esta sentença no javascript a resposta será sempre `false` pois são instâncias distintas, são dois objetos diferentes que contém os mesmos valores, então se faz necessário o uso da função comparadora para não gerar excessivas renderizações em sua aplicação.
## Fatiando sua store
A medida que for construindo, a sua `store` pode ficar cada vez maior e mais difícil de dar manutenção, por isso pode ser interessante criar `slices` da sua `store` que são pequenas e específicas `stores`.
Abaixo vemos uma pequena store com um `state` chamado `fishes` e uma `action` para adcionar o valor de 1 a cada vez que é acionado:
```js
export const createFishSlice = (set) => ({
fishes: 0,
addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})
```
Já nesta outra, temos um `state` chamado de `bears` e duas `actions`, a primeira adciona mais 1 ao estado de `bears` e a segunda subtrai do estado `fishes` o valor de 1:
```js
export const createBearSlice = (set) => ({
bears: 0,
addBear: () => set((state) => ({ bears: state.bears + 1 })),
eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})
```
Agora podemos juntar essas duas stores em uma só `useBoundStore`.
```js
import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'
export const useBoundStore = create((...a) => ({
...createBearSlice(...a),
...createFishSlice(...a),
}))
```
E por fim podemos utilizar normalmente em nosso componente React:
```jsx
import { useBoundStore } from './stores/useBoundStore'
function App() {
const bears = useBoundStore((state) => state.bears)
const fishes = useBoundStore((state) => state.fishes)
const addBear = useBoundStore((state) => state.addBear)
return (
Number of bears: {bears}
Number of fishes: {fishes}
)
}
export default App
```
## Conclusão
Usar Zustand é realmente simples e fácil como você pôde perceber lendo este material, e essa é a proposta desta solução para gerenciamento de estados no React. Na sua documentação oficial há alguns outros detalhes para caso você precise dar uma conferida como a sua utilização com typescript e outros guias interessantes.
[Documentação Oficial](https://docs.pmnd.rs/zustand/getting-started/introduction)
Achou algo de errado? Algo que possa melhorar? Fique a vontade para [abrir uma issue](https://github.com/he4rt/react4noobs/issues). Vejo você na próximo seção!
[Ir para Próxima Seção](../Estilizacao/1.Preprocessadores%20CSS.md)
# O Que é Compound Components?
O Compound Components é um padrão avançado em React.
Tem como objetivo criar um design mais flexível, permitindo o compartilhamento de estado e lógica entre um grupo de componentes. Onde a comunicação entre o componente pai e os componentes filhos devem ser feitas de maneira flexível. Os componentes devem trabalhar juntos para realizarem algum comportamento sem criar árvores de props embaraçosas ou uma lógica complexa demais para ser refatorado ou compreendido futuramente.
Esse padrão nos ajuda a eliminar inflamações de props, onde temos que passar uma árvore de props entre os componentes. Essa injeção de props é um problema, pois pode causar vários re-renders desnecessários a cada estado que for atualizado, já que cada estado irá atualizar todos os componentes filho.
Temos um exemplo de Compound Components na estrutura do `select` e `option` das tags em HTML:
```jsx
```
O `select` funciona como um gerenciador de estados da inferface, enquanto o `option` são configurados em como o `select` deve funcionar.
# Exemplo utilizando Compound Components
Neste exemplo, vamos criar um `Modal`, que é dividida em dois componentes compostos: `Toggle` e `Content`. Onde vão compartilhar o estado de abrir e fechar o modal entre eles.
Vamos ver como seria criar esse componente passo a passo:
1. Podemos começar criando a context responsável por gerênciar o state de abrir e fechar o modal
```jsx
import { createContext, useState } from 'react'
export const ModalContext = createContext()
export const ModalStorage = ({ children }) => {
const [isOpen, setIsOpen] = useState(false)
return (
{children}
)
}
```
2. Criando a base do componente Modal
```jsx
import { ModalStorage } from './context'
const Modal = ({ children }) => {
return {children}
}
export default Modal
```
Perceba que estamos usando `children`, para pegar os componentes que serão inseridos dentro do Modal, vamos querer usa-lo assim:
```
...
conteúdo do modal
```
3. Agora precisamos criar o componente toggle, que vai ser responsável por abrir o Modal
```jsx
import { useContext } from 'react'
import { ModalContext } from '../context'
const Toggle = ({ children }) => {
const { setIsOpen } = useContext(ModalContext)
return
}
export default Toggle
```
4. Também precisamos do componente content que vai ser responsável por exibir o conteúdo do Modal
```jsx
import { createContext, useState } from 'react'
export const ModalContext = createContext()
export const ModalStorage = ({ children }) => {
const [isOpen, setIsOpen] = useState(false)
return (
{children}
)
}
```
5. Por fim, podemos atribuir os dois ao nosso componente Modal e já ta no jeito (:
```jsx
import Toggle from './Toggle'
import Content from './Content'
import { ModalStorage } from './context'
const Modal = ({ children }) => {
return {children}
}
Modal.Toggle = Toggle
Modal.Content = Content
export default Modal
```
6. Utilizando
```jsx
import Modal from './components/Modal'
const App = () => {
return (
Abrir Modal
React4Noobs
Compound Components é dahora! /o/
)
}
export default App
```
7. Resultado
https://github.com/gabrielduete/react4noobs/assets/59345698/781b13d9-f22e-47f6-a48f-6fb900467e2d
Assim, a gente torna a criação e o uso de modais extremamente flexíveis e reutilizáveis. `Modal.Toggle` é responsável por ativar a exibição do modal, enquanto `Modal.Content` deve exibir o conteúdo do nosso modal.
Essa estrutura permite que os desenvolvedores personalizem facilmente o comportamento e o conteúdo dos modais de acordo com as necessidades específicas de suas aplicações, tornando o código mais limpo e organizado.
# Outros exemplos
Também podemos utilizar Compound Components em outros contextos, por exemplo:
Componentes de Accordion
```jsx
TituloSeção 1Seção 2Seção 3Botão
```
Componentes de Menu
```jsx
```
Todos são flexivéis e adptavéis, facilitando o desenvolvimento, escalabilidade e uso do componente.
# Conclusão
Vimos o quanto escrever componentes no padrão Compound Components pode ser útil em nossas aplicações, vimos também como utilizar e alguns exemplos em que esse padrão pode encaixar.
Fique à vontade para explorar e brincar criando componentes com Compoud Components, use com sabedória e veja se realmente faz sentido aplicar no seu contexto, as vezes, se não for bem aplicado, ele pode mais atrapalhar doque ajudar.
[Ir para a próxima seção](./2-React%20Error%20Boundaries.md)
# Tailwind
> Sumário:
>
> - [Iniciando com Tailwind](#iniciando-com-tailwind)
> - [Pros e Contra](#pros-e-contra)
> - [Extensões de Auxílio](#extensões-de-auxílio)
> - [Conclusão](#conclusão)
# Iniciando com Tailwind
O Tailwind é um framework CSS que traz a possibilidade de usarmos classes utilitárias prontas em nossas estilizações. Mas o que são essas classes utilitárias, afinal? Elas são classes que têm como escopo uma única propriedade do CSS, como `color` ou `width`, por exemplo. Por isso, você pode ver o Tailwind sendo descrito por aí como **utility-first**; isso o faz diferente de outros frameworks, como o Bootstrap, que são **component-first**. Por quê? Bem, com o Tailwind, você define o estilo de seus componentes do zero a partir das classes utilitárias, enquanto com o Bootstrap, você parte de um estilo pré-definido que já possui configurações para diversas propriedades CSS em uma única classe.
Eu sei, pode parecer estranho e bagunçado, mas fica calmo que vou te mostrar como as coisas são mais simples do que você pensa.
Vamos dar uma olhada em um exemplo:
```jsx
export default function Home() {
return (
Hello world!
)
}
```
Nesse exemplo, estamos atribuindo três estilizações para a tag h1 que recebe o nosso "Hello world!".
A primeira é referente ao **tamanho do texto**, a segunda é sobre **aplicar bold** e por último temos o **sublinhado** sendo aplicado. Claro, este é um exemplo simples, o Tailwind assim como o CSS tradicional tem milhares de possibilidades de estilizar o seu componente.
Por isso, é indicado a [documentação](#https://tailwindcss.com/docs/installation) do Tailwind que vai auxiliar no processo de aprender os nomes das estilizações em comparação ao CSS tradicional.
---
# Pros e Contras
Como todo framework ou lib no mundo da programação, o Tailwind também tem seus pontos fracos e fortes, por isso vamos dar uma olhada em alguns deles para entendermos melhor do que o Tailwind é capaz.
### Pros
- Não pensar em nome de classes de estilo, como é no CSS in JS;
- Medidas de estilização padronizadas, facilitando seguir padrões;
- Não precisa ficar trocando entre diferentes arquivos e abas durante a produção;
- Facilidade em fazer mudanças de estilo sem sobrescrever os estilos de uma tag superior;
- Utilizar da componentização resolve a "bagunça" que o Tailwind deixa nas tags HTML;
- O uso de classes utilitárias faz o Tailwind um framework extremamente personalizável
### Contra
- É preciso entender o setup do Tailwind e como mexer no seu arquivo de configuração, para customizar os estilos;
- Por ser “utility first” o HTML vai acabar consumindo mais espaço, já que aplicamos estilização diretamente neles;
- Não é a solução universal, muitas vezes temos que utilizar de alguns operadores condicionais, ou classes customizadas para realizar a estilização;
- Necessidade de aprender css da maneira Tailwind, já que algumas estilizações tem o nome um pouco diferente do css tradicional.
---
# Extensões de Auxílio
Para facilitar a vida na hora de usar Tailwind, indico o uso de algumas extensões:
### Tailwind IntelliSense
Extensão que habilita o auto complete na className para aplicar as estilizações.
---
### Tailwind Fold
Se o seu problema com Tailwind for a sujeira, essa extensão é para você!. Ela esconde todo o className deixando seu código muito mais "limpo".
---
### Tailwind Sort Class
Extensão para padronizar a ordem das estilizações na className.
---
# Conclusão
Com isso, agora entendemos o que é Tailwind e sua função, conhecendo seus pontos a favor e contra e por fim tendo uma maior ideia de como utilizar em seus projetos, seja pessoal ou com o seu time. Além disso, percebemos que o objetivo do Tailwind é trazer padronização e produtividade para o projeto, assim facilitando a manutenção e compreensão do código.
Para tirar melhor aproveito do Tailwind, é recomendado ter uma base sólida de CSS, e somente depois aprender a maneira que o Tailwind aplica suas estilizações.
---
# CSS-in-JS
> 🔥 **Tá com pressa?** pega o resumo:
> 1. [O que é](#o-que-é-css-in-js)
> 2. [Vantagens](#quais-vantagens-as-bibliotecas-de-css-in-js-fornecem)
> 3. [Bibliotecas](#quais-as-principais-bibliotecas)
> 3.1 💅 [Styled Components](#-styled-components)
> 3.2 📦 [CSS Modules](#-css-modules)
> 3.3 👩🎤 [Emotion](#-emotion)
> 4. [Na prática com Styled Components](#na-prática-com-styled-components)
> 5. [Conclusão](#conclusão)
> 9. [Referências](#referências)
## O que é CSS-in-JS?
É um conceito, uma coleção de ideias para resolver problemas complexos com CSS. Não é uma biblioteca em particular, então cada implementação pode focar em um subconjunto diferente de problemas usando abordagens diferentes.
Todas elas têm em comum o fato de resolver os problemas usando APIs ao invés de convenções (normalmente a solução adotada em padrões CSS) e alavancam o JS como linguagem de escrita de estilos.
O objetivo do CSS-in-JS, no geral, é abstrair a complexidade de lidar com uma implementação de mais baixo nível, e evitar a troca de contexto.
> ⚠️ **Mas atenção!** Usar uma biblioteca em JavaScript para estilizar seu app não vai te livrar de entender o fundamental de CSS, beleza?
#### CSS-in-JS te permite...
- Escrever CSS usando sintaxe de JavaScript
- Aproveitar as vantagens do JS (funções, condicionais, variáveis, estados, ...)
- Aproveitar as vantagens de qualquer coisa do ecossistema JS
#### CSS-in-JS *não* vai te livrar de entender...
- Como estilos são aplicados no DOM
- Como funciona herança
- Como funcionam as propriedades de CSS
- Como funcionam os layouts em CSS
#### E onde entra o JS?
Para tirar um bom proveito desse paradigma, é importante conhecer os [tipos de dados em JS](https://github.com/ThiagoDellaNoce/javascript4noobs/blob/master/4_Basico/3_Tipos-de-dados.md).
Também, para ir além, é bom conhecer os operadores [matemáticos](https://github.com/ThiagoDellaNoce/javascript4noobs/blob/master/4_Basico/5_Operadores-Aritmeticos.md), [lógicos](https://github.com/ThiagoDellaNoce/javascript4noobs/blob/master/4_Basico/6_Operadores-Logicos.md), [condicionais](https://github.com/ThiagoDellaNoce/javascript4noobs/blob/master/4_Basico/7_Condicionais.md), [spread](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_syntax), [destructuring](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao), [módulos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/M%C3%B3dulos) e [etc](https://github.com/ThiagoDellaNoce/javascript4noobs/tree/master/4_Basico)
> ⚠️ **Mas não te assusta!** Essas coisas vêm com a prática. Elas são do JavaScript, então, é natural que *possam* ser utilizadas em uma biblioteca CSS-in-JS, mas não quer dizer que é *obrigatório* usá-las.
---
## Quais vantagens as bibliotecas de CSS-in-JS fornecem?
As bibliotecas te permitem escrever CSS sem se preocupar com o efeito cascata (**C** do CSS). Também resolvem os problemas de especificidade, de dar nomes aos seletores, de seguir uma convenção de nomenclatura (*BEM CSS, estou olhando para você*), e todos os demais perrengues vindos de usar uma outra linguagem (*linting*, garantir consistência na estrutura de pastas, ferramentas de build).
Além disso, outras abstrações comumente implementadas em bibliotecas CSS-in-JS são:
- Eliminação de código morto (sem uso)
- O código vai dar erros (incluindo sintaxe, tipagem, *undefined*)
- Suporte a temas
- Estilos dinâmicos (com base em `props`, por exemplo)
- Estilos são "escopados" a um componente específico
- Otimizações de performance como gerar o _CSS crítico_ sem necessidade de configuração adicional
---
## Quais as principais bibliotecas?
A última edição da pesquisa [State of CSS](https://2019.stateofcss.com/) constatou que a biblioteca mais popular é a [Styled Components](https://github.com/styled-components/styled-components), seguida por [CSS Modules](https://github.com/css-modules/css-modules) e [Styled JSX]().
Já as mais apreciadas são [Emotion](https://github.com/emotion-js/emotion), [CSS Modules](https://github.com/css-modules/css-modules) e [Styled Components](https://github.com/styled-components/styled-components).
Vamos entender melhor como essas três funcionam?
| Critério | Cálculo |
| ---------- | ------------------------------------------------------------- |
| Awareness | Total de Respostas - Nunca ouviu falar / (Total de Respostas) |
| Interest | Interessado / (Interessado + Não interessado) |
| Satisfação | Usaria novamente / (Usaria novamente + Não usaria novamente) |
## 💅 [Styled Components](https://github.com/styled-components/styled-components)
Utilizando [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) e [o poder do CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` permite escrever código CSS para estilizar os componentes. Também remove o mapeamento entre estilos e componentes, permitindo que se use componentes como construção de estilos de baixo nível de forma fácil.
`styled-components` é pensado para aprimorar CSS para estilizar sistemas de componentes React. Ao nos levar em conta um único caso de uso, foi possível otimizar a experiência para devs e também a saída para os usuários finais.
Além da experiência aprimorada para devs, os componentes estilizados fornecem:
- **CSS crítico automático:** `styled components` controla quais componentes são renderizados em uma página e injeta seus estilos e nada mais, de forma totalmente automática. Combinado com a divisão de código, isso significa que seus usuários carregam a menor quantidade de código necessária.
- **Nenhum erro de nome de classe:** os componentes com estilo geram nomes de classe exclusivos para seus estilos. Você nunca precisa se preocupar com duplicação, sobreposição ou erros ortográficos.
- **Exclusão mais fácil de CSS:** pode ser difícil saber se um nome de classe é usado em algum lugar em sua base de código. `styled components` torna isso óbvio, já que cada detalhe do estilo está vinculado a um componente específico. Se o componente não for usado (que as ferramentas podem detectar) e for excluído, todos os seus estilos serão excluídos com ele.
- **Estilo dinâmico simples:** adaptar o estilo de um componente com base em seus adereços ou um tema global é simples e intuitivo sem ter que gerenciar manualmente dezenas de classes.
- **Manutenção fácil:** você nunca precisa procurar em arquivos diferentes para encontrar o estilo que afeta seu componente, portanto, a manutenção é muito fácil, não importa o tamanho de sua base de código.
- **Prefixo automático:** escreva seu CSS de acordo com o padrão atual e deixe que `styled components` cuide do resto.
Você obtém todos esses benefícios enquanto escreve o CSS que conhece e adora, apenas vinculado a componentes individuais.
> 🔥 **Na prática:** [mais adiante](#na-prática-com-styled-components) você verá a biblioteca em mais detalhes, como instalar, como usar, e suas capacidades
```jsx
const Button = styled.button`
color: grey;
`;
```
Também podem ser usados [objetos de estilo](https://styled-components.com/docs/advanced#style-objects), o que permite migrar gradualmente layouts existentes em *CSS inline*, já fornecendo o suporte aos recursos mais avançados.
```jsx
const Button = styled.button({
color: 'grey',
});
```
Os dois estilos acima são equivalentes.
Styled Components é também compatível com React Native.
### 📦 [CSS Modules](https://github.com/css-modules/css-modules)
Um **Módulo CSS** é um arquivo CSS no qual todas as classes e animações são escopadas localmente por padrão. Todas as `url(...)` e os `@import`s são feitos da mesma forma que se requisita um módulo em JS.
CSS Modules compila para um formato intermediário chamado [ICSS](https://github.com/css-modules/icss), mas são escritos na forma padrão.
```css
/* style.css */
.error {
background-color: red;
}
```
Ao importar um Módulo CSS em um módulo JS (um componente, por exemplo), é exportado um objeto com mapeamentos de nomes locais (que você escreveu) para nomes globais (que o módulo gerou).
```jsx
import styles from "./style.css";
// import { className } from "./style.css";
const btn = ;
```
## 👩🎤 [Emotion](https://github.com/emotion-js/emotion)
Emotion fornece uma composição de estilo poderosa e previsível, além de uma ótima experiência de desenvolvedor com recursos como _source maps_, _labels_ e utilitários de teste. Ambos os estilos de string e objeto são suportados.
O Emotion possui duas formas de uso, uma agnóstica de framework e outra específica para trabalho com React.
### Forma agnóstica de framework:
```jsx
import { css, cx } from 'emotion'
const color = 'white'
render(
Hover to change color.
)
```
### Com React
Essa abordagem possui suporte a ESLint, temas, e outros benefícios, mas exige mais configuração. Além disso, tem também suporte à sintaxe _styled_
#### clássico
```jsx
// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
const color = 'white'
render(
Hover to change color.
)
```
##### styled
```jsx
import styled from '@emotion/styled'
const Button = styled.button`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
color: black;
font-weight: bold;
&:hover {
color: white;
}
`
render()
```
---
## Conclusão
Entendemos agora o que é e para que serve o CSS-in-JS. Também conhecemos um pouco as principais bibliotecas utilizadas no mercado. O objetivo do CSS-in-JS, no geral, é simplificar o processo de desenvolver o estilo da aplicação, e mitigar alguns dos problemas comuns como conflito de nomes e especificidade.
Para tirar melhor proveito dessa abordagem, é essencial que se conheça os conceitos básicos de CSS e de JavaScript, beleza?
---
Vamos aprender um pouco mais de [styled components na prática?](./3.1-styled-components.md)
Made with :purple_heart:
================================================
FILE: docs/Estilizacao/3.1-styled-components.md
================================================
# Na prática com Styled Components
Esse exemplo [está na documentação](https://styled-components.com/docs/basics#installation) 😄
## Instalação
```bash
npm install styled-components
-- ou --
yarn add styled-components
```
> ⚠️ **Observação:** é altamente recomendado, mas não obrigatório, utilizar o [plugin do Babel](https://styled-components.com/docs/tooling#babel-plugin). Algumas vantagens são nomes de classes mais legíveis, SSR, bundle menor, e outros.
### Iniciando
`styled-components` usa [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) para estilizar os componentes. Essa abordagem elimina completamente o mapeamento entre estilo e componente. Ou seja, quando você define um estilo, você está criando um componente normal do React.
O exemplo abaixo cria dois componentes e usa eles.
```jsx
// Cria um componente Title, um h1 com estilos
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Cria um componente Wrapper, uma section estilizada
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use-os como você usaria qualquer outro componente
render(
Hello World!
);
```
> 🔥 Detalhe! O css gerado já tem os prefixos de navegadores. Vai em frente, usa todas as propriedades hipsters que você conhece ;)
### Adaptando os componentes com base em props
O `styled-components` gera um componente, certo?
Se gera um componente, pode ter props.
E se tem props, você pode usar.
Esse exemplo abaixo tem um estado `primary` que muda as cores com base na presença (ou ausência) da prop. Para isso, basta usar a famosa [interpolação](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings) ;)
```jsx
const Button = styled.button`
background: ${(props) => (props.primary ? 'palevioletred' : 'white')};
color: ${(props) => (props.primary ? 'white' : 'palevioletred')};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
render(
);
```
### Estendendo estilos
Às vezes precisamos fazer pequenas adaptações no layout de um componente.
Com o `styled-components`, basta envolvê-lo no construtor `styled`:
```jsx
// Botão do exemplo acima, sem as interpolações
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// Um novo Botão, baseado no anterior, com alguns detalhes a mais
const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;
`;
render(
Tomato Button
);
```
Ainda, é possível substituir o elemento gerado. Por exemplo, se quiséssemos que, ao invés de um `button`, nosso componente `TomatoButton />` gerasse um `a`, é só fazer:
```jsx
```
> 📚 **Leitura recomendada:** [Talia Marcassa](https://twitter.com/talialongname) escreveu uma ótima revisão do uso no mundo real, apresentando muitos insights práticos sólidos e comparações com alternativas, em [Styled Components: To Use or Not to Use?](https://medium.com/building-crowdriff/styled-components-to-use-or-not-to-use-a6bb4a7ffc21)
### Sintaxe
O `styled-components` usa um pré-processador chamado [stylis](https://github.com/thysultan/stylis.js), que suporta a sintaxe do SCSS.
```jsx
const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
color: blue;
&:hover {
color: red; // quando passamos o mouse
}
& ~ & {
background: tomato; // como irmão de , mas talvez não diretamente adjacente
}
& + & {
background: lime; // adjacente a
}
&.something {
background: orange; // tagueado com uma classe CSS adicional ".something"
}
.something-else & {
border: 1px solid; // dentro de outro elemento nomeado ".something-else"
}
`;
render(
Hello world!How ya doing?The sun is shining...
Pretty nice day today.
Don't you think?
Splendid.
);
```
### Anexando props adicionais
Para evitar wrappers desnecessários que apenas passam algumas props para o componente ou elemento renderizado, você pode usar o [construtor `.attrs`](https://styled-components.com/docs/api#attrs). Ele permite que você anexe props adicionais (ou "atributos") a um componente.
Dessa forma, você pode, por exemplo, anexar props estáticas a um elemento ou passar uma prop de terceiros como `activeClassName` para o componente `Link` do `React Router`.
Além disso, você também pode anexar props mais dinâmicas a um componente. O objeto `.attrs` também pode receber funções, que recebem as props que o componente recebe. O valor de retorno será mesclado com os props resultantes também.
Aqui, renderizamos um componente `input` e anexamos alguns atributos dinâmicos e estáticos a ele:
```jsx
const Input = styled.input.attrs((props) => ({
// podemos definir props estáticas
type: 'text',
// ou definir props dinâmicas
size: props.size || '1em',
}))`
color: palevioletred;
font-size: 1em;
border: 2px solid palevioletred;
border-radius: 3px;
/* aqui usamos a prop computada dinamicamente */
margin: ${(props) => props.size};
padding: ${(props) => props.size};
`;
render(
);
```
### Animações
Por fim, vamos dar aquela animada nos nossos componentes?
Animações CSS definidas com `@keyframes` são globais, e isso pode levar a colisão de nomes. O `styled-components` fornece um helper para mitigar esse problema:
```jsx
// Criar a animação
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
// Criar um componente que vai rotacionar o que receber
const Rotate = styled.div`
display: inline-block;
animation: ${rotate} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
`;
render(
< 💅🏾 >
);
```
> ⚠️ Keyframes não é suportada pelo React Native.
---
## Referências
### Conceitos
- [Do Sass e BEM ao CSS-in-JS: A (re)evolução do CSS ao longo da história 🚀](https://www.felipefialho.com/blog/do-sass-e-bem-ao-css-in-js-a-evolucao-do-css-ao-longo-da-historia/) - Felipe Fialho
- [What actually is CSS-in-JS?](https://medium.com/dailyjs/what-is-actually-css-in-js-f2f529a2757) - Oleg Isonen
- [The tradeoffs of CSS-in-JS](https://medium.com/free-code-camp/the-tradeoffs-of-css-in-js-bee5cf926fdb) - Oleg Isonen
- [CSS-in-JS](https://en.wikipedia.org/wiki/CSS-in-JS) - Wikipedia
- [Why you should definitely learn how to use CSS-in-JS](https://jxnblk.com/blog/why-you-should-learn-css-in-js/) - Brent Jackson
### Bibliotecas
- [Utilizando Styled Components (CSS-in-JS) no ReactJS e React Native | Diego Fernandes](https://www.youtube.com/watch?v=R3S8DEzEn6s) - RocketSeat
- [Styled Components, por onde começar? Os poderes do CSS in JS](https://www.youtube.com/watch?v=QdfjWRc4ySA) - Mario Souto
- [JSS](https://cssinjs.org/?v=v10.4.0) - JSS
- [Basics](https://styled-components.com/docs/basics#installation) - Styled Components
---
[Ir para Próxima Seção](../Controle%20de%20estado/1-API-de-Contexto.md)
Made with :purple_heart:
================================================
FILE: docs/Ferramentas de build/1-npm-yarn.md
================================================
# NPM e Yarn
O npm e o yarn são um gerenciador de pacotes, com ele é possível criar bibliotecas js e disponibilizá-las para a comunidade, além de poder incluir outras bibliotecas externas na sua aplicação.
Não iremos nos aprofundar muito no npm nesta seção, apenas explicar o básico sobre como instalar o React com a utilização do mesmo.
Se quiser um estudo mais profundo sobre npm, cheque a seção npm no [node4noobs](https://github.com/anabastos/node4noobs/blob/master/contents/1-primeiros-passos/npm.md).
# Create-react-app
O Create React App é uma ferramenta para criar projetos em React com o intuito de facilitar a configuração da aplicação.
## Instalação
Com o npx do npm iremos executar o seguinte comando para criar a aplicação. Ou podemos utilizar o Yarn para fazermos o mesmo processo.
```cmd
npx create-react-app react4noobs
-- ou --
yarn create react-app react4noobs
```
Aguarde alguns minutos para que o npm baixe as dependências.
O create react app irá gerar todo o projeto em modo padrão, não é necessário configurar **ferramentas** como Babel ou Webpack, eles estarão pré-configurados por debaixo dos panos.
Ao abrir seu package.json você encontrará três scripts, são eles:
| Comando | Rodando com NPM | Rodando com Yarn |
| ------- | --------------- | ---------------- |
| start | npm start | yarn start |
| build | npm run build | yarn build |
| eject | npm run eject | yarn eject |
O **start** iniciará a aplicação de acordo com os componentes desenvolvidos no */src*.
E uma tela no navegador irá se abrir:
Quando você alterar qualquer arquivo e salvar, eles serão recompilados e a janela do navegador será atualizada. Caso algum erro ocorra, ele aparecerá em vermelho no console.
O **build** é utilizado para enviar a aplicação para "produção".
Como isso acontece? Ao executá-lo o babel transpila a aplicação automaticamente e todo o app será mandado para uma pasta */build* fora da */src* em arquivos estáticos, e então seu arquivo estará pronto para ser colocado em produção.
O **eject** é interessante, inicialmente o create-react-app empacota e esconde os módulos do npm que ele está usando por debaixo dos panos, para que o *package.json* seja mais limpo e simples. Porém se você quiser começar a adicionar configurações mais complexas e instalar outros módulos, seus módulos atuais precisam saber quais são os módulos existentes. Então ao executar o **eject** ele não esconderá mais esses módulos, e eles estarão disponíveis no seu *package.json*.
Por fim, não é sempre necessário utilizar o create-react-app para criar o seu projeto, você também pode criar o seu projeto na mão, do zero. Porém como o curso tem o foco para inciantes, isso seria um assunto para conversarmos no futuro.
---
Vamos olhar agora um pouco sobre [dependências](./1.1-O-que-são-dependências.md).
Made with :purple_heart:
================================================
FILE: docs/Ferramentas de build/1.1-O-que-são-dependências.md
================================================
# O que são dependências
Dependências são todos os pacotes que seu projeto necessita ter instalado para que possa ser executado de maneira correta. Em outras palavras, todos os módulos (pacotes) de terceiros que utilizamos em nosso projeto, se tornam dependências, já que sem eles, a corretude e funcionamento da nossa aplicação estaria comprometida.
Por padrão o react já vem com várias dependências se iniciarmos o projeto com *create-react-app*, com por exemplo o [Webpack](./../Ferramentas%20de%20build/2-Webpack.md). Mas sempre podemos adicionar outras dependências.
## Como instalamos dependências
Isso vai depender de qual gerenciador de pacotes você está utilizando (npm, yarn ou outros). No NPM ou Yarn pode utilizar:
```bash
npm install react-router-dom
--ou--
yarn add react-router-dom
```
O método acima instala esses pacontes como dependências de produção, mas nem sempre precisamos de pacotes na produção e sim apenas no espaço de desenvolvimento, como por exemplo o *prettier* que não é utilizado em produção e sim apenas no ambiente de desenvolvimento para formatar os códigos. Para definir um pacote como apenas dependência de desenvolvimento precisamos para uma flag na hora vamos instalar o pacote.
```bash
npm install prettier --save-dev
--ou--
yarn add prettier --dev
```
## Como removemos dependências
As veze instalamos algumas depências e não vamos precisar ou fizemos a troca por outra solução equivalente, devemos limpar das dependências do nosso projeto esse pacote não utilizado para isso usamos
```bash
npm uninstall prettier --save-dev
npm uninstall react-router-dom
--ou--
yarn remove prettier --save-dev
yarn remove react-router-dom
```
---
Com esses comandos podemos instalar ou remover qualquer pacote que vamos adicionar ao projeto.
Vamos olhar agora um pouco do [Webpack](./2-Webpack.md).
Made with :purple_heart:
================================================
FILE: docs/Ferramentas de build/2-Webpack.md
================================================
# O que é WebPack?
O Webpack é um empacotador de módulos para projetos web que utilizam html, css, javascript e imagens, sendo uma das principais ferramentas utilizadas no core do React.
Primeiramente podemos dizer que a função do Webpack é variada entre muitas possibilidades que permitem facilitar o nosso ambiente de desenvolvimento. Um pequeno exemplo disso é uma função inclusa que permite converter códigos escritos em Typescript para nosso js puro. Pois, navegadores mais antigos não conseguem realizar a leitura do javascript moderno.
Outra de sua principal função é capacidade de ler arquivos separados de nossa aplicação. Imagine que você precise separar seu config.js para outro arquivo fora da index.js.
Bem, como podemos ver o Webpack é uma ótima ferramenta e totalmente completa por permitir enumeras funções de desenvolvimento onde o próprio desenvolvedor define suas próprias regras e plugins que usará em seu projeto.
# O que é Babel?
Bem, vamos falar um pouco de seu companheiro o **Babel JS**, como dito anteriormente o Webpack pode transformar o Typescript em Javascript, entretanto o Webpack não faz isso sozinho ele precisa da ajuda do Babel, que faz todo o processo de transformação do código, enquanto o Webpack faz a leitura e renderiza na pagina.
Caso você tenha curiosidade recomendo dar uma olhada na documentação oficial, basta [clicar aqui](https://babeljs.io/docs/en/)
# Como utilizar o Webpack no React?
De maneira simples, já estamos usando ele. Ao criar uma aplicação com o create-react-app, o webpack já é instalado e configurado. Sendo assim, não são necessárias configurações adicionais. Tudo é feito e configurado automaticamente.
# Bora praticar como usar o Webpack?
Então, chega de teoria e bora ver na prática como isso será aplicado no ecossistema do React.
Bem, para entender o conceito de Webpack e React iremos criar um Hello World.
Primeiramente iremos criar uma nova pasta para o nosso projeto, onde iremos iniciar já o nosso 'npm init', e logo após iremos instalar as bibliotecas que vamos usar nesse tutorial.
```
npm install --save react react-dom
npm install --save-dev webpack babel-core babel-loader @babel/preset-env @babel/preset-react
```
Agora podemos criar nosso index.html, o arquivo principal que importará todo o Javascript e carregará a aplicação:
```HTML
Webpack React Example
```
Veja que temos uma parte que importa o arquivo 'bundle.js' ele será todo o javascript da nossa aplicação;
Para que esse arquivo seja criado, precisaremos do Webpack. Portanto, vamos criar o arquivo webpack.config.js, que será o arquivo de configuração do Webpack:
```js
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js',
},
};
```
Feito já temos as configurações mínimas para uma aplicação com Webpack sendo necessário um arquivo de entrada (entry) e um de saída (output).
No caso nosso app.js sera o responsável pelo nosso javascript e por todo o resto ligado a nossa aplicação. Já o bundle.js será gerado automaticamente.
Após esses passos, podemos alterar o 'package.json' para que possamos rodar o webpack e gerar o build:
```json
{
"name": "webpack-react-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"webpack": "^1.13.3"
}
}
```
Nossa alteração foi adicionar o script `start`. Com ele, podemos rodar nossa aplicação com o comando:
```
npm start
```
Agora vamos criar o arquivo que falta, o app.js, que terá o Hello World em React:
```js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hello World
, document.getElementById('app'));
```
Porém, apesar desse código ser muito simples, possui duas limitações que nossos browsers não conseguem interpretar:
- Código em React
- Código em ES2015
Por isso precisamos voltar em nosso arquivo de configuração do Webpack para usar loaders que transformem esse código em JavaScript puro que é entendido pelos browsers:
```js
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.js/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
],
},
};
```
Pode ter ficado complicado agora, mas vamos passo a passo.
Primeiro, vamos pegar todos os arquivos que terminem com .js:
`test: /\.js$/ `
Depois, vamos excluir todos os arquivos que vem da pasta node_modules, porque não faz sentido tocarmos em libs externas:
`exclude: /node_modules/ `
Agora, basta informarmos que vamos usar o Babel como loader principal:
`loader: 'babel`
E para fechar criaremos um novo arquivo chamado `.babelrc` que sera responsavel por definir os dois loaders que precisamos, o babel-preset-env e o preset-react, e o babel-preset-react:
```
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
]
}
```
Pronto. Agora basta digitar o comando para rodar o Webpack:
`npm start`
Feito isso, temos um bom exemplo de como o webpack funciona. Caso quiser se aprofundar na ferramenta e melhorar essa aplicação, é recomendado ler o post original desse tutorial [clicando aqui](https://medium.com/tableless/webpack-para-react-o-guia-final-cb8a95b369ed).
Bem tudo isso foi um tutorial para explicar como o webpack funciona, e de certo modo é o que acontece por trás dos panos com o nosso index.html e nosso index.js, veja abaixo como fica os arquivos.
```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
```
```html
```
Apenas um pedaço do código original do index.html
## Referências:
[Webpack para React: o Guia Final](https://medium.com/tableless/webpack-para-react-o-guia-final-cb8a95b369ed)
[Ir para Próxima Seção](./3-Vite.md)
Made with :purple_heart:
================================================
FILE: docs/Ferramentas de build/3-Vite.md
================================================
# O que é Vite?
O Vite.js é um servidor de desenvolvimento rápido e leve para projetos JavaScript e TypeScript. Ele usa o especificador de arquivo de configuração do Vite para detectar automaticamente as configurações de compilação e fornece recursos como transpilação em tempo real e recarregamento automático de página.
Ele também possui suporte a módulos ES modules nativos, o que significa que você pode começar a desenvolver imediatamente sem configurar um bundler como webpack. Vite é uma boa opção para projetos menores ou para prototipagem rápida.
# Por que usar o vite e não outras ferramentas de build?
o Vite foi projetado para ser rápido e eficiente, especialmente em comparação com outras ferramentas populares como webpack. Ele usa o ES modules nativo para carregar módulos sem precisar passar por um processo de empacotamento, o que torna o desenvolvimento mais rápido.
Além disso, ele não requer configurações complexas, ele usa o arquivo vite.config.js para detectar automaticamente configurações de compilação.
E para aqueles que são fã do typescript o vite tem suporte nativo para TypeScript, o que significa que você pode começar a escrever códigos TypeScript sem ter que fazer uma configuração adicional.
Caso você tenha curiosidade recomendo dar uma olhada na documentação oficial, basta [clicar aqui](https://vitejs.dev/guide/)
# Como utilizar o Vite no React?
De maneira simples, o vite disponibiliza comandos para iniciar um projeto React, Angular, Vue, Svelte e Lit. Para iniciar um projeto React basta rodar o comando:
```bash
npm create vite@latest my-react-app --template react
ou
npm create vite@latest my-react-app --template react-ts
```
Após isso, basta você codar e o vite irá fazer o resto. Ele irá criar um servidor de desenvolvimento e irá atualizar a página automaticamente quando você salvar um arquivo.
## Referências:
[Site oficial do ViteJS](https://vitejs.dev)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/1-Introducao.md
================================================
# Introdução
Seja bem-vindo! :purple_heart:
O principal objetivo é introduzir todo o conteúdo básico de React para iniciantes. Antes de começar é necessário conhecer os conceitos básicos de HTML, CSS e **principalmente** Javascript.
Você pode consultar esses outros repositórios do 4noobs para aprender esses conteúdos:
- [HTML](https://github.com/sorenhe4rt/HTML4Noobs)
- [CSS](https://github.com/mathh95/css4noobs)
- [Javascript](https://github.com/ThiagoDellaNoce/javascript4noobs)
Após a pequena jornada percorrida pelo roadmap, não iremos nos aprofundar tanto sobre as tecnologias, o foco é você saber o básico de react para se aprofundar no futuro.
[Ir para Próxima Seção](./2-O%20que%20e%20React.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/2-O que e React.md
================================================
# React
## O que é React?
O **React** é uma biblioteca Javascript utilizada para construir interfaces de usuário (UI) de uma forma reaproveitável, com a ajuda de funcionalidades específicas da mesma. Por ser uma biblioteca, a manipulação e configuração de ambientes tendem a ser mais flexíveis, além de ser 100% Javascript.
Uma das principais características do React é o conceito de **componentes** que irá ser discutido ao longo do curso, porém, já te dando um pequeno _spoiler_, os componentes são uma das principais bases do React, eles existem para separar o código em pequenos arquivos que porventura serão reaproveitados em outras ocasiões da aplicação. Para escrever componentes é utilizado JSX, uma extensão de sintaxe para Javascript.
Você pode consultar a documentação em PORTUGUÊS, traduzida pela comunidade, [aqui](https://pt-br.react.dev/)
Parece complicado, né? Mas não se assuste! Iremos entrar em detalhes em breve.
[Ir para Próxima Seção](./3-JSX%20e%20Babel.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/2.1-iniciando um projeto react.md
================================================
# React
## Iniciando um projeto
Como já sabemos o `React` é uma biblioteca! E para podermos utiliza-la precisamos instalar os pacotes necessários em nosso projeto.
Até o ano passado, utilizavamos uma ferramenta muito conhecida chamada `create-react-app` que era fornecido pela propria biblioteca para iniciarmos nosso projeto. Ela criava uma estrutura de pastas e instalava todos os pacotes necessários para que pudessemos utilizar o React. Era algo como:
```js
npx create-react-app
```
Porém recentemente esta mesma ferramenta foi depreciada, ou seja não é mais recomendava e provavelmente nem terá mais suporte/atualizações.
Portanto, hoje temos algumas opções e as mais recomendadas são algumas frameworks que já são bem robustas no mercado! (Não entraremos a fundo a respeito dessas frameworks por agora, cada uma delas terá sua propria seção neste projeto)
- NextJS
```js
npx create-next-app
```
- Remix
```js
npx create-remix-app
```
- Gatsby
```js
npx create-gatsby
```
\_ Expo(Para mobile)
```js
npx create-expo-app
```
Estas são algumas das opções que a propria documentação do `React` nos fornece, porém todas elas muitas vezes são muito robustas para utilizarmos em coisas pequenas. A famosa frase `"Utilizar uma bazuca para matar uma formiga"`.
Dito isto, temos opções criando nossa propria configuração personalizada ou utilizando o [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/).
Mostraremos como começar com o Vite pois ele já oferece comandos sem nenhuma configuração para todos.
Para projetos React com javascript, basta utilizar o comando:
```js
yarn create vite
```
```js
npm create vite@latest
```
Você também pode iniciar os projetos já colocando o nome através do comando.
```js
yarn create vite@latest react4noobs --template react
```
Caso tu queira começar um projeto `React com typescript`, basta mudar o template para `--template react-ts` ou escolher através da interface que aparecerá quando por comando!
Então é isto, agora sabemos que hoje no mercado temos algumas frameworks bem robustas e diversas formas de iniciar um projeto com React. Então cabe a ti escolher qual a que vale mais apena para o seu projeto.
[Ir para Próxima Seção](./3-JSX%20e%20Babel.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/3-JSX e Babel.md
================================================
# JSX
O JSX é uma extensão de sintaxe para Javascript, basicamente é uma sintaxe semelhante ao XML, onde você consegue compreender de uma melhor forma como será montado o seu componente UI.
O React não obriga o uso do JSX, mas geralmente utilizamos por achar prático e por ele ajudar bastante na parte visual.
## Exemplo
```js
const elemento =
Olá, membro He4rt!!
;
```
Este código acima é o JSX propriamente dito, não é uma string e nem HTML, legal né?
Em JSX, como acabamos misturando sintaxe HTML com Javascript, em atributos do HTML como `class` devemos substituir para `className` no JSX.
Se pode utilizar JSX dentro de `if` e laços `for`, para mostrar um elemento, vamos ver os detalhes mais adiante.
# Babel
O Babel é um transpilador utilizado para transformar o JSX em outras versões Javascript, mas agora vem a dúvida, por quê?
Atualmente nem todos os navegadores entendem o Javascript moderno, mas com o Babel, a compatibilidade entre todos se torna possível.
[Ir para Próxima Seção](./4-Componentizacao.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/4-Componentizacao.md
================================================
# Componentização
## O que é a componentização?
A componentização dentro do React é um conceito bastante utilizado. Um dos seus principais objetivos é maximizar o reuso em uma aplicação.
O **conceito de componentização** é uma das principais diferenças do React e de outras bibliotecas baseadas em componentes diante de bibliotecas como jQuery e Angular 1.
> Componentes são conjuntos isolados de lógica (javascript), visualização (JSX/HTML) e estilização (CSS).
A componentização funciona da seguinte forma, dividimos nossa interface/aplicação em pequenas partes (componentes) que sozinhas conseguem ter funcionalidades específicas.
Na imagem abaixo cada área separada com uma cor diferente é um componente, podemos ter componentes dentro de outros componentes. Aliás, nossa aplicação em si é um componente.
_Fonte: [QCode](https://www.qcode.in/learn-react-by-creating-a-comment-app/)_
## Exemplos
### Exemplo 1 - Simples
Para que não fiquemos só na parte teórica, podemos exemplificar um componente simples em React. Um componente chamado `Button` que pode ser reutilizado na sua aplicação.
```js
import React from "react";
export default function Button() {
return ;
}
```
Você deve ter percebido que o componente pode ser simplesmente uma função. O componente acima é um botão que mostra um _alert_ para o usuário quando é clicado.
### Exemplo 2 - Avançado
Podemos ter diversos tipos de componentes e cada componente com sua complexidade.
Na [imagem](#Dividindo-interface-em-componentes) que mostramos como podemos dividir uma aplicação em componentes, podemos mostrar de como ficaria o componente `Comment`, bora lá?
```js
import React from "react";
export default function Comment() {
return (
Mike
Yew, it gives you total control over how you structure your app and date flow.
);
}
```
Nesse componente utilizamos algumas tags HTML, `img` para imagem do usuário do comentário, `section` envolvendo o `strong` que é o nome do usuário e `p` que é o comentário do usuário. Criando este componente, se pode reutiliza-lo por toda a aplicação, bastando apenas importá-lo.
### Exemplo 3 - Reuso
Como dito no inicio, um dos principais objetivos da componentização é o `reuso`, dito isto podemos declarar componentes para serem utilizados dentro de outros.
Para demonstrar, utilizaremos os componentes de Button e Comments já criados nos outros exemplos e um novo componente chamado `ComposedComponent`(Componente composto), que utilizará tanto o Button quanto o Comment.
```js
import React from "react";
function Button() {
return ;
}
function Comment() {
return (
Mike
Yew, it gives you total control over how you structure your app and date flow.
);
}
function ComposedComponent() {
return (
Meus comentários
);
}
```
Como podem ver, podemos reutilizar quantas vezes quisermos um componente criado no React, a unica diferença será que a primeira letra sempre será maiuscula.
Podemos concluir desse capítulo que tudo em React é componente, o quanto antes você entender as utilidades deles e como eles 'conversam' entre si (_spoiler_ dos próximos capítulos) mais rápido será seu aprendizado em React.
[Ir para Próxima Seção](./4.1-FormasDeDeclarar.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/4.1-FormasDeDeclarar.md
================================================
# Formas de declarar um componente
Atualmente no React temos duas formas de declarar componentes:
1. Componentes de classe
2. Componentes de função(_Você viu este no ultimo capítulo_)
## Componentes de classe
Como o próprio nome já diz, declaramos um componenente criando uma classe javascript.
Para declarar precisamos:
- Criar uma classe
- Extender essa classe com o **React.Component**.
- Adicionar o método **render()** e seu retorno.
Essa função chamada **render()** é responsavel por renderizar nosso componente em tela, ela sempre deve retornar um código html.
```js
import React from "react";
class Welcome extends React.Component {
render() {
return (
Renderizando um componente de classe
);
}
}
```
## Componentes de Função
Esta forma consiste em declarar componentes através de funções. Você já deve ter visto no capítulo anterior e em outros lugares.
Tudo que você precisa é:
- Criar uma função com a primeira letra Maiuscula
- Retornar um código HTML desta função
Pronto, agora tu já tem seu componente de função.
> Observação: Apartir do React 17, não é necessário mais importar o React nos arquivos.
```js
import React from "react";
function ComponenteDeFuncao() {
return (
Meu componente de função
);
}
```
## Uma terceira forma??
Sim, temos uma terceira forma. Na verdade, não passa de um componente de função(ou funcional). Com os recursos do **Javascript ES6** podemos declarar da seguinte forma:
```js
import React from "react";
const ComponenteA = () => {
return (
Componente es6
);
};
// Ou
const ComponenteB = () => (
Componente es6 2
);
```
Ok mas o que está acontecendo?
Declaramos uma váriavel com **letra maíuscula** e dizemos que ela é uma função que possui um retorno.
No caso do _ComponenteA_, abrimos uma função e fazemos o nosso return como estamos acostumados, isto é chamado **retorno explícito**. Já no _ComponenteB_ acontece o que chamados de **retorno implícito**, quisemos apenas renderizar um componente e não possuimos nenhum dado para tratar dentro da função, dessa forma o javascript irá entender que ali é o **return** da função.
## Qual devo utilizar?
Ao chegar aqui tu aprendeu sobre como declarar os componentes e provavelmente surgiu a seguinte dúvida: "Qual tipo de componente devo utilizar?"
A resposta é bem simples, use sempre **componentes funcionais** pois não só é uma forma mais prática e limpa mas também com a chegada dos hooks (_spoiler_) eles se tornaram muito melhores.
**PERAI**
Não pense que aprender componentes de classe é algo desnecessário, pelo contrário você precisará deles para poder entender melhor o **ciclo de vida** (_spoiler_) dos componentes e também os hooks (_spoiler de novo_). Talvez você os encontre em projetos legados (antigos) e precise converter para funcionais ou até mesmo dar manutenção... Então todo conhecimento é válido!
Podemos concluir nesse capítulo que temos mais de uma forma para declarar componentes e o por que aprender ambas formas.
No próximo capítulo tu aprenderás sobre as **Propriedades** dos componentes, entenderá que podemos criar componentes muito mais dinâmicos que os que fizemos anteriormente.
[Ir para Próxima Seção](./4.2-Propriedades.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/4.2-Propriedades.md
================================================
# Propriedades
Nesse capitulo você irá aprender o que são **Propriedades** nos componentes React.
**Lembra** das tags do HTML? Elas podem receber algumas propriedades, correto? Como no exemplo abaixo, onde a tag input recebe as propriedades type (que é igual a "text") e class (que é igual a "minha-classe"):
```html
```
No React também é possível que nossos componentes façam o mesmo:
```js
const elemento =
```
Quando o React vê um componente criado por você, ele irá passar todos os atributos JSX e componentes filhos para um objeto chamado **"props"**
Com isso podemos acessar esse objeto de dentro do componente.
## Exemplo 1: Componentes funcionais
Como dito anteriormente, o React passa todas essas propriedades por um objeto **props**, então no caso dos componentes funcionais ele vem como um parametro da função.
```js
import React from 'react'
function ComponenteComProps(props){
return(
{props.title}
{props.subtitle}
)
}
// Nosso componente podee receber as propriedades "title" e "subtitle".
function Page(){
return(
Meus posts
)
}
```
## Exemplo 2: Componentes de classe
Nos componentes de classe podemos acessar o objeto **props** a partir do **this**.
```js
import React from 'react'
class ComponenteComProps exteds React.Component{
render(){
return(
{this.props.title}
{this.props.subtitle}
)
}
}
// Nosso componente podee receber as propriedades "title" e "subtitle".
class Page extends React.Component{
render(){
return(
Meus posts
)
}
}
```
## Importante
Não sei se prestaram atenção, mas em um trecho acima foi dito que o React também passa os **componentes filhos** para esse objeto **props**. Para acessar esses objetos, existe uma propriedade dentro do **props** chamada **children**, ela contem **TODOS** os filhos do componente.
Ex:
```js
import React from "react";
// O objetivo desse componente é ficar por "cima" de todos os outros.
function ComponenteCaixa(props) {
return
{props.children}
;
}
function Page() {
return (
titulo
titulo
titulo
titulo
titulo
);
}
// Agora todos esses elemementos dentro do componente caixa serão renderizados pelo mesmo.
```
Podemos concluir que o React transforma todos os atributos e filhos em um unico objeto e podemos acessa-los através do objeto **props**.
Nos próximos capítulos vocês aprenderão sobre **Ciclo de vida de um componente** e **Estados**.
[Ir para Próxima Seção](./5-Estados.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/5-Estados.md
================================================
# Estados
Neste capítulo você entenderá o que são **Estados** no React.
## O que é?
Estados são dados que podem variar, sendo que essa variação pode ser causada pela ação do usuário em sua aplicação. Normalmente já trabalhamos com isso, sabe quando você faz um contador em javascript e o valor fica toda hora alterando de 0, 1, 2, 3 , 4, etc... Isso são estados. No caso do React os estados também são uma forma de verificação para a renderização, então quando esse valor (estado) é alterado causa uma nova renderização.
Esse também é um dos motivos do React ser one way databinding (Significa que ele observa as mudanças por apenas um caminho para então atualizar a arvore de elementos(DOM)).
Vamos pra mais um exemplo:
Suponha que tu faça uma aplicação de contador, quando tu apertar start ele sairá do 0 e ficará mudando. Vemos aqui que o estado inicial da aplicação é 0 e conforme ele vai sendo alterado o valor em tela também é.
## Como fazer no React?
Bom no React temos algumas formas de lidar com isso, seja pelos hooks ou pelos componentes de classe.
Como não falamos sobre hooks ainda, trabalharemos apenas com componentes de classe.
Nesse exemplo vamos trabalhar apenas com um estado, porém é possivel colocar quantos quiser no objeto.
```js
import React from 'react';
class Counter extends React.Component {
// No contrutor de classe, criamos nossos estados através do this.state
constructor(props){
super(props);
this.state = {
counter: 0,
}
}
// É possivel acessar o estado com this.state.nome-do-estado
render(){
return (
Contador: {this.state.counter}
)
}
}
```
Agora o React trabalha com conceitos de imutabilidade, portantdo você nunca poderá alterar um dado diretamente. Como por exemplo: this.state.counter = 10; Ele não permite isso, a imutabilidade obriga que a variável seja destruída e uma nova seja colocada no lugar, mas normalmente isso é feito de forma transparente para o programador, e por isso que você não pode alterar a variável diretamente.
Dessa forma, devido ao conceito de imutabilidade, sempre iremos definir novos dados ao invés de modificar o dado.
Para isso o React usa uma função chamada **setState** que adiciona um novo valor a variável.
```js
// No contrutor de classe, criamos nossos estados através do this.state
constructor(props){
super(props);
this.state = {
counter: 0,
}
}
function handlePlusCounter(){
// Através da função setState, podemos definir novos valores.
this.setState({
counter: this.state.counter + 1;
})
}
function handleMinusCounter(){
this.setState({
counter: this.state.counter - 1;
})
}
// É possivel acessar o estado com this.state.nome do estado
render(){
return (
Contador: {this.state.counter}
)
}
}
```
Então o que acontece no exemplo acima? Se tu clicar em "+", o estado terá um novo valor "1" e terá uma nova renderização, onde em tela o valor será atualizado também. E se tu apertar "-", o atual valor 1 voltará a ser 0 e causará uma nova renderização fazendo com que tu veja 0 em tela.
O conceito de estado e seu uso no React é bem simples porém conforme a aplicação cresce a complexidade aumenta.
Nos próximos capítulos vocês aprenderão sobre **Ciclo de vida de um componente** e **Hooks**.
[Ir para Próxima Seção](./6-Ciclo-de-vida.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/6-Ciclo-de-vida.md
================================================
# Ciclo de vida
Neste capítulo você entenderá o que é **Ciclo de vida** no React.
## Introdução
Quando estamos utilizando o React que tem por base a componentização, **é preciso entender como que tudo funciona para que possamos saber o que fazer e quando fazer algo.** Todos os componentes possuem um ciclo de vida que vai desde o momento em que ele aparece na tela até ele desaparecer da tela.
O objetivo desse ciclo é gerenciar os recursos da aplicação, ou seja, tudo que não está em tela é "destruido" ou apagado pra poder garantir recursos para os que estão em tela.
Ainda não entendeu? Vamos para um exemplo:
Você tem dois componentes em tela, porém após alguma ação do usuário um dos componentes desaparece da tela. Nesse momento o React "destroi"/apaga ele da DOM para guardar recursos e garantindo que todo o resto continue funcionando.
Enfim, vamos ao que interessa!
O React permite que manipulemos o ciclo de vida e podemos dividir o mesmo em 3 momentos:
- Montagem (Quando aparece em tela)
- Atualização (Quando altera um dado em tela)
- Desmontagem (Quando desaparece da tela)
## Montagem
Nesta etapa ocorre quando **nosso componente aparece em tela da primeira vez**, quando ele é colocado na DOM. Então nosso componente é renderizado em tela com todas as props que passamos para ele, todas as requisições de dados e etc.
Temos três funções nesta etapa:
- **componentWillMount** → Essa etapa é executada antes mesmo da montagem do componente, aqui colocamos ações das quais queremos que execute no inicio do nosso componente. Como por exemplo chamadas na API, tratamento de dados recebidos e por ai vai.
> No React Hooks é ouseLayoutEffect.
> Exemplo:
> Para todos os exemplos utilizaremos uma biblioteca chamada Axios para lidar com asrequisições, ela possui algumas vantagens em relação a fetch api nativa do JS mas você pode utilizar o que você bem entender.
```jsx
import React from "react";
import axios from "axios";
class CardPerson extends React.Component {
constructor() {
super();
this.state = {
name: "",
birthday: "",
};
}
// Funcão para pegar os dados
async loadData() {
try {
// Fazemos uma requisição para algumaapi
const response = await axios.get("URLDE ALGUMA API");
// Após pegar os dados setamos ele noestado
this.setState({
name: response.data.name,
birthday: response.data.birthday,
});
} catch (error) {
console.log("error");
}
}
componentWillMount() {
loadData();
}
render() {
return (
{this.state.name}
{this.state.birthday}
);
}
}
```
ATENÇÃO!
Essa é uma parte do ciclo quase não utilizada, pois existem diversos problemas. Atualmente no React é recomendando o usar ocomponentDidMount.
- **constructor** (No caso dos componentes de classe) → No caso dos componentes de classe, é nessa etapa que definimos as propriedades, estados e em alguns casos um bind para que o nosso _this_ faça referência ao componente.
- **componentDidMount →** Basicamente ocorre após a montagem do componente na DOM, ou seja após o método **render.** Nessa etapa colocamos ações das quais queremos que execute no inicio do nosso componente. Como por exemplo chamadas na API, tratamento de dados recebidos e por ai vai.
> No React Hooks é o useEffect.
```jsx
import React from "react";
import axios from "axios";
class CardPerson extends React.Component {
constructor() {
super();
this.state = {
name: "",
birthday: "",
};
}
// Funcão para pegar os dados
async loadData() {
try {
// Fazemos uma requisição para alguma api
const response = await axios.get("URLDE ALGUMA API");
// Após pegar os dados setamos eles no estado
this.setState({
name: response.data.name,
birthday: response.data.birthday,
});
} catch (error) {
console.log("error");
}
}
componentDidMount() {
loadData();
}
render() {
return (
{this.state.name}
{this.state.birthday}
);
}
}
```
Após a renderização do componente em tela, ele irá executar uma função que irá pegar dados de alguma api nossa, para então pegar esses dados e coloca-los nos estados.
Vamos supor que fazemos uma chamada a api que retorna os dados:{name: "Heart", birthday:"13/13/2090"}. Essa chamada só irá ocorrer depois que o componente estiver em tela, após ser concluida ela irá atualizar os estados e consequentemente alterar os dados em tela para: Heart e 13/132020.
A diferença pode parecer que é apenas o nome mas tudo muda completamente. Agora só estamos fazendo a requisição após o componente estar na DOM e não antes.
## Atualização
Esta etapa está relacionada a qualquer atualização ou mudança de dados em tela. Seja quando uma propriedade ou até mesmo um estado seja alterado.
Temos três funções nesta etapa:
- **shouldComponentUpdate** → Essa função será chamada sempre que um estado ou propriedade for chamada. Nela você pode decidir se o componente irá renderizar novamente ou não, por padrão ele re-renderiza.
Esse método existe apenas para questão de performance, confiar nele para evitar re-renderização pode ocasionar bugs indesejados.
```jsx
import React from "react";
import axios from "axios";
class CardPerson extends React.Component {
constructor(props) {
super();
this.state = {
name: props.name,
birthday: props.birthday,
};
}
// Essa função recebe as próximas props e state
shouldComponentUpdate(nextProps, nextState) {
return nextProps.name !== this.state.name;
}
render() {
return (
{this.state.name}
{this.state.birthday}
);
}
}
```
Ok, mas o que está acontecendo? Bom, estamos dizendo que quando ocorrer uma atualização de dados, o componente deve atualizar somente quando o novo nome for diferente do que está no estado atual
**Devo alertar novamente que essa função é utilizada em casos muito raros e não é recomendada sua utilização sem um motivo concreto.**
- **componentWillUpdate** → Essa função é executada no momento da atualização de dados (props ou estados) e assim como a anterior define se o componente deve renderizar novamente ou não. Atualmente é um método marcado como inseguro pela própria documentação do React e recomenda-se que seja substituído pelo componentDidUpdate que falaremos a seguir.
- **componentDidUpdate** → Esse metodo é chamado logo após do componentDidMount, basicamente ele que você irá utilizar para checar se ocorreu alguma atualização de dados. Um bom exemplo é quando seu componente precisa fazer uma requisição para uma API sempre que um dado muda.
> No React Hooks é o useEffect
```jsx
import React from "react";
import axios from "axios";
class CardPerson extends React.Component {
constructor(props) {
super(props);
this.state = {
name: props.name,
birthday: "",
};
}
// Funcão para pegar os dados
async loadData() {
try {
// Fazemos uma requisição para alguma api
const response = await axios.get("URL DE ALGUMA API");
// Após pegar os dados setamos eles no estado
this.setState({
name: response.data.name,
birthday: response.data.birthday,
});
} catch (error) {
console.log("error");
}
}
// Guarda as propriedades e estados anteriores
componentDidUpdate(prevProps, prevState) {
if (prevState.name !== this.state.name) {
loadData();
}
}
render() {
return (
{this.state.name}
{this.state.birthday}
);
}
}
```
Aqui sempre que o name for alterado,faremos uma requisição nova na api para pegar os novos dados.
## Desmontagem
Esta é a ultima etapa, é quando o componente não é mais necessário em tela e portanto deve ser removido. Aqui temos apenas a função **componentWillUnmount.**
- **componentWillUnmount** → Essa função ocorre sempre que um componente é removido de tela para garantir que ele não permaneça na DOM. É uma parte importante porém tu só mexe em casos muito específicos, por exemplo: Limpar algum dado durante a desmontagem que você definiu durante a montagem(**componentDidMount**).
## Conclusão
Concluímos que o ciclo de vida dos componentes no React é algo muito bem trabalhado e interessante. Podemos não apenas entender mas também manipula-los para realizar diversas ações.
Bom, até então em todos os exemplos utilizamos a abordagem mais clássica do React que são os componente de classe. Porém é algo não muito utilizado nos dias de hoje, com a vinda dos _React Hooks_ se tornou muito melhor desenvolver utilizando componentes de função.
Nos próximos tópicos você aprenderá sobre oque são hooks, como utilizar e seus equivalentes em relação ao ciclo de vida!
[Ir para Próxima Seção](./7-Manipulando%20Eventos.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/7-Manipulando Eventos.md
================================================
# Manipulando Eventos
## Qual a diferença dos eventos do HTML para o React?
Bom, de certa forma a manipulação de eventos no React é bem parecida com o padrão do HTML porém existem algumas diferenças.
- Eventos são nomeados utilizando camelCase, ou seja ao invez de um espaço, barra ou traço entre as palavras, simplesmente usa letra maiuscula. (Ex: manipulandoEventos).
- Graças ao JSX você passa uma função na propriedade do evento e não um texto.
- No HTML podemos evitar o comportamento padrão de alguns elementos enviando false porém no React precisamos fazer isso o **preventDefault**.
Exemplo 1:
```html
```
Exemplo 2:
```html
```
```jsx
// React
function Form() {
function handleSubmit(event) {
event.preventDefault();
console.log("funfo");
}
return (
);
// ou
return (
);
}
```
Vale lembrar que toda função alocada a um evento recebe como parametro o evento, portando é possivel manipular da forma que deseja seu comportamento. Por exemplo: As vezes você nem quer pegar o objeto **event** inteiro, apenas o valor pra realizar sua função... A depender do componente, tudo que precisa é uma arrow function _(event) => function(event.target.value)_ ou algo do tipo.
## Consigo passar mais de um parâmetro
A resposta é sim! Como disse no tópico anterior, podemos utilizar arrow functions para passar como argumento, portando tudo que precisamos fazer é utiliza-las de forma correta!
Ex:
```jsx
function Form() {
function handleSubmit(event) {
event.preventDefault();
console.log("funfo");
}
return (
);
}
```
Lembra de como é feito para lidar com eventos no JS puro?
Um comportamento padrão é que esses eventos ficam disponibilizados para as funções, ela passa o evento. Por exemplo, tu cria a função `handleChange()` e coloca em um `onchange` que no `React` é `onChange`. Essa função irá receber como parametro `SEMPRE` o `event`, ou seja os dados do evento.
Esse comportamento é melhor de explicar com Javascript puro da seguinte forma.
```js
// Pegamos o botão
cont btnSave = document.querySelect('#saving');
// Adicionamos um evento para ele através do addEventListner
// 1º Parametro: nome do evento
// 2º Parametro: Função de callback, lembrando que sempre irá receber um event como parametro.
btnSave.addEventListener('click', (event) => {
})
// Tu também pode fazer o seguinte
function handleClick(event){
//algo aqui dentro
}
btnSave.addEventListener('click', handleClick)
// Outra forma é ir direto pra uma propriedade do componente.
btnSave.click = handleClick;
```
Enfim, por que isso foi explicado? Lembra que o React não permite que utilizemos os mesmos nomes do HTML padrão? Apenas por camel case(ex: onchange = onChange). Porém o comportamento é o mesmo, todo onChange irá passar como `primeiro parametro` das funções o `event`.
```js
import { useState } from "react";
function inputChangeComponent() {
const [text, setText] = useState("");
// Recebemos o evento
// Vale lembrar que após o primeiro parametro, podemos simplesmente por qualquer parametro que quisermos.
function handleChange(event) {
setText(event.target.value);
}
return (
<>
);
}
```
Outro ponto importante de destacar é: se apenas colocarmos nossa função no onchange/onChange, assim como no javascript puro irá passar o `event` como primeiro parametro. Porém também é possivel passar como segundo ou terceiro a depender da sua escolha.
Vamos utilizar o exemplo do form que fizemos lá em cima.
```jsx
function Form() {
const id = 847875211221;
function handleSubmit(event, id) {
event.preventDefault();
console.log("funfo", id);
}
return (
// Com uso das arrow functions, fazemos uma função anônima tendo como parametro o event e em sequida chamamos nosso handleSubmit passando tanto o event quanto o id.
// Lembre-se que a ordem nesse caso fica a sua escolha, se eu definisse na função que iria receber primeiro o id e o segundo seria o event daria o mesmo resultado.
);
}
```
Nesse tópico você aprendeu sobre manipulação de eventos no React. Agora é praticar e estudar para poder melhorar cada vez mais.
Deixo também o link da [documentação do React](https://pt-br.reactjs.org/docs/handling-events.html), para poderem ver direto da fonte.
---
[Ir para Próxima Seção](../Ferramentas%20de%20build/1-npm-yarn.md)
Made with :purple_heart:
================================================
FILE: docs/Iniciando com React/8-React Hooks.md
================================================
# React Hooks
## O que são Hooks
Hooks são funções utilizadas para ter acesso recursos de **estado** e **ciclo de vida**, em **componentes funcionais**. Eles não podem ser utilizados em componentes de classe. Os Hooks no React são nomeados com o prefixo 'use'.
Por padrão o React já fornece alguns Hooks integrados, como por exemplo o useState. Você também pode criar seus próprios Hooks para reusa-lo em outros componentes, contanto que siga as regras dos hooks.
### Observações sobre os hooks:
> Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funções dentro de funções). Em vez disso, sempre use Hooks no nível superior de sua função React. Seguindo essas regras, você **garante que os Hooks serão chamados na mesma ordem** a cada vez que o componente renderizar.
Agora que você tem entendimento sobre o que são os Hooks, separamos para você conteúdos falando sobre os principais e mais utilizados hooks dentro do ecossistema do React.
[Ir para a próxima seção](./8.1-useState.md)
================================================
FILE: docs/Iniciando com React/8.1-useState.md
================================================
# React Hooks
## useState
O _useState_ é um dos Hooks utilizados para criar estado dentro de um componente em React. O estado criado pelo _useState_ nada mais é que uma variável que o componente consegue reagir quando seu valor é atualizado.
O _useState_ recebe como parâmetro o valor inicial do estado. E retorna um _array_ onde o primeiro valor é o estado atual, e o segundo valor é uma função usada para alterar o valor do estado.
Esta função para alterar o estado pode receber apenas o novo estado, ou uma função que recebe o estado anterior e retorna o novo estado.
Este segundo jeito é particularmente útil quando é feita mais de uma alteração de estado de uma vez, pois, como o componente é renderizado novamente assim que a primeira alteração de estado acontece, as outras alterações acabam não acontecendo corretamente. Outra utilidade é que o novo estado pode ser derivado do estado original.
### Exemplos:
```jsx
import React, { useState } from "react";
function Counter() {
// Cria estado 'clicks' com valor inicial 0
// Um jeito fácil de separar o retorno do useState é fazendo desestruturação de array
const [clicks, setClicks] = useState(0);
return (
{clicks}
{/* A função 'setClicks' é usada para mudar valor de 'clicks' */}
);
}
```
```jsx
import React, { useState } from "react";
function Counter() {
// Cria estado 'clicks' com valor inicial 0
const [clicks, setClicks] = useState(0);
// Cria estado para o campo de diferença
const [valorInput, setValorInput] = useState("1");
function handleButton() {
// Converte o valor do campo para um número
const valorInputNumber = parseInt(valorInput);
// Se o valor não for um número inteiro então não fazer nada
if (isNaN(valorInputNumber)) return;
// Alterar o contador somando o número obtido do campo
setClicks((oldState) => oldState + valorInputNumber);
}
return (
{clicks}
Diferença:
setValorInput(e.target.value)}
/>
{/* Quebra de linha entre o input e o botão */}
);
}
```
### Erros comuns
**Esquecer de importar o _useState_**
O hook precisa ser importado do React antes de ser utilizado:
```js
import { useState } from "react";
```
**Tentar alterar o estado diretamente (estado = novoValor)**
O estado nunca deve ser alterado diretamente. Sempre utilize a função retornada pelo _useState_ para atualizar o valor, garantindo a re-renderização correta do componente.
**Esperar que o estado seja atualizado imediatamente**
A atualização de estado no React pode ser assíncrona. Por isso, o novo valor pode não estar disponível logo após a chamada da função de atualização.
[Ir para a próxima seção](./8.2-useEffect.md)
================================================
FILE: docs/Iniciando com React/8.2-useEffect.md
================================================
# React Hooks
## useEffect
O _useEffect_ é um Hook utilizado para realizar efeitos colaterais. Esse Hook recebe respectivamente como parâmetros: uma função de _callback_ e um _array_ de dependências. Quando uma das variáveis do _array_ de dependências muda de valor, a função passada como primeiro parâmetro é executada.
### Exemplo:
```jsx
import React, { useState, useEffect } from 'react';
function Counter() {
const [clicks, setClicks] = useState(0);
// Atualiza o título da página toda vez que 'clicks' muda de valor
useEffect(() => {
document.title = `Você clicou ${clicks} vezes`;
}, [clicks]);
return (
{clicks}
);
}
```
Caso o _array_ de dependências seja declarado vazio (`[]`), a função de _callback_ vai ser executada apenas no momento em que o componente é montado.
```jsx
useEffect(() => {
// Essa função vai ser executada apenas quando o componente é montado
}, []);
```
Caso você queira que uma função seja executada quando o componente é desmontado, basta retornar essa função dentro do _callback_.
```jsx
useEffect(() => {
// A função retornada pelo callback vai ser executada apenas quando o componente for desmontado
return () => {
console.log('Componente Desmontado');
};
}, []);
```
Também é possível fazer com que o _callback_ seja executado todas as vezes que o componente renderizar novamente. Para isso, basta não passar nada como segundo parâmetro do _useEffect_. Porém, essa prática não é recomendada por questões de performance.
```jsx
useEffect(() => {
// Essa função vai ser executada toda vez que o componente renderizar
});
```
[Ir para a próxima seção](./8.3-useContext.md)
================================================
FILE: docs/Iniciando com React/8.3-useContext.md
================================================
# React Hooks
## useContext
O useContext é um hook para compartilhar dados de usuários entre components, ao invés de usarmos vários props rápidos _(props drilling)_, podemos utilizar recursos de contexto que já está nativo no React.
```jsx
const UserContext = React.createContext();
```
### Provider
O provider sincroniza o conteúdo do contexto com a renderização dos componentes que consumirem, sendo assim o provider só vai ser necessário quando os componentes precisarem do valor do contexto para renderizar o conteúdo corretamente.
```jsx
const user = {name: 'Matheus'}
```
No código acima o recurso compartilhado é um objeto user. Para compartilhar um recurso basta que seja atribuído ao atributo value.
Em seguida, podemos consumir esse contexto em nossos componentes individuais utilizando o hook useContext:
```jsx
const user = useContext(UserContext);
return
Olá, {user.name}
;
);
```
Alguns dos exemplos que são utilizados com o useContext, são para gerenciar authenticação, seleção de temas.
Uns outro exemplo que é bastante utilizado e para adicionar os dark mode
Concluindo, essa é uma forma de tornar o seu código mais limpo evitando a necessidade de utilizar várias e várias props.
[Ir para a próxima seção](./8.4-useRef.md)
================================================
FILE: docs/Iniciando com React/8.4-useRef.md
================================================
# React Hooks
## useRef
O _useRef_ é um Hook utlizado para acessar a referência valor sem que ele seja associado ao estado do componente para evitar que o elemento renderize novamente quando a refência mudar seu valor, esse hook recebe como parâmetro um valor inicial e retorna um objeto com uma referência mutável ao valor inserido, para acessar esse valor usamos a propriedade `.current` que é a referência do elemento.
Com isso podemos salvar tambem elementos HTML para que consigamos efeitos que se assemelham aos métodos _Finding HTML Elements_ do JavaScript nos Browsers.
Ex.: `document.getElementById()`, `document.getElementsByClassName()` e etc.
Para que façamos isso, passamos essa Ref como propriedades para o componente que queremos referenciar. Assim guardamos uma referência do elemento DOM como valor da nossa Ref.
### Exemplo:
```jsx
import React, { useRef } from 'react';
function ContactForm() {
// Criamos uma const que recebe o useRef passando null como parâmetro inicial
// Quando o elemento for renderizado em tela a variável inputRef será atualizada
// A partir da primeira renderização, o valor será o elemento
const inputRef = useRef(null);
const handleContinue = () => {
// Podemos acessar as informações do elemento
// Nesse if verifico se o input possui algum valor, e se não, chamo a função focus
if (!inputRef.current.value) {
inputRef.current.focus();
}
};
return (
{/* Quando esse elemento for renderizado atualizará a variável com a sua referência */}
);
}
```
[Ir para a próxima seção](./8.5-useReducer.md)
================================================
FILE: docs/Iniciando com React/8.5-useReducer.md
================================================
# React Hooks
## useReducer
o _useReducer_ é mais um Hook usado para gerenciar estados no nosso componente, mas com ele podemos centralizar a lógica que iremos aplicar ao estado do componente usando um _reducer_. Ao contrário do _useState_ onde usamos uma função para mudar diretamente o estado do nosso componente, com o useReducer usamos _Dispatchs_ para modificar o estado através de um _reducer_ intermediário em que passamos _actions_ como paramêtros para as modificações.
### Exemplo:
```jsx
import React, { useReducer } from 'react';
// Criamos um valor inicial do nosso reducer
const initialInputState = {
value: '',
error: '',
validation: /^[a-zA-Z]*$/
};
// Definimos o reducer para executar o dispatch e
// sempre que chamarmos a action para modificar o valor
// validamos o input da action
const inputReducer = (state, action) => {
switch(action.type){
case 'change':
if(state.validation.test(action.value))
return {...state, value: action.value, error: ''}
else
return {...state, value: action.value, error: 'Invalid input'}
default:
return state;
}
};
function InputWithValidation() {
const [inputState, dispatch] = useReducer(inputReducer, initialInputState);
return (
{/*
Definimos o valor padrão do input e adicionamos
um dispatch para atualizar o valor
*/}
dispatch({type: 'change', value: e.target.value}
)} />
{inputState.error}
);
}
```
Desse jeito conseguimos encapsular o comportamento do estado dentro de um reducer e gerenciar melhor a mudança de estados do componente. Mas é recomendado que o reducer seja uma função pura para que as actions tenham um efeito mais previsível.
[Ir para a próxima seção](./8.6-useMemo.md)
================================================
FILE: docs/Iniciando com React/8.6-useMemo.md
================================================
# React Hooks
## useMemo
O _useMemo_ é um Hook que permite memorizar o valor de uma expressão. Isso pode ajudar a melhorar o desempenho de uma aplicação, pois evita que a expressão seja recalculada sempre que houver uma atualização no componente.
### Exemplo:
```jsx
import { useMemo } from 'react';
function List({ data }) {
// Use useMemo para memorizar o resultado de filterData
const filteredData = useMemo(() => filterData(data), [data]);
return (
{filteredData.map(item => (
{item.name}
))}
);
}
function filterData(data) {
// Cálculo complexo que filtra os dados baseado em algum critério
return data.filter(item => item.isActive);
}
```
Neste exemplo, o componente **List** exibe uma lista de itens filtrados a partir de um conjunto de dados brutos. Usamos _useMemo_ para memorizar o resultado da função filterData para evitar que ela seja chamada sempre que os dados brutos mudarem. Isso garante que o cálculo complexo só seja executado quando realmente necessário, melhorando assim o desempenho da aplicação.
Aqui, data é a propriedade que é passada para o componente List, quando data muda a função filterData é executada novamente, e quando não muda a função não é executada novamente e o valor já memorizado é utilizado.
[Ir para a próxima seção](./8.7-useCallback.md)
================================================
FILE: docs/Iniciando com React/8.7-useCallback.md
================================================
# React Hooks
## useCallback
O _useCallback_ é um Hook que permite armazenar um cache da função a qual está se referindo. Isso pode ajudar a melhorar o desempenho de uma aplicação, pois evita que de acordo com a mudança dentro da aplicação, como um tema sendo alterado, venha a re-renderizar a função em questão.
### Exemplo:
```jsx
import { useCallback } from 'react'
function ProductPage({ productId, referrer, theme }) {
// Função utilizada para fazer a chamada para o backend e enviar dados do formulário
const handleSubmit = useCallback(
(orderDetails) => {
post('/product/' + productId + '/buy', {
referrer,
orderDetails,
})
},
[productId, referrer]
)
return (
)
}
```
Neste exemplo, o componente **ProductPage** é uma pagina na qual o usuário pode fazer a compra de um determinado produto, através do formulário que é disponibilizado, caso não houvesse um useCallback, toda vez que alterasse o tema da aplicação, o componente seria re-renderizado e junto dele o _handleSubmit_. Com o useCallback é possível ver que ao mudar o tema da aplicação a função não sofrerá mudanças e consequentemente não precisará ser `armazenada` novamente.
[Ir para a próxima seção](./9-React%20Error%20Boundaries.md)
================================================
FILE: docs/Iniciando com React/9-React Error Boundaries.md
================================================
# O que é Error Boundaries?
Antes do React 16 as aplicações costumavam quebrar quando ocorria algum erro de javascript, como por exemplo erro de tipagem. Os componentes corrompiam o estado interno e retornavam erros imcompreensíveis, os quais eram causados por algum problema em outra parte do código, mas não tinhamos como trata-los, então as aplicações acabavam crashando e o usuário era forçado a recarregar a página. Além de corromper o estado interno, quando acontece um erro que não é tratado, o React desmonta toda a arvore de componentes.
A partir do React 16, temos o conceito de Error boundaries que é basicamente um trycatch em forma de componente, utilizados para capturar e tratar erros de javascript. Os componentes de error boundaries são necessariamente componentes de classe, porque devem acessar ao método `componentDidCatch(error, info)`, que é o método responsável por capturar o erro em tempo de execução. Também podemos usar o hook `react-error-boundary` caso opite por componentes funcionais, mas não temos nenhum hook equivalente ao `componentDidCatch()`.
É ideal usar um Error Boundary para evitar crashs na aplicação, como tratamento de erros e para exibir uma interface alternativa para o usuário.
Em certos tipos de erro não conseguimos usar o Error Boundary:
- Manipuladores de evento
- Código assíncrono (ex. callbacks de setTimeout ou requestAnimationFrame)
- Renderização no servidor
- Erros lançados na própria error boundary (ao invés de em seus filhos)
# Utilização
Nesse componente estamos usando o try...catch para tratar um erro no componente ``, e isso de fato funciona, a tag `h1` é exibida no tratamento do erro.
```jsx
import React from 'react'
const Counter = () => {
try {
users?.map(({ user }) => {
return
He4rt User: {user}
})
} catch {
return
Deu ruim
}
}
const App = () => {
return
}
export default App
```
Mesmo dando erro, ele compila a aplicação:
---
Porém, se não queremos usar o `try...catch` dentro do `Counter` e passar ele para um contexto superior, o `App` não irá conseguir tratar o erro, vejamos:
```jsx
import React from 'react'
const Counter = () => {
users?.map(({user}) => {
return
}
}
export default App
```
Erro:
E isso traria problemas caso quiséssemos tratar o erro de uma renderização de páginas por exemplo, e quiséssemos usar a mesma tratativa para todas as páginas.
# Criando um componente Error Boundaries
Vamos criar um componente Error Boundaries usando um componente de classe, é importante lembrar que componentes de classes estão defasados, mas é importante entender caso se depare com algum na sua jornada.
```jsx
import React, { Component } from 'react'
class ErrorBoundary extends Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
// Este método é chamado quando ocorre um erro em qualquer componente filho
componentDidCatch(error, info) {
this.setState({ hasError: true })
// Você pode registrar o erro ou realizar ações específicas aqui
console.error('Erro capturado:', error)
console.error('Informações do erro:', info)
}
render() {
// Se ocorreu um erro, você pode renderizar uma mensagem de erro personalizada
if (this.state.hasError) {
return
Desculpe, algo deu errado.
}
// Se não houve erro, renderiza normalmente os componentes filhos
return this.props.children
}
}
// Exemplo de componente que pode gerar um erro
class ComponenteComErro extends Component {
render() {
// Simulando um erro (isso seria geralmente uma operação que pode falhar)
throw new Error('Erro simulado!')
return
Conteúdo do componente com erro
}
}
// Componente pai usando o ErrorBoundary
class App extends Component {
render() {
return (
Minha Aplicação
)
}
}
export default App
```
Podemos ver nesse exemplo aspectos importantes do Error Boundaries. Criamos nosso método que vai ser chamado sempre que ocorrer um erro não tratado em QUALQUER componente filho. Em seguida criamos um componente que pode gerar um erro e envolvmentos o componente de Error Boundary na aplicação, onde será gerado um erro em um dos componentes filhos e exibir a mensagem ''Desculpe, algo deu errado.'' na tela.
# Utilizando o `react-error-boundary`
Como visto anteriormente, necessariamente componentes de Error Boundary são criados como componentes de classe, mas componentes de classe já estão depreciados. Então podemos usar o [react-error-boundary](https://github.com/bvaughn/react-error-boundary) para utilizar Error Boundaries como componentes funcionais que está mais próximo aos códigos React que vemos no dia a dia.
Vejamos como implementar o `react-error-boundary` seguindo o mesmo exemplo anterior:
```jsx
import React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
const Counter = () => {
users?.map(({ user }) => {
return
He4rt User: {user}
})
}
const ErrorHandler = () => {
return
Eita, deu ruim! D:
}
const App = () => {
return (
)
}
export default App
```
Resultado:
Terminal:
Veja que criamos um componente fallback para exibir caso ocorra algum erro em qualquer componente que está encapsulado no ``, onde diferente do `try...catch`, conseguimos fazer uma tratativa de erro global. Então se tivessemos vários componentes encapsulados no `` e algum deles ocorresse algum erro que não foi tratado localmente, seria exibido o componente da fallback
# Método `onError`
Usando o exemplo anterior, podemos adicionar o método `onError`:
```jsx
import React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
const Counter = () => {
users?.map(({ user }) => {
return
He4rt User: {user}
})
}
const ErrorHandler = () => {
return
Eita, deu ruim! D:
}
const App = () => {
return (
{
console.log({ arg1, arg2 })
}}
>
)
}
export default App
```
Perceba que adicionamos uma `prop` `onError` no ``, se vermos o resultado `console.log` do `onError`:
Com o `onError` conseguimos retornar no `arg1` o erro que causado na aplicação e no `arg2` temos informações do source map. Com isso podemos utilizar alguns serviços para monitorar os erros da aplicação, como sentry, kibana, etc...
Veja como ficaria o código se quiséssemos usar o onError para disparar algum evento em algum serviço:
```jsx
import React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
const Counter = () => {
users?.map(({ user }) => {
return
He4rt User: {user}
})
}
const ErrorHandler = () => {
return
Eita, deu ruim! D:
}
const notifyError = () => {
// func para mandar notificação de erro para o sentry ou alguma outra plataforma de monitoramento
}
const App = () => {
return (
{
// Quando ocorre um erro não tratado, o React desmonta toda a tela.
console.log({ arg1, arg2 })
}}
>
)
}
export default App
```
Em situações de erro não tratado, o React adota uma abordagem mais drástica, desmontando a árvore de componentes para manter a estabilidade e prevenir efeitos colaterais indesejados. Por isso é importante enfatizar o uso de componentes Error Boundaries para capturar e lidar com erros de forma controlada.
---
Podemos também registrar o erro para observabilidade. Veja o exemplo:
```jsx
import React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
// Simulando um erro
const Counter = () => {
throw new Error('Erro simulado!')
return
Algo deu errado. Estamos trabalhando para resolver o problema!
)
}
const registrarErroParaObservabilidade = (error) => {
// Simulando o envio do erro para um serviço de observabilidade (por exemplo, Sentry)
console.error('Erro enviado para observabilidade:', error)
// Lógica adicional para enviar o erro para um serviço externo
// Exemplo: Sentry.captureException(error);
}
const App = () => {
return (
{
// Aqui você pode enviar o erro para um serviço de monitoramento
// ou realizar outras ações de tratamento.
console.error('Erro:', error)
console.error('Informações do erro:', info)
}}
>
)
}
export default App
```
Podemos ver que a função `registrarErroParaObservabilidade` é chamada dentro do componente `ErrorFallback` com o objetivo de simular o envio do erro para um serviço de observabilidade, como o Sentry. Essa lógica pode ser adaptada para se integrar com o serviço de observabilidade escolhido em sua aplicação. Importante lembrar de personalizar a função de acordo com as necessidades específicas de cada aplicação e do serviço de observabilidade que a mesma esta utilizando.
# Error Boundary com StackTrace
Também podemos utilizar o error boundaries para exibir informações detalhadas de erro de forma mais amigável e sem desmontar toda a tela.
Vejamos o exemplo a seguir:
```jsx
import React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
// Simulando o erro
const Counter = () => {
throw new Error('Erro simulado!')
return
)
}
const App = () => {
return (
{
// Aqui podemos enviar o erro para um serviço de monitoramento
// ou realizar outras ações de tratamento.
console.error('Erro:', error)
console.error('Informações do erro:', info)
}}
>
)
}
export default App
```
Nesse exemplo, podemos ver que `ErrorFallback` é chamada quando ocorre um erro dentro do componente `Counter`. O componente `ErrorBoundary` fornece um objeto `error` contendo informações sobre o erro, incluindo a mensagem de erro. Esse objeto pode ser usado para exibir o `stack trace` de maneira mais simplificada.
Lembrando que devemos adaptar esse exemplo de acordo com as necessidades específicas para cada aplicação. Onde o componente ErrorFallback deve ser construído para exibir informações de erro de acordo com as especificidades que varia de cada aplicação.
# Conclusão
Vimos como encapsular e tratar erro genericos de maneira global usando Error Boundaries com componentes de classe, também vimos na prática como utilizar usando o `react-error-boundary`.
Fica a dica de praticar um pouco em projetos pessoais. Não é algo que você vai usar com frequência no dia a dia, mas é importante entender esse conceito para ter mais uma carta na manga na hora de tratar erros em React.
# Referências
- [Doc antiga do react](https://pt-br.legacy.reactjs.org/docs/error-boundaries.html)
- [Error Boundaries no ReactJS - Tratamento de Erros #014](https://www.youtube.com/watch?v=6FRzHRoZmG8&ab_channel=Jo%C3%A3oBibiano)
- [A FORMA CORRETA DE TRATAR ERROS NO REACT](https://youtu.be/cV4JswN3L24)
- [Trate erros de JavaScript no React com Error Boundaries](https://youtu.be/vfwbOgpSvQA)
[Ir para a próxima seção](./Controlled-vs-uncontrolled-components.md)
================================================
FILE: docs/Iniciando com React/Controlled-vs-uncontrolled-components.md
================================================
# Controlled Components vs Uncontrolled Components
## Controlled Components
Os Controlled Components (componentes controlados) tem o React como responsável por controlar seus valores. O componente se torna controlado quando sobreescrevemos o valor da DOM, por exemplo, ao colocar a propriedade `value` em um componente de `input`. Com isso, nossa fonte de dado confiável é o estado, pois está controlando o componente, logo, se não atualizarmos o estado, a DOM não será atualizada.
A cada vez que o usuário digita algo, o estado é atualizado e por consequência o componente rerenderiza novamente. Por conta disso, validações em tempo real são utilizadas neste tipo de componente.
```jsx
const Component = () => {
const [name, setName] = useState("")
return (
setName(event.target.value)}
/>
)
}
```
Para passar um valor padrão, basta colocar um valor inicial no estado que está controlando o componente.
```diff
const Component = () => {
- const [name, setName] = useState("")
+ const [name, setName] = useState("4noobs")
return (
setName(event.target.value)}
/>
)
}
```
## Uncontrolled Components
Os Uncontrolled Components (componentes não controlados) tem a DOM como responsável por controlar seus valores, ou seja, quando precisamos de seus valores, precisamos pegar diretamente da DOM. Podemos fazer isso com o uso do hook [useRef](./8.4-useRef.md), que utiliza a referência do elemento da DOM para que seja possível acessar seus valores.
```jsx
const Component = () => {
const emailInput = useRef(null)
const handleClick = () => {
console.log(emailInput.target.value)
}
return (
<>
)
}
```
Para passar um valor padrão, basta colocar a propriedade `defaultValue` com um valor inicial para o componente.
```diff
const Component = () => {
const emailInput = useRef(null)
const handleClick = () => {
console.log(emailInput.target.value)
}
return (
<>
)
}
```
[Ir para a próxima seção](./Listas-no-react.md)
================================================
FILE: docs/Iniciando com React/Listas-no-react.md
================================================
# Listas
> Sumário:
>
> - [Como renderizar uma lista](#como-renderizar-uma-lista)
> - [Oque são Keys e por que precisamos delas](#o-que-são-keys-e-por-que-precisamos-delas)
> - [Posso utilizar Fragments ao renderizar uma lista?](#posso-utilizar-fragments-ao-renderizar-uma-lista)
> - [Conclusão](#conclusão)
# Como renderizar uma lista
Durante o desenvolvimento de um aplicativo, é muito comum que, em algum momento, você precise mostrar uma lista de itens na tela, independentemente de quais sejam esses itens. Obviamente, você não vai pegar e inserir cada um deles no código, pois não seria prático e seria quase impossível de mantê-los atualizados.
No React, graças ao JSX, conseguimos renderizar listas de forma bastante simples, utilizando uma função existente nos arrays chamada map. Com isso, podemos iterar sobre uma lista e retornar componentes React de acordo com ela.
```jsx
const lista = ['item1', 'item2', 'item3'];
function Componente() {
return (
{lista.map((item) => {
return
{item}
;
})}
);
}
```
Como podemos ver no código acima, realizamos um mapeamento (map) literal da nossa lista para que ele retorne um componente/tag para cada item.
Ah, vale lembrar que também podemos utilizar o `retorno explícito` para deixar o código mais conciso. Utilizamos essa forma principalmente quando precisamos apenas renderizar o componente sem nenhum tipo de processamento, cálculo, etc. Por exemplo, criar uma variável para renderizar algum tipo de dado, dependendo do conteúdo do item.
Vale ressaltar que só é permitido retornar `um` componente por vez, ou seja, caso seja necessário retornar mais de um, é preciso envolvê-los com um `fragment,` uma `div` ou alguma outra tag.
```jsx
const lista = ['item1', 'item2', 'item3'];
function Componente() {
return (
{lista.map((item) => (
{item}
)}
);
}
```
Você sabia que os exemplos acima têm um problema? Então, se rodar os exemplos e abrir o `inspetor` do seu navegador, irá se deparar com a seguinte mensagem de erro:
Percebe-se que o erro basicamente nos diz: `Cada item de uma lista precisa ter uma chave (key) única`.
# O que são Keys e por que precisamos delas
Neste ponto, a pergunta principal deve ser: "Certo, mas o que são essas tais `keys`?" Basicamente, o atributo `key` é um identificador único que pode ser uma `string ou um número`, para que o React possa encontrar nosso elemento na `DOM (Document Object Model)` e realizar as atualizações corretas (adicionar na tela, remover da tela, alterar valores, etc.).
```jsx
const lista = ['item1', 'item2', 'item3'];
function Componente() {
return (
{lista.map((item) => (
{item}
)}
);
}
```
Você sempre deve selecionar uma informação única para atribuir a uma `key`. Além disso, essas keys não podem mudar, caso contrário, elas perdem o seu propósito.
`!!Nota importante -> Evite utilizar`
- A posição (index) do elemento na lista não é uma boa escolha como key, pois dentro de um array podem ocorrer diversas alterações, como reordenação, e isso pode levar a problemas de renderização.
- O uso de Math.random() não é apropriado para gerar keys, pois ele gera números aleatórios a cada renderização, o que pode causar instabilidade no comportamento do React.
- Lembre-se de que as keys são propriedades específicas que o React utiliza para otimizar a renderização, e elas existem apenas para o propósito interno da biblioteca. Se você precisar que uma informação seja passada para o componente como propriedade para realizar alguma ação, é melhor criar uma nova propriedade e atribuir o valor a ela, em vez de usar a key para essa finalidade.
```jsx
```
# Posso utilizar Fragments ao renderizar uma lista?
Sim, podemos utilizar Fragments em uma lista, mas não da forma com a qual estamos acostumados. Os Fragments são basicamente uma forma de agrupar diversos elementos sem a necessidade de usar uma tag HTML específica. Quando renderizados, eles essencialmente desaparecem e renderizam apenas o seu conteúdo na nossa árvore de elementos. Portanto, quando usamos Fragments em listas, onde precisamos sempre declarar a key, é necessário importar o componente Fragment do React para utilizá-lo.
Normalmente, utilizamos o componente Fragment por meio da famosa abreviação
```jsx
<>
```
Mas, para listas precisa ser assim:
```jsx
import { Fragment } from 'react';
const lista = [
{
id: 1,
name: 'Fulano',
idade: 15,
},
{
id: 2,
name: 'Fulano2',
idade: 15,
},
];
function Componente() {
return (
{lista.map((item) => {
return (
// Geralmente por Id`s serem propriedades únicas, é muito utilizado
como keys.
{item.name}{item.idade}
);
})}
);
}
```
# Conclusão
Até aqui vimos como renderizar as listas no react e o motivo para algumas especificidades.
A renderização de listas é algo que você com certeza irá utilizar no dia a dia e é muito importante saber as regras.
Esperamos que este conteudo tenha te ajudado a entender melhor a respeito das listas. Também deixo aqui o [link da documentação](https://react.dev/learn/rendering-lists#challenges) do React para caso queira ver direto da fonte.
Nos vemos no próximo capitulo, seeyaa!
[Ir para a próxima seção](./7-Manipulando%20Eventos.md)
``
================================================
FILE: docs/Iniciando com React/Refs.md
================================================
# Refs
Hoje falaremos sobre refs no React! O que são elas? Quais são os seus usos? Como podemos utilizá-las no nosso dia a dia?
> Sumário:
>
> - [O que é uma ref?](#o-que-é-uma-ref)
> - [Formas de criar uma ref](#formas-de-criar-uma-ref)
> - [Como manipular a DOM com uma ref?](#como-manipular-a-dom-com-uma-ref)
> - [Como utilizar uma ref para armazenar valores](#como-utilizar-uma-ref-para-armazenar-valores)
> - [Como passar uma ref para componentes customizados?](#como-passar-uma-ref-para-componentes-customizados)
> - [Conclusão](#conclusão)
# O que é uma ref
No React, `ref` é uma referência de valor. Ela tem o poder de armazenar informações sem desencadear uma nova renderização, ao contrário dos estados. Também é usada para manipular elementos da `DOM` (o React oferece suporte total para esse tipo de documentação, portanto, é preferível usar `refs` em vez da manipulação direta por meio do document).
# Formas de criar uma ref
A nossa querida biblioteca fornece apenas duas formas de criar uma `ref`.
1. A forma mais moderna: através do hook [useRef]("./8.4-useRef.md") para componentes funcionais.
```jsx
import {useRef} from 'react'
const Componente = () => {
const ref = useRef(null)
...//Seu código abaixo
}
```
2. A forma mais antiga é `createRef`, usada para instanciar refs em componentes de classe.
```jsx
import {createRef, Component} from 'react'
class Componente extends Component {
someRef = createRef()
...//Seu código abaixo
}
```
Ambas as formas retornam para nós um objeto com a propriedade `current`. Essa propriedade irá conter o valor com o qual inicializamos nossa `ref`. Em outras palavras, se a criarmos declarando um objeto, o ref.current conterá um objeto; se a inicializarmos com um número (por exemplo, o número 5), o `ref.current` conterá o número 5.
Caso tenha interesse em saber mais sobre o `useRef`, basta clicar [aqui]("./8.4-useRef.md") para ser redirecionado para o artigo deste hook. Lembrando que para todos os tópicos a seguir, iremos utilizar o `useRef`. Então caso você tenha interesse de ver exemplos com o `createRef`, recomendo fortemente esta [página na documentação do React](https://react.dev/reference/react/createRef#createref).
# Como manipular a DOM com uma Ref
No React, conseguimos passar a propriedade `ref` em praticamente todas as tags HTML e componentes, tudo isso por meio da propriedade `ref`.
```jsx
import {useRef} = 'react'
function Componente(){
const ref = useRef()
return (
)
}
```
No exemplo acima, adicionamos a nossa `ref` ao componente input. Com isso, o nosso `ref.current` trará informações a respeito do input.
Caso tenha testado este código localmente e utilizado um `console.log` na `ref`, irá notar que no primeiro log o resultado será `undefined`. Isso acontece porque a atribuição do elemento apenas ocorrerá durante a montagem do nosso componente, e também não declaramos um valor inicial para o mesmo.
Enfim, dentro do ref.current, temos acesso a diversas informações do componente, da mesma forma que teríamos ao utilizar o document.getElementsByTagName ou algum outro método de pesquisa na DOM.
### Exemplos - Manipulando um input não controlado
Neste exemplo, teremos um input onde o usuário pode escrever o que bem entender. Não iremos controlá-lo, ou seja, não iremos criar um estado e uma função para armazenar os valores e ditar quais regras o componente deve seguir para salvá-los. Queremos apenas pegar o valor digitado quando formos finalizar o nosso formulário.
```jsx
import { useRef } from 'react';
function Formulario() {
const inputNameRef = useRef(); // Ref responsável pelo input onde será digitado o nome.
const inputPasswordRef = useRef(); // Ref responsavél pelo input onde será digitada a senha.
const onSubmit = (event) => {
event.preventDefault(); // Evitar o comportamento padrão dos formulários, ou seja evitar que a tela recarregue.
console.log({
name: inputNameRef.current.value,
password: inputPasswordRef.current.value,
});
// Quando essa função for executada, deverá printar no nosso console exatamente o que está escrito nos componentes.
};
return (
);
}
```
Resultado
# Como utilizar uma ref para armazenar valores
Bem, como já vimos anteriormente, podemos atribuir uma `ref` a um elemento HTML. Além disso, podemos atribuir valores, sejam números, textos ou até mesmo objetos! A maior vantagem é que essas alterações não geram uma re-renderização em nossa aplicação.
### Exemplo - Contador que não mostra em tela.
```jsx
import { useRef } from 'react';
function Componente() {
const counter = useRef(0);
const updateCounter = () => {
counter.current += 1;
console.log(counter.current);
};
return (
);
}
```
Basicamente, não ocorre novas renderizações em tela, apenas os logs do valor sendo atualizado.
### Exemplo - Contador que pode mostrar o valor em tela.
```jsx
import { useRef, useState } from 'react';
function Componente() {
const [value, setValue] = useState(null);
const [showValue, setShowValue] = useState(false);
const counter = useRef(0);
const updateCounter = () => {
counter.current += 1;
console.log(counter.current);
};
const toggleShowValue = () => setShowValue((prevState) => !prevState);
return (
{showValue &&
{value}
}
);
}
```
Certo, mas qual a diferença em relação ao exemplo anterior? Basicamente, como as `refs` não disparam novas renderizações, não podemos obter atualizações em tempo real na tela. Por isso, torna-se necessário utilizar estados para lidar com o mesmo.
A partir desse ponto, a imaginação é o limite! É possível fazer muitas coisas. Inclusive, na própria documentação do React (link no final do artigo), existe um exemplo de um cronômetro que utiliza o `ref.current` como um `setInterval`.
# Como passar uma ref para componentes customizados
Normalmente, quando vamos usar em nossa aplicação algum componente, como o input ou qualquer outro, criamos um componente customizado para garantir que, em todos os locais de nossa aplicação, tenhamos o mesmo design e comportamento. No caso do input, talvez em algum momento você queira usá-lo sem nenhum controle, ou seja, como um `uncontrolled component`, e para isso usaríamos as `refs` que aprendemos anteriormente. No entanto, tenho uma má notícia: não conseguiríamos usá-lo da mesma forma que antes.
```jsx
const CustomInput = ({value, label, onChange, ...rest}) => {
return {
}
}
const App = () => {
return (
)
}
```
Essa forma mencionada anteriormente não funcionará. Isso ocorre porque, por padrão no React, nossos componentes não expõem as refs para os elementos da `DOM` dentro deles (como inputs, tags, etc.).
Para resolver esse problema, nossa querida biblioteca nos disponibiliza a função, ou melhor dizendo, um `HOC (High Order Component)`, que permite passar as refs para baixo.
Para utilizá-lo, basta passar o componente desejado como `primeiro parâmetro`.
Nossos componentes sempre recebem as refs como `segundo parâmetro`, ou seja, `Component(props, ref)`.
Podemos ver no exemplo abaixo que é bem simples de usar e não tem muito segredo.
```jsx
import {forwardRef} from 'react'
const CustomInput = ({value, label, onChange, ...rest}, ref) => {
return {
}
}
export default forwardRef(CustomInput)
// ou
const CustomInput = forwardRef(({value, label, onChange, ...rest}, ref) => {
return {
}
})
```
No App, continuaria a mesma coisa.
```jsx
const App = () => {
return (
)
}
```
# Conclusão
Neste artigo, vimos um pouco sobre `refs` e como utilizá-las de diversas formas. As `refs` são uma maneira de lidar com valores sem causar re-renderizações e até mesmo de obter informações dos componentes sem precisar utilizar os métodos da `DOM`. Muitas bibliotecas, principalmente as de formulários, como o `React Hook Form`, utilizam essa estratégia de `refs` por questões de desempenho.
Caso queira se aprofundar ainda mais em tudo o que foi discutido aqui, deixo os links da documentação oficial do React.
- [Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
- [useRef](https://react.dev/reference/react/useRef#i-cant-get-a-ref-to-a-custom-component)
- [forwardRef](https://react.dev/reference/react/forwardRef)
Espero que tenha gostado e caso tenha surgido alguma duvida, sinta-se livre para entrar em contato!
Seeyaa!
[Ir para a próxima seção](./Renderizacao-condicional.md)
================================================
FILE: docs/Iniciando com React/Renderizacao-condicional.md
================================================
# Renderização Condicional
Hoje falaremos sobre renderização condicional no React! O que é? Como utlizar?
> Sumário:
>
> - [O que é a renderização condicional](#o-que-é-a-renderização-condicional)
> - [Condicionando o retorno dos nossos componentes](#condicionando-o-retorno-dos-nossos-componentes)
> - [Condicionando no JSX](#condicionando-no-jsx)
> - [Condicionando com operador ternário](#condicionando-com-operador-ternário)
> - [Condicionando com operador AND(&&)](#condicionando-com-operador-and)
> - [Aumentando a complexidade com o OR(||)](#aumentando-a-complexidade-com-o-or)
> - [Conclusão](#conclusão)
# O que é a renderização condicional
A renderização condicional é basicamente uma forma de alterar o que é mostrado em tela a partir de uma condição. Algo como utilizar um `if else` para algo, porém no JSX. Podemos ter diversas lógicas e alterar a visualização dos componentes, como por exemplo: `Um modal que só ira abrir quando o estado isOpen for true` ou `Um texto que quando o estado for true será "batata" e quando for false será "ok"`.
Bem simples, não? Agora vamos ver um pouco a respeito das formas de utilização.
# Condicionando o retorno dos nossos componentes
Como nós já sabemos, no final de todo componente sempre irá existir um `return` com o nosso HTML, certo? Então, podemos condicionar ele, adicionando alguma condição junto de um `segundo retorno`.
Segue o exemplo abaixo:
```jsx
const Componente = ({ data }) => {
if (!data) {
return (
Dados não encontrados
);
}
return (
{data.nome}
{data.idade}
);
};
```
Neste exemplo, nosso `Componente` recebe a propriedade `data` e renderiza `nome` e `idade`. Caso o componente não receba a propriedade, normalmente iria estourar um erro ou renderizaria `undefined` ou `null` em tela. Dito isto, podemos colocar uma condição antes do nosso `retorno padrão do componente`, neste caso adicionamos para caso o `componente não receba a propriedade data`, ele renderize uma div com o texto `Dados não encontrados`. Quando ele receber o valor, ele irá partir para a renderização padrão.
`Nota: Isso é o mesmo que utilizar IF ELSE. Se acontecer algo faça tal, se não, faça isso.`
# Condicionando no JSX
Graças ao JSX, assim como virmos nos estados, podemos colocar variaveis dentro do nosso HTML, até mesmo fazer listas com 'map'. Ou seja, `podemos utilizar código javascript dentro do HTML`. Com isso também podemos fazer algumas condições dentro deles, utilizando alguns operadores como o `ternário e o AND(&&)`.
# Condicionando com operador ternário
Vamos direto ao exemplo:
```jsx
import { useState, useEffect } from 'react';
const Componente = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setTimeout(() => setIsLoading(false), 3000);
}, []);
return (
{isLoading ? (
Loading...
) : (
Nome
Idade
)}
);
};
```
No exemplo acima, temos um componente com o estado de `isLoading`
que quando for `true`, deve aparecer um texto escrito `loading` em tela. E quando for `false` deve aparecer os outros componentes. E isso tudo utilizando o ternário dentro do HTML.
# Condicionando com operador AND(&&)
```jsx
import { useState, useEffect } from 'react';
const Componente = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setTimeout(() => setIsLoading(false), 3000);
}, []);
return (
Nome
Idade
{isLoading &&
Loading...
}
);
};
```
Neste exemplo, alteramos o exemplo com `ternários` para mostrar o `AND operator, mais conhecido como &&`. Nesta situação, o elemento com o texto `loading...` só irá aparece quando o `isLoading` for `true`, quando for `false` será removido da tela. Como vocês podem ver, neste caso é `se for true renderize, se não, não renderize`.
É muito bom utilizar quando temos elementos que só podem aparecer em tela sob alguma condição e não afeta os outros elementos.
# Aumentando a complexidade com o OR(||)
O operador OR(||) também conhecido como `OU` pode trazer uma complexidade maior e é muito util a depender do que você precisa na sua aplicação.
Exemplo misto com o operador ternário.
```jsx
import { useState, useEffect } from 'react';
const Componente = () => {
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsLoading(false);
setHasError(true);
}, 3000);
}, []);
return (
{isLoading || hasError ? (
Loading...
) : (
Nome
Idade
)}
);
};
```
Neste exemplo, temos um novo estado chamado `hasError` que iniciará como `false` e ao terminar os três segundos do `setTimeout` irá ter seu valor alterado para `true`. Podemos ver uma leve diferença na condição do ternário, agora caso `isLoading ou hasError forem true` irá renderizar o texto "Loading...". Neste caso, se qualquer um dos dois estados for true, não irá renderizar as informações.
Exemplo com AND(&&):
```jsx
import { useState, useEffect } from 'react';
const Componente = () => {
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsLoading(false);
setHasError(true);
}, 3000);
}, []);
return (
Nome
Idade
{(isLoading || hasError) &&
Loading...
}
);
};
```
Neste exemplo, basicamente `se isLoading ou hasError for true, renderiza o
Loading...
`
# Conclusão
Neste tópico você aprendeu sobre `Renderização condicional` no React, tenha certeza que irá utiliza-la com frequencia em seu dia a dia.
Caso queira saber mais, segue o link da documentação do [React](https://react.dev/learn/conditional-rendering#conditionally-assigning-jsx-to-a-variable)
Espero que tenham gostado do conteúdo, aso surja alguma duvida, sinta-se livre para entrar em contato! Então é isso, até a proxima! Seeyaaaa.
[Ir para a próxima seção](./8-React%20Hooks.md)
```
================================================
FILE: docs/Performance/Lazy Loading em React e Nextjs.md
================================================
# Introdução
> Caso prefira, também escrevi esse artigo no meu [Blog](https://gabrielduete.com/pt-br/blog/art-of-lazy-loading) e no [DEV](https://dev.to/gabrielduete/the-art-of-lazy-loading-how-to-improve-your-frontend-app-performance-nextjsreact-4h5l).
Lazy Loading é uma estratégia de otimização de desempenho. Com essa estratégia,
garantimos que alguns recursos sejam carregados **somente quando realmente
necessários**, ou seja, quando estão prestes a entrar na **área visível da
página (viewport)**.
## Visão geral
Por padrão, podemos usar Lazy Loading em JavaScript, CSS, fontes, imagens e
iframes.
Podemos definir o atributo `loading` em elementos `img` ou `iframe`, assim:
Com isso, conseguimos instruir o navegador a **adiar o carregamento** desse
elemento até que ele esteja prestes a ser exibido na tela.
# Lazy Loading no Next.js
No Next.js, as coisas funcionam de forma um pouco diferente. Temos **duas
estratégias nativas principais** para criar componentes com lazy loading, e vou
adicionar mais uma que pode facilitar ainda mais nossa vida:
- [Dynamic Imports (Next.js)](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic)
- [React Lazy (React)](https://react.dev/reference/react/lazy)
- [react-lazyload (biblioteca externa)](https://www.npmjs.com/package/react-lazyload)
# 1. Dynamic Imports
Com os **Dynamic Imports** do Next.js, podemos importar componentes
dinamicamente, algo muito útil para componentes que **não são necessários no
carregamento inicial da página**.
Um bom exemplo de uso é com componentes de feedback, como modais ou alertas, que
só são exibidos após alguma ação do usuário. Então, por que carregá-los logo no
início?
Podemos importar apenas quando for realmente necessário!
Veja um exemplo onde temos um botão e um componente `Snackbar` do Material UI.
Após o clique, o Snackbar deve ser exibido com um aviso:
Resultado:
Podemos ver que o `Snackbar` e o `Alert` são carregados inicialmente, mas só são
utilizados **se** o usuário clicar no botão. E se ele **não** clicar? O
carregamento desses dois componentes se torna inútil.
Vamos olhar para o tamanho do Build, especialmente o "First Load JS":
Agora, o mesmo exemplo usando **Dynamic Imports** para `Snackbar` e `Alert`:
Resultado idêntico:
Build:
Podemos ver que o tamanho do **First Load JS** caiu significativamente!
- De `43 KB` para `35.6 KB`
- E de `148 KB` para `141 KB`
Você pode pensar: “Mas foi pouco!”. Estamos falando de **apenas uma página**,
com uma funcionalidade simples. Agora imagine isso em **todo o seu site**?
### Vamos calcular o ganho total para 10 páginas:
1. **Antes da otimização:**
- Tamanho por página: **43 KB**
- Total: **43 KB × 10 = 430 KB**
2. **Depois da otimização:**
- Tamanho por página: **35.6 KB**
- Total: **35.6 KB × 10 = 356 KB**
### **Economia total**
- Redução: **430 KB - 356 KB = 74 KB**
- Porcentagem: **(74 ÷ 430) × 100 ≈ 17,2%**
Isso mostra que, em um site com muitas páginas, pequenas otimizações podem gerar
uma **grande diferença** no consumo de recursos e no tempo de carregamento.
# 2. React Lazy
Também podemos usar o `React.lazy`, que é uma funcionalidade nativa do React
para importar componentes dinamicamente — bem parecido com os dynamic imports do
Next.js.
A diferença é que aqui, **precisamos usar o `Suspense`** para envolver o
componente, e passar um componente no `fallback`, que será exibido **enquanto o
componente está sendo carregado**.
Esse carregamento ocorre **apenas na primeira vez** que o componente é usado. Se
o usuário recarregar a página, será carregado novamente — mas se ele continuar
navegando, não haverá novo carregamento.
Exemplo:
Resultado:
Note que no primeiro clique no botão, apareceu "loading...", que é o componente
definido no fallback.
Build:
Houve uma **redução ainda maior** do que com os Dynamic Imports do Next.js.
Porém, há um **componente de loading adicional**, o que pode impactar na
experiência do usuário (UX).
Por isso, **essa abordagem deve ser alinhada com o time de design e produto** —
pois exibir um loading pode não ser uma boa ideia em alguns casos. É
recomendável usar apenas quando o componente for **realmente pesado** ou a
página estiver **muito lenta**.
# 3. React-Lazyload
O `react-lazyload` funciona de forma um pouco diferente. Ele **não afeta
diretamente o carregamento inicial** da página, mas sim monitora **a posição dos
elementos** em relação ao viewport.
Quando um elemento estiver **próximo da tela**, ele será renderizado.
Ou seja, podemos usá-lo para renderizar **componentes pesados à medida que o
usuário rola a página**.
Exemplo:
Esse código gera 15 imagens. Imagine como seria pesado carregar todas de uma vez
só? Com o Lazyload, as imagens são carregadas **aos poucos**, conforme o usuário
rola a página.
Resultado:
Na aba “Network” do navegador, vemos que as imagens são carregadas **à medida
que são exibidas** na tela.
Isso traz um **grande ganho de performance**, garantindo que a internet do
usuário não fique sobrecarregada.
# Conclusão
Vimos práticas valiosas para melhorar a performance da sua aplicação usando Lazy
Loading com Next.js e React. Aprendemos que é possível **carregar componentes,
imagens e iframes apenas quando necessário**, reduzindo consumo de recursos e
acelerando o carregamento das páginas.
Espero que as explicações tenham sido claras. Qualquer dúvida, é só me chamar
para conversar.
**Fique com Deus e bons estudos!**
[Caso queira, explore também a seção de Design Patterns.](../Design%20Patterns/1-Compound%20Components.md)
## **Pré-requisitos**
---
- Conhecimentos em construção de páginas utilizando HTML, CSS e JavaScript
- Instalação do [NodeJS](https://nodejs.org/pt-br/download/) e um gerenciador de pacotes à sua preferência ([npm](https://www.npmjs.com/), [yarn](https://classic.yarnpkg.com/pt-BR/docs/install) ou [pnpm](https://pnpm.io/))
## **Conteúdos**
### Iniciando com React
- [Introdução](./Iniciando%20com%20React/1-Introducao.md)
- [O que é React?](./Iniciando%20com%20React/2-O%20que%20e%20React.md)
- [Iniciando um projeto React](./Iniciando%20com%20React/2.1-iniciando%20um%20projeto%20react.md)
- [JSX e Babel](./Iniciando%20com%20React/3-JSX%20e%20Babel.md)
- [Componentização](./Iniciando%20com%20React/4-Componentizacao.md)
- [Formas de declarar](./Iniciando%20com%20React/4.1-FormasDeDeclarar.md)
- [Propriedades](./Iniciando%20com%20React/4.2-Propriedades.md)
- [Estados](./Iniciando%20com%20React/5-Estados.md)
- [Ciclo de Vida](./Iniciando%20com%20React/6-Ciclo-de-vida.md)
- [Listas](./Iniciando%20com%20React/Listas-no-react.md)
- [Manipulando Eventos](./Iniciando%20com%20React/7-Manipulando%20Eventos.md)
- [Refs](./Iniciando%20com%20React/Refs.md)
- [Renderização Condicional](./Iniciando%20com%20React/Renderizacao-condicional.md)
- [React Hooks](<./Iniciando%20com%20React/()-React%20Hooks.md>)
- [useState](<./Iniciando%20com%20React/().1-useState.md>)
- [useEffect](<./Iniciando%20com%20React/().2-useEffect.md>)
- [useContext](<./Iniciando%20com%20React/().3-useContext.md>)
- [useRef](<./Iniciando%20com%20React/().4-useRef.md>)
- [useReducer](<./Iniciando%20com%20React/().5-useReducer.md>)
- [useMemo](<./Iniciando%20com%20React/().6-useMemo.md>)
- [useCallback](<./Iniciando%20com%20React/().7-useCallback.md>)
- [Controlled vs Uncontrolled components](./Iniciando%20com%20React/Controlled-vs-uncontrolled-components.md)
### Ferramentas de build
- [NPM e Yarn](./Ferramentas%20de%20build/1-npm-yarn.md)
- [Dependências](./Ferramentas%20de%20build/1.1-O-que-são-dependências.md)
- [Webpack](./Ferramentas%20de%20build/2-Webpack.md)
- [ViteJS](./Ferramentas%20de%20build/3-Vite.md)
### Estilização
- [CSS in JS](./Estilizacao/CSS-in-JS.md)
- [styled-components](./Estilizacao/3.1-styled-components.md)
- [Stitches]()
### Controle de estado
- [API de Contexto](./Controle%20de%20estado/1-API-de-Contexto.md)
- [Redux](./Controle%20de%20estado/2-Redux.md)
- [Zustand]()
### Verificadores de tipos
- [Typescript](./Verificadores%20de%20Tipo/Typescript.md)
### Roteamento
- React Router
- [Introdução](./Roteamento/React-Router/1-Introducao.md)
- [Rotas Customizadas](./Roteamento/React-Router/2-Rotas-customizadas.md)
- TanStack Router
- [Introdução](./Roteamento/TanStack-Router/1-Introducao.md)
- [Type-Safety](./Roteamento/TanStack-Router/1.1-Type-Safety.md)
- [Rotas Customizadas](./Roteamento/TanStack-Router/2-Rotas-customizadas.md)
- [Layouts](./Roteamento/TanStack-Router/3-Layouts.md)
- [Caching](./Roteamento/TanStack-Router/4-Caching.md)
- [DevTools](./Roteamento/TanStack-Router/5-DevTools.md)
### Cliente REST
- [fetch](./Cliente%20REST/1-Fetch.md)
- [axios](./Cliente%20REST/2-Axios.md)
### Cliente GraphQL
- [Conceito](./Cliente%20GraphQL/1-Conceito.md)
- [Desmistificando o retorno 200](./Cliente%20GraphQL/1.1-Desmistificando-200.md)
- [Apollo]()
- [Relay]()
### Bibliotecas de utilidade
- [Lodash]()
### Testes
- [Testes de Unidade](./Testes/1-testes-unitarios.md)
- [Testes de Integração](./Testes/2-testes-de-integracao.md)
- [Testes E2E]()
### Renderização no lado do servidor e geração de sites estáticos
- [Next.js](./Renderizacao%20no%20Servidor/1-Nextjs.md)
- [Gatsby]()
- [Remix]()
### Design patterns
- [Compound Components](./Design%20Patterns/1-Compound%20Components.md)
- [React HOC Structure]()
Made with 💜
================================================
FILE: docs/Renderizacao no Servidor/1-Nextjs.md
================================================
# O que é
Usando do Next.js podemos renderizar (de modo simplificado, o processo de transformar os componentes React escritos em JSX para HTML) o conteúdo da página de diferentes formas, no lado do cliente, padrão do React, chamado de _Client-Side Rendering_ (CSR), e no lado do servidor com múltiplas abordagens que serão tratadas abaixo. Por padrão o Next.js irá renderizar o máximo das páginas do projeto no lado do servidor.
# Por que devemos preferir renderizar no servidor?
As vantagens da renderização no servidor se dão de duas formas, (1) performance e (2) SEO. A performance se beneficia porque podemos "guardar" o HTML da página já pronto em servidores espalhados pelo mundo (CDN), isso também pode ocorrer com arquivos JavaScript porém além de serem maiores suas contrapartes em HTML, eles teriam de ser pegos pelo navegador do usuário e transformados em HTML, assim ganhamos velocidade no carregamento da página, lembrando que **quanto menos JavaScript for enviado para o cliente melhor**. Já para o SEO (Search Engine Optimization) a melhora vem do fato dos mecanismos de busca terem dificuldade em categorizar corretamente páginas que o conteúdo é gerado dinamicamente via JavaScript, então ao enviarmos HTML "preenchido" para o cliente facilitamos a indexação do nosso site em serviços como Google. Outra vantagem é por exemplo no caso do usuário ter uma conexão ruim, assim carregar pelo servidor é mais rápido que no cliente.
# No lado do servidor (Server-Side Rendering - SSR)
Podemos carregar dados dinamicamente, a cada request, com a função `getServerSideProps`, que deve ser exportada de uma página, dentro de um arquivo na pasta `pages`, o retorno da função é usado na população das props da página. Por exemplo, em uma rede social podemos carregar os 10 primeiros posts do feed de um usuário no lado do servidor e deixar apenas as postagens subsequentes para o navegador buscar. O SSR é, na maior parte dos casos, preferível comparado ao CSR mas ainda apresenta problemas, visto que caso alguma chamada realizada na função `getServerSideProps` leve muito tempo, o navegador irá ficar "pendurado" no request, aguardando sua resposta para mostrar o conteúdo da página
```ts
// /pages/feed/index.tsx
export default function Posts ({posts}) {
...
// Logica da página
}
// Essa função será executada a cada request pela página /feed
export const getServerSideProps: GetServerSideProps = async (context) => {
const firstPosts = await fetchPosts()
return {
props: {
posts: firstPosts
},
};
```
# Geração estática (Static Site Generation - SSG)
Caso os dados apresentados na página não mudem, podemos carregá-los apenas uma vez, no build do projeto, e deixar o HTML completamente pronto, para isso usamos a função `getStaticProps`. Essa funcionalidade pode ser útil quando construindo, por exemplo, um blog, já que os dados não serão mudados constantemente. Essa abordagem é a mais performática, sempre que possível tente usá-la.
```ts
// /pages/articles/index.tsx
export default function ArticlesList ({ articles }) {
...
// Logica da página
}
// Essa função será executada apenas uma vez, no build do projeto
export const getStaticProps: GetStaticProps = async (context) => {
const articles = await getArticles()
return {
props: {
// Como a propriedade e a variável tem o mesmo nome, não precisamos
// explicitar qual propriedade deve ser assimilada, equivalente a
// fazermos `articles: articles`
articles
},
}
```
# Geração estática incremental (Incremental Static Regeneration - ISR)
Caso sua página possa ser gerada em _build time_ porém o conteúdo se altera com alguma frequência podemos usar da abordagem de site estático porém que se "recarrega" em um certo intervalo de tempo, para isso passamos a propriedade `revalidate` no retorno da função `getStaticProps`, com o intervalo em segundos que a página será buildada novamente. Isso pode ser útil no caso de um e-commerce em que a página inicial tem uma sessão de itens "quentes" que mostram os itens mais vendidos nas últimas 24 horas, uma informação assim, pode facilmente ser atualizada a cada 10 minutos. Para maioria dos casos o ISR apresenta o melhor dos dois mundos, conteúdo gerado dinamicamente e alta performance, se possível seu uso é recomendado junto ao SSG.
```ts
// /pages/index.tsx
export default function Home ({ hotItems }) {
...
// Logica da página
}
// Essa função será executada no build do projeto e também a cada 10 minutos
export const getStaticProps: GetStaticProps = async (context) => {
const trendingItems = await getTrending()
return {
props: {
hotItems: trendingItems
},
revalidate: 600 // 10 (minutos) * 60 (segundos)
}
```
================================================
FILE: docs/Roteamento/README.md
================================================
# Roteamento
O roteamento é entrega de dados com base em algo, no nosso caso a nossa url. Quando você visita o **youtube.com** você está acessando a rota padrão do youtube, mas quando acessamos por exemplo **youtube.com/feed/explore** estamos acessando a rota "*feed/explore*", o explorar do youtube. Quando construimos um site podemos ter uma página home (representada normalmente pelo "/") que por padrão seria o nosso endereço, exemplo o **www.meusite.com** mas podemos ter também a rota "*/posts* "que teriam todos os posts do nosso site.
## Roteamento com react
O react em si não possui um gerenciamento próprio de rotas, mas podemos utilizar bibliotecas como o React Router ou ferramentas como Next.js ou Gatsby que veremos em breve para criarmos a nossas rotas. Nesse módulo é apresentado a utilização das bibliotecas React Router e TanStack Router.
1. React Router
1. [Introdução](./React-Router/1-Introducao.md)
2. [Rotas Customizadas](./React-Router/2-Rotas-customizadas.md)
2. TanStack Router
1. [Introdução](./TanStack-Router/1-Introducao.md)
1. [Type-Safety](./TanStack-Router/1.1-Type-Safety.md)
2. [Rotas Customizadas](./TanStack-Router/2-Rotas-customizadas.md)
3. [Layouts](./TanStack-Router/3-Layouts.md)
4. [Caching](./TanStack-Router/4-Caching.md)
5. [DevTools](./TanStack-Router/5-DevTools.md)
# React Router - Introdução
> 🔥 **Tá com pressa?** Se liga no sumário:
> 1. [O que é](#o-que-é-o-react-router)
> 2. [Vantagens](#algumas-vantagens-da-utilização-do-react-router)
> 3. [Instalação](#como-instalar-o-react-router)
> 4. [Mão no código](#iniciando-com-o-react-router)
> 4.1 [Estrutura das páginas](#construindo-a-estrutura-das-páginas)
> 4.2 [Estruturando as rotas](#estruturando-rotas-com-o-react-router)
> 4.3 [Utilizando na aplicação](#utilizando-o-react-router-na-aplicação)
## O que é o React Router?
Atualmente mantido pelo mesmo grupo de criadores do famoso framework web [Remix](https://remix.run/), o **React Router** é uma biblioteca para criação de rotas em aplicações React. Ele permite que você defina rotas para diferentes URLs em seu aplicativo e gerencie como os componentes são exibidos de acordo com essas rotas. Isso é essencial em diferentes tipos de aplicações devido à capacidade de criar e gerenciar as rotas da aplicação de maneira marcante e simples.
Ele foi um dos principais pioneiros do ramo de roteamento de aplicativos de página única (SPAs) e é amplamente utilizado na comunidade do React devido a sua facilidade de uso e flexibilidade. Ele permite que você defina rotas aninhadas, gerencie parâmetros de URL e proteja rotas com autenticação e autorização. Além disso também fornece recursos como navegação programática, gerenciamento de histórico e geração de rotas dinâmicas.
Ele também possui uma grande compatibilidade com bibliotecas e ferramentas externas, como [Redux](../../Controle%20de%20estado/2-Redux.md), para ajudar a gerenciar o estado global do aplicativo. Em resumo, o React Router é uma ferramenta poderosa para gerenciar a navegação em aplicativos React.
## Algumas vantagens da utilização do React Router
- [x] Possui uma impecável [documentação](https://reactrouter.com/)
- [x] É vastamente utilizado, entretanto obter ajuda/informações é muito fácil
- [x] Possui inúmeros hooks para carregamento e gerenciamento de dados internos e externos, navegação entre páginas, obtenção de parâmetros, dentre outros
## Como instalar o React Router
Para instalar o **React Router** em sua aplicação, basta utilizar algum dos comandos abaixo de acordo com o seu gerenciador de pacotes:
```BASH
# Utilizando npm
npm install react-router-dom
# Utilizando Yarn
yarn add react-router-dom
# Utilizando pnpm
pnpm add react-router-dom
```
## Iniciando com o React Router
Partindo para prática, no exemplo a seguir será criado uma aplicação com duas rotas, uma "Página inicial" e a página de "Sobre nós". Lembrando que a estrutura de pastas e arquivos foram apenas para uma simples exemplificação, podendo ser alterada de acordo com a necessidade/desejo do desenvolvedor.
## Construindo a estrutura das páginas
Abaixo foi criado uma estrutura de exemplo para essas páginas, onde cada uma possui um header com links para as outras páginas, e um conteúdo específico para cada uma delas.
```TSX
import React from 'react';
// importação do componente de âncora do React Router
import { Link } from 'react-router-dom';
// ARQUIVO: pages/Home.tsx
export function Home() {
return (
O projeto 4Noobs nasceu com o objetivo de ser um espaço onde as pessoas pudessem encontrar conteúdo de fácil entendimento em um primeiro encontro com determinado tema, promovendo uma melhor capacitação profissional. A intenção desse Open Source é que as pessoas de diferentes níveis de entendimento pudessem contribuir.
);
}
```
## Estruturando rotas com o React Router
Agora que já temos as páginas criadas, vamos criar as rotas para elas utilizando o **React Router**.
```TSX
// ARQUIVO: router.ts
// Importando funções do React Router
import { createBrowserRouter, RouteObject } from 'react-router-dom';
// Importando as páginas da aplicação
import { Home } from './pages/Home';
import { About } from './pages/About';
// Criando a rota para a página inicial
const homeRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript
path: '/' // Caminho da rota
element: // Componente que será renderizado
}
// Criando a rota para a página sobre nós
const aboutRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript
path: '/about', // Caminho da rota
element: About, // Componente que será renderizado
};
// Adicionando as rotas ao gerenciador
const routes: RouteObject[] = [homeRoute, aboutRoute]; // Note que aqui o objeto está sendo tipado, apenas utilize caso seu projeto possui TypeScript
// Criando o gerenciador de rotas com o adapter para navegadores
const router = createBrowserRouter([routes]);
export default router;
```
### Qual a função do `createBrowserRouter`?
O `createBrowserRouter` é uma função responsável por armazenar as rotas da aplicação web. Além de utilizar do DOM History API para fazer a alteração da rota e cuidar de toda o histórico de navegação da página. Dentro dela é possível ter um Array (Lista) de objetos, onde cada um deles é uma rota da aplicação, seguindo a seguinte estrutura:
- **path**: Responsável por identificar o caminho da rota, como por exemplo `'/signin'` e `'/signup'`.
- **element**: Responsável por renderizar o componente que será exibido na rota.
## Utilizando o React Router na aplicação
A partir do momento que já temos as rotas criadas com o **React Router**, basta utilizá-las na aplicação aplicando o Provider do próprio **React Router**, como mostra o exemplo a seguir:
```TSX
// ARQUIVO: main.tsx *ou inicializador da aplicação e semelhantes*
import React from 'react';
import ReactDOM from 'react-dom/client';
// Importando o provider das rotas
import { RouterProvider } from 'react-router-dom';
// Importando as rotas
import router from './router';
ReactDOM.createRoot(document.getElementById('root')).render(
);
```
E pronto! A partir de agora já é possível navegar entre as páginas da aplicação utilizando o **React Router**.
[Ir para Próxima Seção](./2-Rotas-customizadas.md)
# React Router - Rotas Customizadas
> 🔥 **Tá com pressa?** Se liga no sumário:
> 1. [Children Routes](#criando-children-routes-subrotas)
> 2. [Rotas com parâmetros](#criando-rotas-com-parâmetros)
> 3. [Consumindo parâmetros](#consumindo-parâmetros-de-uma-rota)
> 4. [Navegando entre rotas](#navegando-entre-rotas)
> 4.1 [Hook useNavigate](#utilizando-o-hook-usenavigate)
> 4.2 [Componente Link](#utilizando-o-componente-link)
> 5. [Navegando para rotas anteriores](#navegando-para-uma-rota-anterior)
## Criando Children Routes (subrotas)
Children routes são rotas que são aninhadas dentro de outra rota. Elas são usadas para criar hierarquias de rotas, ou seja, criar uma estrutura de rotas para a sua aplicação.
Por exemplo, imagine que você tem uma aplicação com uma página "Perfil Logado" e essa página possui as seguintes opções de navegação: "Editar perfil" e "Alterar senha". Em vez de ter duas rotas diferentes para cada opção, você pode criar uma rota "Perfil" e aninhar as três opções de navegação dentro dela como children routes.
Dessa forma, a rota "Perfil" seria o parent route e as outras três seriam as children routes, e ao acessar a rota "perfil", a aplicação saberia que as opções de navegação estão contidas nela, e renderizaria os componentes da rota filho correspondente.
Em resumo Children routes são uma forma de organizar suas rotas de maneira hierarquica, ou seja, criando um parent route para seus componentes filho. Para criar uma children route no **React Router** é necessário inserí-las no createBrowserRouter também, assim como qualquer outra rota, como no exemplo abaixo:
```TSX
// ARQUIVO: routes.ts
// Importando funções do React Router
import { createBrowserRouter, RouteObject } from 'react-router-dom';
// ... Importação das páginas
// Criando a Parent Route
const profileRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript
path: '/' // Caminho da rota
element: // Componente que será renderizado
}
// Criando as Children Routes
const editProfileRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript
path: '/profile/edit', // Caminho da rota !! Note que é necessário inserir o path da parent route no início
element: , // Componente que será renderizado
};
const changePasswordRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript
path: '/profile/change-password', // Caminho da rota !! Note que é necessário inserir o path da parent route no início
element: , // Componente que será renderizado
};
// Adicionando as rotas ao gerenciador
const routes = [profileRoute, editProfileRoute, changePasswordRoute];
// Criando o gerenciador de rotas com o adapter para navegadores
const router = createBrowserRouter([routes]);
export default router;
```
## Criando rotas com parâmetros
As rotas com parâmetros são aquelas que permitem passar dados dinâmicos através de sua URL. Isso é muito útil quando se deseja passar informações específicas, tal como o ID do usuário afim de exibir seu perfil e suas informações relacionadas.
Imagine que você é o desenvolvedor da funcionalidade de perfil público no website da He4rt e deseja exibir a página de perfil de um usuário específico quando o usuário clicar em um nome de usuário na lista de usuários. Em vez de criar uma rota para cada usuário manualmente, você pode criar uma rota única para a página de perfil e passar o ID do usuário como um parâmetro na URL.
A sintaxe para criar uma rota com parâmetros é similar a criar uma rota normal, porém o nome do parâmetro é incluído dois pontos `:` em seu início. Por exemplo:
```TSX
// Criando a rota com parâmetro
const viewProfileRoute: RouteObject = {
path: '/profile/:id',
element: ,
};
```
## Consumindo parâmetros de uma rota
Para consumir os parâmetros de uma rota, você pode utilizar a função `useParams` do **React Router**. Essa função retorna um objeto que inclui parâmetros da rota, e você pode desestruturar esse objeto para obter os parâmetros que deseja. Veja o exemplo abaixo:
```TSX
// ARQUIVO: ViewProfile.tsx
// Importando a função useParams do React Router
import { useParams } from 'react-router-dom';
export function ViewProfile() {
// Obtendo os parâmetros da rota
const { id } = useParams();
return (
// Renderizando o ID do perfil
O ID do Perfil Informado é: {id}
)
}
```
Ao acessar a rota `/profile/1234`, o resultado esperado é que o ID do perfil seja exibido na tela como "O ID do Perfil Informado é: 1234".
## Navegando entre rotas
Para navegar entre rotas, há duas formas de fazer isso: utilizando o hook `useNavigate` ou utilizando o componente `Link`.
### Utilizando o hook `useNavigate`
O hook `useNavigate` retorna uma função que permite navegar para uma rota específica. Para utilizá-lo, basta importar a função `useNavigate` do **React Router** e chamar a função retornada por ela. Veja o exemplo abaixo:
```TSX
// Importando a função useNavigate do React Router
import { useNavigate } from 'react-router-dom';
export function ExampleRoute() {
// Obtendo a função de navegação
const navigate = useNavigate();
function handleNavigateToOtherUser(id: string) {
return navigate({
pathname: `/profile/${id}`,
})
}
return (
// Renderizando o botão de navegação
)
}
```
### Utilizando o componente `Link`
O componente `Link` é um componente que permite navegar para uma rota específica. Para utilizá-lo, basta importar o componente `Link` do **React Router** e passar o caminho da rota para qual você deseja navegar. Veja o exemplo abaixo:
```TSX
// Importando o componente Link do React Router
import { Link } from 'react-router-dom';
export function ExampleRoute() {
return (
// Renderizando o botão de navegação
Navegar para usuário 1234
)
}
```
## Navegando para uma rota anterior
Para navegar para a rota anterior, basta utilizar os conteitos de navegação anteriormente, porém inserindo como pathname um `-1` para voltar exatamente para a página anterior. Veja o exemplo abaixo:
```TSX
// Importando a função useNavigate do React Router
import { useNavigate } from 'react-router-dom';
export function ExampleRoute() {
// Obtendo a função de navegação
const navigate = useNavigate();
function handleNavigateToPreviousRoute(id: string) {
return navigate({
pathname: -1, // Número de quantas páginas você deseja voltar
})
}
return (
// Renderizando o botão de navegação
)
}
```
E pronto! A partir de agora já é possível criar rotas dinâmicas e navegar na aplicação utilizando o **React Router**.
[Ir para Próxima Seção]()
# TanStack Router
> 🔥 **Tá com pressa?** Se liga no sumário:
> 1. [O que é](#o-que-é-o-tanstack-router)
> 1.1. [TypeSafety](./1.1-Type-Safety.md)
> 2. [Vantagens](#algumas-vantagens-da-utilização-do-tanstack-router)
> 3. [Instalação](#como-instalar-o-tanstack-router)
> 4. [Mão no código](#iniciando-com-o-tanstack-router)
> 4.1 [Estrutura das páginas](#construindo-a-estrutura-das-páginas)
> 4.2 [Estruturando as rotas](#estruturando-rotas-com-o-tanstack-router)
> 4.3 [Utilizando na aplicação](#utilizando-o-tanstack-router-na-aplicação)
## O que é o TanStack Router?
Criada pelos mesmos criadores do famoso [TanStack Query](https://tanstack.com/query/latest) (antigamente chamado de `React Query`), o **TanStack Router** é um novo framework agnóstico de bibliotecas para criação de rotas de forma simples e escalável em aplicações de diversos níveis com foco em revolucionar a maneira de como são gerenciadas as rotas nessas aplicações.
Uma das principais vantagens ao se utilizar essa biblioteca é o fato de possuir um poderoso gerenciamento de cache embutido em seu núcleo, assim como o [TanStack Query](https://tanstack.com/query/latest), melhorando muito mais a experiência do usuário ao navegar em sua aplicação, que por sua vez se torna mais fluida.
Além disso, ela também é baseada em grandes ferramentas já conhecidas, tais como [React Router](https://reactrouter.com/), [Next.js](https://nextjs.org/) e [Remix](https://remix.run/), porém com uma base de código 100% reformulada visando performance, segurança e utilização de boas práticas do [TypeScript](https://www.typescriptlang.org/) e seu [Type-Safety](./1.1-Type-Safety.md), melhorando assim também a experiência do desenvolvedor, principalmente em aplicações grandes com diversas pessoas trabalhando ao mesmo tempo.
Vale ressaltar que no momento no qual este conteúdo foi produzido (jan/2023), o framework ainda está em fase beta, entretanto novas atualizações ainda serão implementadas até a versão final, que deve ser lançada em breve.
## Algumas vantagens da utilização do TanStack Router
- [x] Suporte completo ao TypeScript seguindo boas práticas com Type-Safe
- [x] Cacheamento automático (ou manual caso preferir)
- [x] Agnóstico de Frameworks (Por enquanto disponível apenas para React, mas sinta-se a vontade para [contribuir com novas implementações para o projeto](https://github.com/tanstack/router))
- [x] Pré-carregamento automática de rotas
- [x] DevTools própria para depuração
- [x] Elementos de rotas assíncronos
- [x] Validação, formatação, serialização e processamento de dados com a Search Param API
## Como instalar o TanStack Router
Para instalar o **TanStack Router** em sua aplicação, basta utilizar algum dos comandos abaixo de acordo com o seu gerenciador de pacotes:
```BASH
# Utilizando npm
npm install @tanstack/react-router@beta --save
# Utilizando Yarn
yarn add @tanstack/react-router@beta
# Utilizando pnpm
pnpm add @tanstack/react-router@beta
```
## Iniciando com o TanStack Router
Partindo para prática, no exemplo a seguir será criado uma aplicação com duas rotas, uma "Página inicial" e a página de "Sobre nós". Lembrando que a estrutura de pastas e arquivos foram apenas para uma simples exemplificação, podendo ser alterada de acordo com a necessidade/desejo do desenvolvedor.
## Construindo a estrutura das páginas
Abaixo foi criado uma estrutura de exemplo para essas páginas, onde cada uma possui um header com links para as outras páginas, e um conteúdo específico para cada uma delas.
```TSX
import React from 'react';
// importação do componente de âncora do TanStack Router
import { Link } from '@tanstack/react-router';
// ARQUIVO: pages/Home.tsx
export function Home() {
return (
O projeto 4Noobs nasceu com o objetivo de ser um espaço onde as pessoas pudessem encontrar conteúdo de fácil entendimento em um primeiro encontro com determinado tema, promovendo uma melhor capacitação profissional. A intenção desse Open Source é que as pessoas de diferentes níveis de entendimento pudessem contribuir.
);
}
```
## Estruturando rotas com o TanStack Router
Agora que já temos as páginas criadas, vamos criar as rotas para elas utilizando o **TanStack Router**.
```TSX
// ARQUIVO: router.ts
// Importando funções do TanStack Router
import { ReactRouter, createRouteConfig } from '@tanstack/react-router';
// Importando as páginas da aplicação
import { Home } from './pages/Home';
import { About } from './pages/About';
// Criando o gerenciador de rota
const rootRoute = createRouteConfig();
// Criando a rota para a página inicial
const homeRoute = rootRoute.createRoute({
path: '/', // Caminho da rota
component: Home, // Componente que será renderizado
});
// Criando a rota para a página sobre nós
const aboutRoute = rootRoute.createRoute({
path: '/about', // Caminho da rota
component: About, // Componente que será renderizado
});
// Adicionando as rotas ao gerenciador
const routes = [homeRoute, aboutRoute];
const routeConfig = rootRoute.addChildren(routes);
// Criando o gerenciador de rotas com o adapter para react
const router = new ReactRouter({
routeConfig,
defaultPreload: 'intent'
});
export default router;
```
### ⭐ Habilitando o [Type-Safety](./1.1-Type-Safety.md) em aplicações com o Typescript
```TSX
declare module '@tanstack/react-router' {
interface RegisterRouter {
router: typeof router
}
}
```
## Utilizando o TanStack Router na aplicação
A partir do momento que já temos as rotas criadas com o **TanStack Router**, basta utilizá-las na aplicação aplicando o Provider do próprio **TanStack Router**, como mostra o exemplo a seguir:
```TSX
// ARQUIVO: App.ts *ou inicializador da aplicação e semelhantes*
import React from 'react';
// Importando o provider das rotas
import { RouterProvider } from '@tanstack/react-router';
// Importando as rotas
import router from './router';
function App() {
// Utilizando as rotas na aplicação
return ;
}
export default App;
```
E pronto! A partir de agora já é possível navegar entre as páginas da aplicação utilizando o **TanStack Router**.
[Ir para Próxima Seção](./2-Rotas-customizadas.md)
## Type-Safety
Type-safety em TypeScript significa que o código é verificado em tempo de compilação para garantir que os tipos de dados sejam usados de maneira consistente e correta. Isso ajuda a evitar erros comuns, como tentar usar uma função com argumentos incorretos ou atribuir uma variável a um tipo de dado incorreto. TypeScript fornece uma série de tipos de dados básicos, como números, strings e booleanos, além de suporte para tipos personalizados, como classes e interfaces. Ao usar esses tipos, você pode garantir que seu código seja mais confiável e fácil de manter. Um exemplo muito claro dos problemas que gerenciadores de rota sem type-safety podem causar é o seguinte:
```TSX
// Exemplo de rota
```
Note que os parametros dessa query são extensos e podem ser facilmente confundidos, enviados no formato incorreto ou até mesmo esquecidos, gerando problemas na aplicação.
```TSX
// ^ O parametro "sortBy" foi enviado incorretamente e esqueceram do "filterBy"
```
Além disso, a qualquer momento o desenvolvedor pode alterar o caminho/nome da rota e esquecer de alterar em algum outro lugar da aplicação, gerando ainda mais problemas.
```TSX
// ... Rota original alterada para `clients-by`
// ^ No lugar de "/clients" deveria ser "/clients-by", porém o desenvolvedor se esqueceu disso :(
```
Para resolver esses problemas, o **TanStack Router** utiliza o sistema de Type-Safety para que o desenvolvedor possa definir os parametros da rota e o tipo de dado que cada um deve receber, além de poder definir o caminho/nome da rota de forma na qual a própria IDE já acusa erros em desenvolvimento. Isso será explanado melhor no tópico de [**Rotas customizadas**](./2-Rotas-Customizadas.md).
# TanStack Router - Rotas Customizadas
> 🔥 **Tá com pressa?** Se liga no sumário:
> 1. [Children Routes](#criando-children-routes-subrotas)
> 2. [Rotas com parâmetros](#criando-rotas-com-parâmetros)
> 3. [Consumindo parâmetros](#consumindo-parâmetros-de-uma-rota)
> 4. [Navegando entre rotas](#navegando-entre-rotas)
> 4.1 [Hook useNavigation](#utilizando-o-hook-usenavigation)
> 4.2 [Componente Link](#utilizando-o-componente-link)
> 5. [Navegando para rotas anteriores](#navegando-para-uma-rota-anterior)
## Criando Children Routes (subrotas)
Children routes são rotas que são aninhadas dentro de outra rota. Elas são usadas para criar hierarquias de rotas, ou seja, criar uma estrutura de rotas para a sua aplicação.
Por exemplo, imagine que você tem uma aplicação com uma página "Perfil Logado" e essa página possui as seguintes opções de navegação: "Editar perfil" e "Alterar senha". Em vez de ter duas rotas diferentes para cada opção, você pode criar uma rota "Perfil" e aninhar as três opções de navegação dentro dela como children routes.
Dessa forma, a rota "Perfil" seria o parent route e as outras três seriam as children routes, e ao acessar a rota "perfil", a aplicação saberia que as opções de navegação estão contidas nela, e renderizaria os componentes da rota filho correspondente.
Em resumo Children routes são uma forma de organizar suas rotas de maneira hierarquica, ou seja, criando um parent route para seus componentes filho. Para criar uma children route no **TanStack Router** basta utilizar o método `createRoute` do parent route, como no exemplo abaixo:
```TSX
// ARQUIVO: routes.ts
// Importando funções do TanStack Router
import { ReactRouter, createRouteConfig } from '@tanstack/react-router';
// ... Importação das páginas
let rootRoute = createRouteConfig();
// Criando a Parent Route
const profileRoute = rootRoute.createRoute({
path: '/profile', // Caminho da rota
});
// Criando as Children Routes
const editProfileRoute = profileRoute.createRoute({
path: '/edit', // Caminho da rota
component: EditProfile, // Componente que será renderizado
});
const changePasswordRoute = profileRoute.createRoute({
path: '/change-password', // Caminho da rota
component: ChangePassword, // Componente que será renderizado
});
// Adicionando as Children Routes ao Parent
const profileRoutes = [editProfileRoute, changePasswordRoute];
const profileRouteConfig = profileRoute.addChildren(profileRoutes);
// Adicionando as rotas ao gerenciador
const routes = [profileRouteConfig];
const routeConfig = rootRoute.addChildren(routes);
// ... Criação do Router
```
## Criando rotas com parâmetros
As rotas com parâmetros são aquelas que permitem passar dados dinâmicos através de sua URL. Isso é muito útil quando se deseja passar informações específicas, tal como o ID do usuário afim de exibir seu perfil e suas informações relacionadas.
Imagine que você é o desenvolvedor da funcionalidade de perfil público no website da He4rt e deseja exibir a página de perfil de um usuário específico quando o usuário clicar em um nome de usuário na lista de usuários. Em vez de criar uma rota para cada usuário manualmente, você pode criar uma rota única para a página de perfil e passar o ID do usuário como um parâmetro na URL.
A sintaxe para criar uma rota com parâmetros é similar a criar uma rota normal, porém o nome do parâmetro é incluído um cifrão em seu início. Por exemplo:
```TSX
// ARQUIVO: routes.ts
// Importando funções do TanStack Router
import { ReactRouter, createRouteConfig } from '@tanstack/react-router';
// ... Importação das páginas
let rootRoute = createRouteConfig();
// Criando a rota com parâmetro
const viewProfileRoute = rootRoute.createRoute({
path: '/profile/$id',
component: ViewProfile,
});
// Adicionando a rota ao gerenciador
const routes = [viewProfileRoute];
const routeConfig = rootRoute.addChildren(routes);
// ... Criação do Router
```
## Consumindo parâmetros de uma rota
Para consumir os parâmetros de uma rota, você pode utilizar a função `useMatch` do **TanStack Router**. Essa função retorna um objeto que inclui parâmetros da rota, e você pode desestruturar esse objeto para obter os parâmetros que deseja. Veja o exemplo abaixo:
```TSX
// ARQUIVO: ViewProfile.tsx
// Importando a função useMatch do TanStack Router
import { useMatch } from '@tanstack/react-router';
export function ViewProfile() {
// Obtendo os parâmetros da rota
const { params } = useMatch({
from: "/profile/$id", // Caminho da rota, note que se você habilitou o Type-Safe, já irá se auto-completar
});
// Desestruturando os parâmetros
const { id } = params;
return (
// Renderizando o ID do perfil
O ID do Perfil Informado é: {id}
)
}
```
Ao acessar a rota `/profile/1234`, o resultado esperado é que o ID do perfil seja exibido na tela como "O ID do Perfil Informado é: 1234".
## Navegando entre rotas
Para navegar entre rotas, há duas formas de fazer isso: utilizando o hook `useNavigation` ou utilizando o componente `Link`.
### Utilizando o hook `useNavigation`
O hook `useNavigation` retorna uma função que permite navegar para uma rota específica. Para utilizá-lo, basta importar a função `useNavigation` do **TanStack Router** e chamar a função retornada por ela. Veja o exemplo abaixo:
```TSX
// Importando a função useNavigation do TanStack Router
import { useNavigation } from '@tanstack/react-router';
export function ExampleRoute() {
// Obtendo a função de navegação
const navigate = useNavigation();
function handleNavigateToOtherUser(id: string) {
return navigate({
to: "/profile/$id",
params: { id },
})
}
return (
// Renderizando o botão de navegação
)
}
```
### Utilizando o componente `Link`
O componente `Link` é um componente que permite navegar para uma rota específica. Para utilizá-lo, basta importar o componente `Link` do **TanStack Router** e passar o caminho da rota para qual você deseja navegar. Veja o exemplo abaixo:
```TSX
// Importando o componente Link do TanStack Router
import { Link } from '@tanstack/react-router';
export function ExampleRoute() {
return (
// Renderizando o botão de navegação
Navegar para usuário 1234
)
}
```
## Navegando para uma rota anterior
Para navegar para a rota anterior, você pode utilizar a variável history desestruturada do hook `useRouter` do **TanStack Router**. Essa variável contém é um objeto que contém a função `back` que permite navegar para a rota anterior. Veja o exemplo abaixo:
```TSX
// Importando a função useRouter do TanStack Router
import { useRouter } from '@tanstack/react-router';
export function ExampleRoute() {
// Obtendo a variável history
const { history } = useRouter();
function handleNavigateToPreviousRoute() {
return history.back();
}
return (
// Renderizando o botão de navegação
)
}
```
E pronto! A partir de agora já é possível criar rotas dinâmicas e navegar na aplicação utilizando o **TanStack Router**.
[Ir para Próxima Seção](./3-Layouts.md)
# TanStack Router - Layouts
> 🔥 **Tá com pressa?** Se liga no sumário:
> 1. [Definição](#o-que-são-layouts-aplicado-no-contexto-de-rotas)
> 2. [Estrutura das páginas](#construindo-a-estrutura-das-páginas)
> 3. [Estrutura do Layout](#construindo-a-estrutura-do-layout)
> 4. [Estruturando as rotas](#estruturando-rotas-com-o-tanstack-router)
## O que são Layouts aplicado no contexto de rotas?
Os Layouts são elementos geralmente utilizados para definir a estrutura padrão numa aplicação, componentes nos quais são comuns em várias páginas do aplicativo, como por exemplo o cabeçalho e o rodapé, que são usados como um container para outros componentes que representam o conteúdo específico de cada página.
No **TanStack Router** isso é feito utilizando um truque o componente dentro da renderização da Parent Route.Isso permite que você mantenha a estrutura básica de suas páginas consistente, enquanto ainda sendo capaz de renderizar conteúdo dinâmico baseado na rota atual.
## Construindo a estrutura das páginas
Abaixo foi criado uma estrutura de exemplo para essas páginas, onde cada uma possui um conteúdo específico para cada uma delas.
```TSX
import React from 'react';
// ARQUIVO: pages/Home.tsx
export function Home() {
return (
O projeto 4Noobs nasceu com o objetivo de ser um espaço onde as pessoas pudessem encontrar conteúdo de fácil entendimento em um primeiro encontro com determinado tema, promovendo uma melhor capacitação profissional. A intenção desse Open Source é que as pessoas de diferentes níveis de entendimento pudessem contribuir.
);
}
```
## Construindo a estrutura do Layout
Abaixo foi criado uma estrutura de exemplo para um Layout, que representa o cabeçalho replicado nas páginas.
```TSX
// ARQUIVO: layouts/RootLayout.tsx
export function RootLayout() {
return (
<>
{/* Esse header será replicado para as sub rotas da Parent Route que você colocar o Layout */}
Página inicial Sobre nós
{/* O Outlet representa o conteúdo da sub rota */}
)
}
```
## Estruturando rotas com o TanStack Router
Agora que já temos as páginas criadas, vamos criar as rotas para elas utilizando o do **TanStack Router**.
```TSX
// ARQUIVO: router.tsx
// Note que a extensão mudou de .ts para .tsx porque iremos inserir componentes html em sua estrutura
// Importando funções do TanStack Router
import { ReactRouter, createRouteConfig, Link, Outlet } from '@tanstack/react-router';
// Importando o Layout
import { RootLayout } from './layouts/RootLayout';
// Importando as páginas da aplicação
import { Home } from './pages/Home';
import { About } from './pages/About';
// Criando o gerenciador de rota
const rootRoute = createRouteConfig({
component: RootLayout // Layout construido para as rotas
});
// Criando a rota para a página inicial
const homeRoute = rootRoute.createRoute({
path: '/', // Caminho da rota
component: Home, // Componente da rota que será renderizado
});
// Criando a rota para a página sobre nós
const aboutRoute = rootRoute.createRoute({
path: '/about', // Caminho da rota
component: About, // Componente da rota que será renderizado
});
// Adicionando as rotas ao gerenciador
const routes = [homeRoute, aboutRoute];
const routeConfig = rootRoute.addChildren(routes);
// Criando a rota com o adapter para react
const router = new ReactRouter({
routeConfig,
defaultPreload: 'intent'
});
export default router;
```
Lembrando que o exemplo acima foi utilizado um layout de escopo global, pois foi criado no `rootRoute`, porém isso pode ser replicado para outras subrotas em seus Parent Routes, que você aprendeu a fazer no módulo de [Rotas Customizadas](./2-Rotas-customizadas.md).
E pronto! A partir de agora já é possível utilizar os Layouts em sua aplicação de maneira fácil utilizando o **TanStack Router**.
[Ir para Próxima Seção](./4-Caching.md)
# TanStack Router - Caching
> 🔥 **Tá com pressa?** Se liga no sumário:
> 1. [Aplicação do cache na web](#como-o-caching-é-aplicado-em-aplicações-web)
> 2. [Vantagens do caching](#vantagens-do-caching-no-tanstack-router)
## Como o caching é aplicado em aplicações web?
Caching em aplicações web é uma técnica utilizada para armazenar dados em memória, a fim de aumentar a velocidade de acesso, diminuir a carga no servidor e melhorar a experiência do usuário com consistência na fluidez. Quando um usuário acessa uma rota específica em uma aplicação web, os dados e informações sobre a página podem ser armazenados em cache, permitindo que as solicitações subsequentes sejam carregadas mais rapidamente, sem a necessidade de recarregar todos os dados do servidor. Isso pode melhorar significativamente o desempenho e a experiência do usuário.
## Vantagens do Caching no **TanStack Router**
- [x] Obsolência enquanto revalidado
- [x] Utilização de Max-age
- [x] Auto invalidação
- [x] Garbage collection
- [x] Auto-carregamento de páginas
- [x] Amigável com cache externo
[Ir para Próxima Seção](./5-DevTools.md)
# TanStack Router - DevTools
> 🔥 **Tá com pressa?** Se liga no sumário:
> 1. [O que é](#o-que-é-um-devtools)
> 2. [Instalação](#como-instalar-o-tanstack-devtools)
> 3. [Criando a instância do DevTools](#criando-a-instância-do-devtools)
> 3. [Utilizando o DevTools na aplicação](#utilizando-o-devtools-na-aplicação)
## O que é um DevTools
O DevTools é um conjunto de ferramentas de desenvolvimento, os de navegadores web são um ótimo exemplo e são um dos tipos de DevTools mais conhecidos, permitindo aos desenvolvedores inpecionar, depurar e modificar o código de uma página web em tempo real. O DevTools é uma ferramenta valiosa para desenvolvedores para testar e otimizar seus sites e aplicações.
No contexto do **TanStack DevTools**, as ferramentas disponibilizadas são para auxiliar a visualização de todo o funcionamento interno do **TanStack Router** e evitar a perda de inúmeras horas tentando depurar uma aplicação com diversas rotas.
## Como instalar o TanStack DevTools
Para instalar o **TanStack DevTools** em sua aplicação, basta utilizar algum dos comandos abaixo de acordo com o seu gerenciador de pacotes:
```BASH
# Utilizando npm
npm install @tanstack/react-router-devtools@beta --save
# Utilizando Yarn
yarn add @tanstack/react-router-devtools@beta
# Utilizando pnpm
pnpm add @tanstack/react-router-devtools@beta
```
## Criando a instância do DevTools
Para utilizar as ferramentas do DevTools apenas em ambiênte de desenvolvimento, basta importá-lo da forma a seguir:
> ⚠️ Mas tome cuidado, é necessário que você defina a variável de ambiente `NODE_ENV` para identificar se a aplicação está sendo executada em produção.
```TSX
// ARQUIVO: router.ts
// Importação do lazy do react
import { lazy } from 'react';
const isRunningInProduction = process.env.NODE_ENV === 'production';
export const TanStackRouterDevtools =
isRunningInProduction
? () => null // Não renderiza nada em produção
: lazy(() =>
// Lazy load em desenvolvimento
import('@tanstack/react-router-devtools').then(
(res) => ({
default: res.TanStackRouterDevtools
})
),
);
```
## Utilizando o DevTools na aplicação
Lembra de quando foi introduzido o conceito de Layouts? Pois bem, para utilização do DevTools é necessário que você importe a instância dentro de um Layout, para que assim ele obtenha o **TanStack Router** automáticamente.
```TSX
// ARQUIVO: layouts/RootLayout.tsx
// Importação do DevTools
import { TanStackRouterDevtools } from '../router';
export function RootLayout() {
return (
<>
Página inicial Sobre nós
)
}
```
E pronto! O botão para acionar o DevTools será exibido na aplicação na posição que você informou, tendo uma aparência parecida com essa:
Ao clicar sobre esse botão, uma tela de inspeção irá aparecer, nela é possível obter informações sober os layouts que a rota está contida, estados passados para a rota, histórico de navegação, execução de funções para navegação, parâmetros de pesquisa, erros, dentre muitas outras funcionalidades :)
## O que são Testes Unitários ?
Testes unitários podem ser definidos como porções de códigos responsáveis por validar o comportamento de unidades funcionais de código, sendo unidades funcionais de qualquer componente que através de sua invocação possa gerar o resultado esperado. Podemos, então, pensar inicialmente em testes unitários no contexto de funções puras, que por sua vez são funções as quais não alteram o estado da nossa aplicação, tal como uma função de soma de dois números. Segue um exemplo:
```js
function sum(a, b) {
return a + b;
}
```
Porém, podemos expandir o conceito de teste unitários para coisas mais complexas.
Por exemplo, no contexto do React, a renderização de um componente é verificar se o mesmo é renderizado, se é renderizado com o comportamento esperado e até mesmo se está lidando com eventos do próprio componente tais como cliques da maneira correta.
## A importância e o ciclo do TDD
TDD, ou Test-Driven Development (Desenvolvimento Orientado a Testes) é uma técnica de desenvolvimento de software fundamental para a validação de uma aplicação, muito utilizada pelas empresas e cobrada dos seus desenvolvedores. Essa prática minimiza os erros da aplicação, tanto na fase de desenvolvimento, quando podemos alterar uma classe sem quebrar o código, quanto para a produção, ao sabermos que todo nosso código está testado e funcionando como esperamos.
O Ciclo de TDD pode ser definido em três etapas: Criação, Falha, Refatoração. No primeiro, criamos o teste do qual queremos validar, em seguida passamos para a segunda etapa, onde forçamos o teste a falhar e assim temos certeza do funcionamento do teste, por fim passamos para a Refatoração, na qual refatoramos o teste, agora otimizando-o e fazendo-o passar.
## Ferramentas utilizadas em testes de integração
Para aplicações escritas em javascript, é muito comum o uso do _framework_ de teste chamado [Jest](https://jestjs.io/). Ele é responsável pela estrutura do arquivo de teste, e nos permite criar conjuntos e cenários para que possamos criar as asserções que queremos.
Já para manipulação do DOM, podemos utilizar a biblioteca [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). Ela nos permite renderizar e fazer _queries_ no nosso DOM para criarmos nossas asserções.
Além disso, temos outro _framework_ famoso no mercado, [Enzyme](https://enzymejs.github.io/enzyme/) utilizado principalmente no contexto de componentes funcionais React e teste de frontend graças à sua compatibilidade com outros frameworks de testes tais como o Jest,facilitando assim a criação de _Mocks_ para testes.
## Exemplos de Teste de Integração
> Configurações
No caso, usaremos a React Testing Library, a qual já vem com configurações pré-setadas, para isso, basta que criemos uma pasta com o nome " ** tests ** " dentro do nosso diretório "src" e então nomearemos nossos arquivos de testes com a seguinte extensão: .test.js .
No exemplo a seguir testaremos uma função pura de soma, então vamos nomeá-lo de: "sum.test.js"
> Vamos pensar no caso de uma função de soma
Queremos apenas testar a funcionalidade de uma função de soma certo? Nesse caso, um teste unitário será o mais adequado para ela.
```js
function sum(a, b) {
return a + b;
}
it('Should sum 3,2 and return 5', () => {
const sum = sum(3, 2);
expect(sum).toBe(5);
});
```
Nesse teste, estamos usando os métodos "it,expect e toBe". As constatações, através do método it() devem informar o que o teste propôe, e no segundo parâmetro, através de uma _callback_ criar o teste. O expect() é o que guardará o objeto a ser validado, sendo que deverá ser ligado a um método de validação. No exemplo usamos o "toBe", ou seja, esperamos que sum seja 5. "Expect sum toBe 5". Então, teriamos nosso teste validado e ele passaria já que esperamos que ao somar 3 e 2 teriamos como resultado 5.
Seguindo o ciclo de TDD.
```js
it('Should sum 3,2 and return 5', () => {
const sum = sum(3, 3);
expect(sum).toBe(5);
});
```
Nesse caso o teste não passaria, pois esperamos que o resultado seja 5, porém os números somados (3,3) tem como soma o valor 6 e não cinco. Com isso, sabemos que a nossa função de soma está correta e agora podemos refatorar nosso código de uma forma genérica.
```js
it('Should sum two numbers an return its correct sum', () => {
const first_sum = sum(3, 3);
const second_sum = sum(4, 5);
expect(first_sum).toBe(6);
expect(second_sum).toBe(9);
});
```
Nosso teste passaria pois as duas expectativas são cumpridas e logo a constatação é válida.
## Testes Unitários no contexto do React
Abstraindo mais um pouco, podemos chegar ao contexto dos componentes e do React, seguindo o mesmo princípio, veja o exemplo a seguir:
```jsx
import React from 'react';
import {
render,
screen,
getByLabelText,
getByTestId,
toHaveTextContent,
toHaveAttribute,
} from '@testing-library/react';
export const LabelInput = () => {
return (
);
};
describe('LabelInput testing', () => {
it('Should render LabelInput correctly', () => {
render();
const labelText = screen.getByLabelText('Teste');
const input = screen.findByTestId('input1');
expect(labelText).toHaveTextContent('Teste');
expect(input).not.toHaveAttribute('readonly');
});
});
```
Repare que nesse exemplo criamos um componente LabelInput o qual renderiza um Label e seu input. Para o teste, precisamos renderizar o componente primeiro e depois verificamos e ele possui o texto e se possui o atributo. Lembrando que nessa etapa estamos no ciclo de Refatoração do TDD.
Mais funcionalidades da React Library Testing podem ser vistas através desse [link](https://testing-library.com/docs/react-testing-library/api).
O mundo dos testes é bem amplo e necesário, portanto compensa muito gastarmos um tempo amais estudante este assunto.
[Ir para Próxima Seção](../Testes/2-testes-de-integracao.md)
## O que é teste de integração?
Testes de integração são aqueles que testam os módulos da aplicação de forma conjunta. Eles garantem que módulos menores interajam entre si corretamente. Ao contrário dos testes unitários, os testes de integração evitam utilizar dados _mockados_ garantindo o comportamento real de módulos menores.
## Escreva testes. Não muitos, mas a maioria de integração
Essa é uma frase que foi _tweetada_ por [Guillermo Rauch](https://twitter.com/rauchg/status/807626710350839808) criador do [Vercel](https://vercel.com/) e [Socket.io](https://socket.io/).
Ele quer dizer que a grande maioria dos projetos devem ter testes automatizados, eles garantem que o produto faz o que tem que fazer, e nos dá confiança de que está fazendo da forma correta.
Em relação a quantidade, escreva o necessário para que suas funcionalidades principais estejam cobertas e o usuário não tenha problemas em usá-las quando algo novo for lançado.
Sobre a maioria dos seus testes, eles devem ser de integração. **Kent C. Dodds** fala sobre o real retorno dos esforços com sua teoria do [Troféu de teste](https://twitter.com/kentcdodds/status/960723172591992832). Essa teoria diz que os testes de integração criam o equilíbrio real entre confiança e esforço.
## Ferramentas utilizadas em testes de integração
Para aplicações escritas em javascript, é muito comum o uso do _framework_ de teste chamado [Jest](https://jestjs.io/). Ele é responsável pela estrutura do arquivo de teste, e nos permite criar conjuntos e cenários para que possamos criar as asserções que queremos.
Já para manipulação do DOM, podemos utilizar a biblioteca [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). Ela nos permite renderizar e fazer _queries_ no nosso DOM para criarmos nossas asserções.
## Exemplo de um teste de integração
Imagine a seguinte jornada:
> Eu como usuário desejo ver um alerta ao clicar em um botão escrito "Exibir alerta"
Pensando nos testes unitários, poderíamos testar se o botão está invocando a função passada e poderíamos verificar se o alerta está visível baseado em uma variável de controle de exibição.
```js
// Button.spec.js
describe('Meu botão', () => {
test('deve chamar a função onClick', () => {
const onClickMock = jest.fn();
render();
userEvent.click(screen.getByRole('button', { name: 'Exibir alerta' }));
expect(onClickMock).toHaveBeenCalled();
});
});
```
```js
// Alert.spec.js
describe('Meu Alerta', () => {
test('deve exibir o alerta', () => {
render(Aqui está seu alerta!);
expect(screen.getByRole('alert')).toBeInDocument();
});
test('não deve exibir o alerta', () => {
render(Aqui está seu alerta!);
expect(
screen.getByRole('alert', { name: 'Aqui está seu alerta!' })
).not.toBeInDocument();
});
});
```
Os testes a cima são executados com sucesso, eles recebem os dados que precisam para simular seu funcionamento.
Agora vamos criar a integração entre esses componentes e o teste que garante que quando o botão for clicado, o alerta será exibido.
```js
// App,js
const App = () => (
<>
Aqui está seu alerta!
);
```
```js
// App.spec.js
describe('Minha página inicial', () => {
test('deve exibir o alerta quando clicar no botão "Exibir alerta"', () => {
render();
userEvent.click(screen.getByRole('button', { name: 'Exibir alerta' }));
expect(
screen.getByRole('alert', { name: 'Aqui está seu alerta!' })
).toBeInDocument();
});
});
```
Note que desta vez não renderizamos cada componente isolado, mas sim o componente no qual está utilizando cada um deles.
Com isso, nós procuramos dentro do DOM a existência de um botão com o texto _Exibir alerta_ e clicamos nele, como consequência desta ação, esperamos ver um alerta com o texto _Aqui está seu alerta_.
Esse é um exemplo bem simples, mas mostra como nosso teste garante o comportamento de um alerta e um botão quando eles estão juntos, dois módulos pequenos que criam um contexto quando juntam suas forças!
Made with :purple_heart:
================================================
FILE: docs/Verificadores de Tipo/Typescript.md
================================================
Aviso:
Esta documentação tem como intenção ser o seu pontapé inicial para começar o desenvolvimento de um projeto React dentro de um ambiente preparado para o Typescript.
Se você quiser se aprofundar ainda mais sobre cada um desses temas e sobre o funcionamento do Typescript em si através de vários exemplos sinta-se livre para visitar o [Typescript4noobs!](https://github.com/Carolis/typescript4noobs)
# O que é o Typescript?
Typescript é considerado um **superset** da linguagem Javascript, dito isso, se você já sabe Javascript é muito fácil de começar a usá-lo já sabendo um pouco.
Ele tem como principal funcionalidade a capacidade de adicionar **tipagens estáticas** ao código.
Um dos pontos positivos que vale a pena ser citado é a possibilidade de termos arquivos Typescript convivendo no mesmo projeto com arquivos Javascript já que no final das contas o Typescript é compilado para Javascript, ou seja, é uma ferramenta de **desenvolvimento**. Isso também permite que você adicione Typescript em qualquer momento do seu projeto, conforme necessidade e gosto pessoal.
### Por que usar Typescript?
O uso de Typescript traz segurança principalmente na detecção de **erros inesperados**. Um exemplo clássico seria o problema do operador `+` do Javascript que, dada uma soma com tipagens erradas poderia retornar erroneamente uma **concatenação** ao invés da soma propriamente dita.
```ts
function soma(x, y) {
return x + y;
}
```
Chamando a função `soma(2,2)` o retorno seria `4`;
Chamando a função `soma('2','2')` o retorno seria `22`;
Esse problema seria facilmente evitado ao tiparmos as variáveis corretamente como números.
---
Outra grande vantagem de usar o Typescript é o aumento da inteligência dentro do seu editor ou IDE, o famoso **[IntelliSense](https://code.visualstudio.com/docs/editor/intellisense)** e a possibilidade de usar **parâmetros opcionais**. Além disso, as tipagens podem funcionar como uma mini documentação dentro do seu arquivo, facilitando futuras manutenções e fazendo com que todos esses fatores tragam uma camada a mais de segurança para o código.
# Instalando o Typescript ao lado do React
É possível inicializar um projeto react com um template para typescript de várias formas, uma delas se utilizando do create-react-app específico para o typescript, usando os seguintes comandos:
PS: antes de seguir com a instalação do typescript é importante ter o **node** previamente instalado.
`yarn create react-app my-app --template typescript` ou `npx create-react-app my-app --template typescript`
Após isso, toda a estrutura de arquivos virá inicializada em torno de um ambiente preparado para o Typescript.
Ainda vale lembrar que você não precisa necessariamente usar um template através do create-react-app, sendo possível inicializar toda sua estrutura de arquivos do zero conforme gosto e necessidade.
# Tipos
Tipar variáveis é bem simples, como demonstrado no exemplo abaixo. Basta que você adicione `:tipo` depois de declarar uma variável.
Exemplos:
```ts
let numero: number
numero = 3
let isTrue: boolean
isTrue = true
```
O Typescript desfruta de alguns tipos primitivos mais comuns, sendo eles:
`:number`
`:string`
`:boolean`
`:bigInt`
`:symbol`
`:null`
`:undefined`
Você pode conferir ainda mais tipos e conferir exemplos para cada um deles consultando o repositório [Typescript4noobs](https://github.com/Carolis/typescript4noobs).
Abaixo seguem alguns exemplos de como ficaria a estrutura de um componente React num ambiente que faz uso de Typescript.
Componente **funcional** com Typescript:
```ts
import React, { FunctionComponent, useState } from 'react'
interface Props {
message: string
}
const App: FunctionComponent = props => {
const [hasMessage, setHasMessage] = useState(false)
return
{hasMessage ? props.message : 'Default Message'}
}
export default App
```
Componente de **classe** com o Typescript:
```ts
import React, { Component } from 'react'
interface AppProps {
text: string
}
interface AppState {
value: number
}
export default class App extends Component {
constructor(props: IAppProps) {
super(props)
this.state = {
value: 0
}
}
public render() {
return (
{this.props.text}
{this.state.value}
)
}
}
```
[Ir para Próxima Seção](../Roteamento/1-React-Router.md)
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/
Perceba também que nessa estrutura a View também podem gerar novas "Actions" para os "Dispatchers" e retornar o fluxo do ínicio, veja abaixo no diagrama essa interação:
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/
Apenas vou fazer algumas observações sobre características do Flux, os estados da aplicação são mutáveis, possuí apenas um único "Dispatcher" e possuí multiplos "Store".
## Como Funciona o Redux
Agora que entendemos a arquitetura do Flux, vamos entender como funciona o Redux, que é baseado no Flux, mas não é completamente igual a ele. Primeiro de tudo temos a "Action", "Reducers", "Store" e "React", essa é a estrutura do Redux, nela já observamos que temos de igual algumas coisa e outras não.
No geral tudo funciona bem parecido mas existem diferenças importantes, os "Reducers" são equivalente ao "Dispatcher" com uma diferença não existe um único "Reducers" e sim pode haver 1 (um) ou mais deles, a "Store" é igual com a diferença que só existe uma em vez de várias "Stores", o "React" é igual a "View" mas como estamos aplicando em React ela tem esse nome, e as "Actions" possuem a mesma função e da mesma forma que no Flux. Abaixo temos um diagrama comparando o funcionamento do Flux com o Redux:
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/
## Como usar o Redux no React
Primeiramente para instalar os pacotes do Redux na sua aplicação React, use os seguintes comandos:
- npm install redux
- npm install react-redux
- npm install --save-dev redux-devtools
### Action
Agora vamos entender como a estrutura funciona no código em si, começando pelas "Actions", elas basicamente vão ser as informações de estado que a aplicação vai enviar para o "Store" através dos "Reducers".
Nesse primeiro código vemos um exemplo de um "Action Creator", ele basicamente é um objeto que passara os nomes de estados a ser informado para a "Store".
```jsx
export const ActionsTypes = {
SET_PRODUCTS: "SET_PRODUCTS",
SELECTED_PRODUCTS: "SELECTED_PRODUCTS",
REMOVE_SELECTED_PRODUCTS: "REMOVE_SELECTED_PRODUCTS",
};
```
Nesse código agora estou exportando minhas "Actions", que irão usar as "Action Creator" criadas anteriormente, para enfim passar os valores de estado da aplicação.
```jsx
import { ActionsTypes } from "../contants/action-types";
export const setProducts = (products) => {
return {
type: ActionsTypes.SET_PRODUCTS,
payload: products,
}
}
export const selectedProducts = (products) => {
return {
type: ActionsTypes.SELECTED_PRODUCTS,
payload: products,
}
}
export const removeSelectedProducts = () => {
return {
type: ActionsTypes.REMOVE_SELECTED_PRODUCTS,
}
}
```
Agora veja no código a seguir como usar as "Actions" criadas para avisar ao "Reducers" que houve alguma mudança e é necessário avisar ao "Store".
```JSX
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import ProductComponent from './ProductComponent';
import { setProducts } from '../redux/actions/productActions';
const ProductListing = () => {
const products = useSelector((state) => state);
const dispatch = useDispatch();
const fetchProducts = async () => {
const response = await axios
.get("https://fakestoreapi.com/products")
.catch((err) => {
console.log("error: ", err);
});
dispatch(setProducts(response.data));
};
useEffect(() => {
fetchProducts()
}, []);
return(
Quando você alterar qualquer arquivo e salvar, eles serão recompilados e a janela do navegador será atualizada. Caso algum erro ocorra, ele aparecerá em vermelho no console.
O **build** é utilizado para enviar a aplicação para "produção".
Como isso acontece? Ao executá-lo o babel transpila a aplicação automaticamente e todo o app será mandado para uma pasta */build* fora da */src* em arquivos estáticos, e então seu arquivo estará pronto para ser colocado em produção.
O **eject** é interessante, inicialmente o create-react-app empacota e esconde os módulos do npm que ele está usando por debaixo dos panos, para que o *package.json* seja mais limpo e simples. Porém se você quiser começar a adicionar configurações mais complexas e instalar outros módulos, seus módulos atuais precisam saber quais são os módulos existentes. Então ao executar o **eject** ele não esconderá mais esses módulos, e eles estarão disponíveis no seu *package.json*.
Por fim, não é sempre necessário utilizar o create-react-app para criar o seu projeto, você também pode criar o seu projeto na mão, do zero. Porém como o curso tem o foco para inciantes, isso seria um assunto para conversarmos no futuro.
---
Vamos olhar agora um pouco sobre [dependências](./1.1-O-que-são-dependências.md).
[Ir para Próxima Seção](./4-Componentizacao.md)
# Como utilizar uma ref para armazenar valores
Bem, como já vimos anteriormente, podemos atribuir uma `ref` a um elemento HTML. Além disso, podemos atribuir valores, sejam números, textos ou até mesmo objetos! A maior vantagem é que essas alterações não geram uma re-renderização em nossa aplicação.
### Exemplo - Contador que não mostra em tela.
```jsx
import { useRef } from 'react';
function Componente() {
const counter = useRef(0);
const updateCounter = () => {
counter.current += 1;
console.log(counter.current);
};
return (
Basicamente, não ocorre novas renderizações em tela, apenas os logs do valor sendo atualizado.
### Exemplo - Contador que pode mostrar o valor em tela.
```jsx
import { useRef, useState } from 'react';
function Componente() {
const [value, setValue] = useState(null);
const [showValue, setShowValue] = useState(false);
const counter = useRef(0);
const updateCounter = () => {
counter.current += 1;
console.log(counter.current);
};
const toggleShowValue = () => setShowValue((prevState) => !prevState);
return (
Certo, mas qual a diferença em relação ao exemplo anterior? Basicamente, como as `refs` não disparam novas renderizações, não podemos obter atualizações em tempo real na tela. Por isso, torna-se necessário utilizar estados para lidar com o mesmo.
A partir desse ponto, a imaginação é o limite! É possível fazer muitas coisas. Inclusive, na própria documentação do React (link no final do artigo), existe um exemplo de um cronômetro que utiliza o `ref.current` como um `setInterval`.
# Como passar uma ref para componentes customizados
Normalmente, quando vamos usar em nossa aplicação algum componente, como o input ou qualquer outro, criamos um componente customizado para garantir que, em todos os locais de nossa aplicação, tenhamos o mesmo design e comportamento. No caso do input, talvez em algum momento você queira usá-lo sem nenhum controle, ou seja, como um `uncontrolled component`, e para isso usaríamos as `refs` que aprendemos anteriormente. No entanto, tenho uma má notícia: não conseguiríamos usá-lo da mesma forma que antes.
```jsx
const CustomInput = ({value, label, onChange, ...rest}) => {
return {
}
}
const App = () => {
return (
### Controle de estado
- [API de Contexto](./Controle%20de%20estado/1-API-de-Contexto.md)
- [Redux](./Controle%20de%20estado/2-Redux.md)
- [Zustand]() 
