Showing preview only (305K chars total). Download the full file or copy to clipboard to get everything.
Repository: he4rt/react4noobs
Branch: master
Commit: 34bfa70e8613
Files: 56
Total size: 282.2 KB
Directory structure:
gitextract_q5zlpq2x/
├── README.md
└── docs/
├── Bibliotecas de utilidade/
│ ├── 1-Lodash.md
│ └── 2-Storybook.md
├── Cliente GraphQL/
│ ├── 1-Conceito.md
│ └── 1.1-Desmistificando-200.md
├── Cliente REST/
│ ├── 1-Fetch.md
│ └── 2-Axios.md
├── Controle de estado/
│ ├── 1-API-de-Contexto copy.md
│ ├── 2-Redux.md
│ └── 3-Zustand.md
├── Design Patterns/
│ └── 1-Compound Components.md
├── Estilizacao/
│ ├── 2.0.Tailwindcss.md
│ ├── 3.0.CSS-in-JS.md
│ └── 3.1-styled-components.md
├── Ferramentas de build/
│ ├── 1-npm-yarn.md
│ ├── 1.1-O-que-são-dependências.md
│ ├── 2-Webpack.md
│ └── 3-Vite.md
├── Iniciando com React/
│ ├── 1-Introducao.md
│ ├── 2-O que e React.md
│ ├── 2.1-iniciando um projeto react.md
│ ├── 3-JSX e Babel.md
│ ├── 4-Componentizacao.md
│ ├── 4.1-FormasDeDeclarar.md
│ ├── 4.2-Propriedades.md
│ ├── 5-Estados.md
│ ├── 6-Ciclo-de-vida.md
│ ├── 7-Manipulando Eventos.md
│ ├── 8-React Hooks.md
│ ├── 8.1-useState.md
│ ├── 8.2-useEffect.md
│ ├── 8.3-useContext.md
│ ├── 8.4-useRef.md
│ ├── 8.5-useReducer.md
│ ├── 8.6-useMemo.md
│ ├── 8.7-useCallback.md
│ ├── 9-React Error Boundaries.md
│ ├── Controlled-vs-uncontrolled-components.md
│ ├── Listas-no-react.md
│ ├── Refs.md
│ └── Renderizacao-condicional.md
├── Performance/
│ └── Lazy Loading em React e Nextjs.md
├── README.md
├── Renderizacao no Servidor/
│ └── 1-Nextjs.md
├── Roteamento/
│ ├── README.md
│ ├── React-Router/
│ │ ├── 1-Introducao.md
│ │ └── 2-Rotas-customizadas.md
│ └── TanStack-Router/
│ ├── 1-Introducao.md
│ ├── 1.1-Type-Safety.md
│ ├── 2-Rotas-customizadas.md
│ ├── 3-Layouts.md
│ ├── 4-Caching.md
│ └── 5-DevTools.md
├── Testes/
│ ├── 1-testes-unitarios.md
│ └── 2-testes-de-integracao.md
└── Verificadores de Tipo/
└── Typescript.md
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank" title="Clique para visualizar mais informações sobre o projeto 4noobs">
<img src="./assets/global/header-4noobs.svg" alt="Cabeçalho do repositório representado pelo logotipo da He4rt, simbolizado por um coração roxo, na esquerda e a tipografia '4 noobs by He4rt devs' na direita">
</a>
</p>
<p align="center">
<h2 align="center">React4Noobs</h2>
<h1 align="center">
<img src="./assets/logo.png" alt="Logotipo do ReactJS representado por um ícone de uma partícula de átomo (um círculo ao centro com anéis ao seu redor)" width="220">
</h1>
<p align="center">
<br />
<a href="./docs/README.md" title="Clique para visualizar a documentação">Explore a documentação »</a>
<br />
<br />
<a href="https://github.com/he4rt/react4noobs/issues" title="Clique para reportar um erro">Reporte um erro</a>
·
<a href="https://github.com/he4rt/react4noobs/issues" title="Clique para solicitar um novo conteúdo">Solicite um conteúdo</a>
·
<a href="#como-contribuir" title="Clique para saber como contribuir com o repositório">Contribua com o repositório</a>
</p>
</p>
## 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
<a href="https://github.com/he4rt/react4noobs/graphs/contributors" title="Clique para visualizar a lista de contribuidores">
<img src = "https://contrib.rocks/image?repo=he4rt/react4noobs" alt="Disposição dos conteúdos em grade com a foto de perfil de todos os contribuidores públicos do projeto" />
</a>
<p align="center">Made with 💜</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="./assets/global/footer-4noobs.svg" width="380" alt="Tipografia com o título '4 noobs by He4rt devs' e o slogan 'Da comunidade para a comunidade 💜'" >
</a>
</p>
================================================
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.<br>
🛠 Configurará os scripts necessários para executar e construir o Storybook.<br>
🛠 Adicionará a configuração padrão do Storybook.<br>
📝 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
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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/<id>`
- **GET** `/post/<id>/stories`
- **GET** `/post/<id>/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)**!
<p align="center">Made with 💜</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
[1]: https://www.howtographql.com/
[2]: https://docs.github.com/en/graphql/overview/explorer
[3]: https://graphql.org/
[4]: https://www.redhat.com/pt-br/topics/api/what-is-graphql
[5]: https://developer.mozilla.org/pt-BR/docs/Glossary/REST
[6]: https://developer.mozilla.org/pt-BR/docs/Glossary/API
[7]: https://github.com
[8]: https://graphql.org/foundation/members/
[9]: https://github.com/orgs/graphql/people
[10]: https://lindnercenterofhope.org/blog/feeling-blue-vs-being-depressed-what-is-the-difference/
[11]: https://diariodovale.com.br/colunas/qual-a-cor-da-felicidade/
================================================
FILE: docs/Cliente GraphQL/1.1-Desmistificando-200.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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:
<span style="color:#bf1363">http://</span>: Protocolo
<span style="color:#0e79b2">api</span>: Maquina no servidor
<span style="color:#f39237">sotops</span>: Servidor
<span style="color:#00ffc5">com</span>: nameServer comercial
<span style="color:#00ffc5">br</span>: nameServer brasileiro
<span style="color:#bf1363">images</span>: Pasta no servidor
<span style="color:#59cd90">nudedodaniel.jpg</span>: 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.
<p align="center">Made with 💜</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
[1]: https://www.howtographql.com/
[2]: https://docs.github.com/en/graphql/overview/explorer
================================================
FILE: docs/Cliente REST/1-Fetch.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
## 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
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>Error 405 (Method Not Allowed)!!1</title>
<style> ... </style>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>405.</b> <ins>That’s an error.</ins>
<p>The request method <code>DELETE</code> is inappropriate for the URL <code>/</code>.
<ins>That’s all we know.</ins>
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 <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.id}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
}
````
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
[1]: https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch
[2]: https://pt.wikipedia.org/wiki/Interface_de_programa%C3%A7%C3%A3o_de_aplica%C3%A7%C3%B5es
[3]: https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest
[4]: https://developer.mozilla.org/pt-BR/docs/Web/Guide/AJAX
[5]: https://nodejs.org
[6]: https://github.com/node-fetch/node-fetch
[7]: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods
[8]: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status
[9]: https://http.cat/
[10]: https://developer.mozilla.org/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/fetch
[11]: https://pt-br.reactjs.org/docs/faq-ajax.html
[12]: https://external-preview.redd.it/VIIvCoTbkXb32niAD-rxG8Yt4UEi1Hx9RXhdHHIagYo.jpg?width=960&crop=smart&auto=webp&s=5d890e52d9f9a0ed647b3ff217cf226536a1f651
================================================
FILE: docs/Cliente REST/2-Axios.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
## 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 (
<div className="register-container">
<form onSubmit={handleRegister}>
<input placeholder="Nome" value={name} onChange={e => setName(e.target.value)}></input>
<input placeholder="Email" type="email" value={email} onChange={e => setEmail(e.target.value)}></input>
<input placeholder="Password" value={password} onChange={e => setPassword(e.target.value)}></input>
<button className="button" type="submit">Cadastrar</button>
</form>
</div>
)
}
```
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Controle de estado/1-API-de-Contexto copy.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 <div>
<SeletorDeCores onChange={setUserColor} />
<p style={{ color: userColor }}>Olá mundo colorido</p>
</div>
}
```
Você cria um novo componente e precisa usar as cores do usuário. Vamos criar esse componente:
```jsx
function ListaColorida({ items, color }) {
return <ul>
{
items.map((item) => <li key={item} style={{ color }}>{item}</li>)
}
</ul>
}
```
Além da lista, você desenvolve outros componentes e coloca-os em uma parte da sua aplicação:
```jsx
function Dashboard({ color }) {
return <main>
<MenuDeNavegacao color={color} />
<ListaColorida color={color} items={itemsVindosDeUmaApi} />
</main>
}
```
E a nossa aplicação, que precisa também passar essa propriedade adiante:
```jsx
function App() {
const [userColor, setUserColor] = React.useState('#3DB7F4');
return <div>
<SeletorDeCores onChange={setUserColor} />
<TextoColorido color={userColor}>Olá mundo colorido</TextoColorido>
<Dashboard color={userColor} />
</div>
}
```
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 <ContextoCorUsuario.Provider value={userColor}>
<div>
...
</div>
</ContextoCorUsuario.Provider>
}
```
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 <ContextoCorUsuario.Consumer>
{ (color) => (
<ul>
{
items.map((item) => <li key={item} style={{ color }}>{item}</li>)
}
</ul>
) }
</ContextoCorUsuario.Consumer>
}
```
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 <main>
<MenuDeNavegacao />
<ListaColorida items={itemsVindosDeUmaApi} />
</main>
}
```
```jsx
function App() {
const [userColor, setUserColor] = React.useState('#3DB7F4');
return <ContextoCorUsuario.Provider value={userColor}>
<SeletorDeCores onChange={setUserColor} />
<TextoColorido>Olá mundo colorido</TextoColorido>
<Dashboard />
</ContextoCorUsuario.Provider>
}
```
## 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 <ul>
{
items.map((item) => <li key={item} style={{ color }}>{item}</li>)
}
</ul>
}
```
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 <ContextoCorUsuario.Provider value={userColor}>
<ContextoLocalizacaoUsuario.Provider value={userGPS}>
<ContextoInternacionalizacao.Provider value={translations}>
...
</ContextoInternacionalizacao.Provider>
</ContextoLocalizacaoUsuario.Provider>
</ContextoCorUsuario.Provider>
}
```
```jsx
function BarraDeNavegacao() {
const localizacao = useContext(ContextoLocalizacaoUsuario)
const corUsuario = useContext(ContextoCorUsuario)
return <ul>
<li>{localizacao.latitude} {localizacao.longitude}</li>
<li style={{ color: corUsuario }}>{corUsuario}</li>
</ul>
}
```
## 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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Controle de estado/2-Redux.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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:
<img src="img/flux_exemplo_2.png" alt="Flux1-Facebook"> - 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:
<img src="img/flux_exemplo_1.png" alt="Flux2-Facebook"> - 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:
<img src="img/redux-flux_exemplo.JPG" alt="Redux-Facebook"> - 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(
<div className="ui grid container">
<ProductComponent />
</div>
);
}
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(
<div className="four wide column" key={id}>
<Link to={`/product/${id}`}>
<div className="ui link cards">
<div className="card">
<div className="image">
<img src={image} alt={title} />
</div>
<div className="content">
<div className="header">{ title }</div>
<div className="meta price">$ { price }</div>
<div className="meta">{ category }</div>
</div>
</div>
</div>
</Link>
</div>
);
});
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 (
<div className="ui grid container">
{Object.keys(product).length === 0 ? (
<div>...Loading</div>
) : (
<div className="ui placeholder segment">
<div className="ui two column stackable center aligned grid">
<div className="ui vertical divider">AND</div>
<div className="middle aligned row">
<div className="column lp">
<img className="ui fluid image" src={image} />
</div>
<div className="column rp">
<h1>{title}</h1>
<h2>
<a className="ui teal tag label">$ {price}</a>
</h2>
<h3 className="ui brown block header">{category}</h3>
<p>{description}</p>
<div className="ui vertical animated button" tabIndex="0">
<div className="hidden content">
<i className="shop icon"></i>
</div>
<div className="visible content">Add to Cart</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}
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 "<App />" 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(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
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: <https://github.com/Uriel-David/Projeto_FakeShop-ReactJS-Redux>
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Controle de estado/3-Zustand.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 <h1>{bears} around here...</h1>
}
function Controls() {
const increasePopulation = useStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}
```
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 (
<main>
<label>
Bear Name
<input
onChange={(e) => updateBearName(e.target.value)}
value={bearName}
/>
</label>
</main>
)
}
```
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 (
<div>
<h2>Number of bears: {bears}</h2>
<h2>Number of fishes: {fishes}</h2>
<button onClick={() => addBear()}>Add a bear</button>
</div>
)
}
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Design Patterns/1-Compound Components.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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
<select>
<option value="Danielhe4rt">Danielhe4rt</option>
<option value="Gabriel">Gabriel</option>
<option value="Marcelo">Marcelo</option>
</select>
```
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 (
<ModalContext.Provider value={{ isOpen, setIsOpen }}>
{children}
</ModalContext.Provider>
)
}
```
2. Criando a base do componente Modal
```jsx
import { ModalStorage } from './context'
const Modal = ({ children }) => {
return <ModalStorage>{children}</ModalStorage>
}
export default Modal
```
Perceba que estamos usando `children`, para pegar os componentes que serão inseridos dentro do Modal, vamos querer usa-lo assim:
```
<Modal>
<Modal.Toggle>...</Modal.Toggle>
<Modal.Content>
<p>conteúdo do modal</p>
</Modal.Content>
</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 <button onClick={() => setIsOpen(true)}>{children}</button>
}
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 (
<ModalContext.Provider value={{ isOpen, setIsOpen }}>
{children}
</ModalContext.Provider>
)
}
```
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 <ModalStorage>{children}</ModalStorage>
}
Modal.Toggle = Toggle
Modal.Content = Content
export default Modal
```
6. Utilizando
```jsx
import Modal from './components/Modal'
const App = () => {
return (
<Modal>
<Modal.Toggle>Abrir Modal</Modal.Toggle>
<Modal.Content>
<h2>React4Noobs</h2>
<p>Compound Components é dahora! /o/</p>
</Modal.Content>
</Modal>
)
}
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
<Accordion>
<Accordion.Title>Titulo</Accordion.Title>
<Accordion.Section>Seção 1</Accordion.Section>
<Accordion.Section>Seção 2</Accordion.Section>
<Accordion.Section>Seção 3</Accordion.Section>
<Accordion.Button>Botão</Accordion.Button>
</Accordion>
```
Componentes de Menu
```jsx
<Menu>
<Menu.Logo>Image Logo</Menu.Logo>
<Menu.Item>Home</Menu.Item>
<Menu.Item>About</Menu.Item>
<Menu.Item>Services</Menu.Item>
<Menu.Item>Contact</Menu.Item>
<Menu.Login>Login</Menu.Login>
</Menu>
```
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)
<p align="center">Made with 💜</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Estilizacao/2.0.Tailwindcss.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
```
<p align="center">
<img
src="../../assets/estilizacao/Tailwind-ex1.png"
alt="resultado do código acima"
>
</p>
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.
<p align="center">
<img
src="../../assets/estilizacao/Tailwind-IntelliSense.png"
alt="imagem do tailwind IntelliSense"
>
</p>
<p align="center">
<img
src="../../assets/estilizacao/Tailwind-IntelliSense-ex1.png"
alt=""
>
</p>
---
### 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".
<p align="center">
<img
src="../../assets/estilizacao/Tailwind-fold.png"
alt=""
>
</p>
<p style="display: flex; flex-direction: row; align: center" >
<img
src="../../assets/estilizacao/Tailwind-fold-ex1.png"
alt=""
>
<img
src="../../assets/estilizacao/Tailwind-fold-ex2.png"
alt=""
>
</p>
---
### Tailwind Sort Class
Extensão para padronizar a ordem das estilizações na className.
<p align="center">
<a href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank">
<img
src="../../assets/estilizacao/Tailwind-Sort.png"
alt=""
>
</a>
</p>
<p align="center">
<img
src="../../assets/estilizacao/Tailwind-Sort-ex1.png"
alt=""
>
</p>
---
# 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.
---
<p align="center">Made with 💜</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Estilizacao/3.0.CSS-in-JS.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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?
<p align="center">
<a href="https://2019.stateofcss.com/technologies/css-in-js/" target="_blank">
<img src="../../assets/estilizacao/css-in-js-popularidade.png">
</a>
</p>
| 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 = <button className={styles.error}>Error Button</button>;
```
## 👩🎤 [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(
<div
className={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}
>
Hover to change color.
</div>
)
```
### 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(
<div
css={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}
>
Hover to change color.
</div>
)
```
##### 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(<Button>This my button component.</Button>)
```
---
## 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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
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(
<Wrapper>
<Title>Hello World!</Title>
</Wrapper>
);
```
> 🔥 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(
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
```
### 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(
<div>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>
);
```
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
<Button as='a' href='/'>
Link com estilos de Button
</Button>
```
> 📚 **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; // <Thing> quando passamos o mouse
}
& ~ & {
background: tomato; // <Thing> como irmão de <Thing>, mas talvez não diretamente adjacente
}
& + & {
background: lime; // <Thing> adjacente a <Thing>
}
&.something {
background: orange; // <Thing> tagueado com uma classe CSS adicional ".something"
}
.something-else & {
border: 1px solid; // <Thing> dentro de outro elemento nomeado ".something-else"
}
`;
render(
<React.Fragment>
<Thing>Hello world!</Thing>
<Thing>How ya doing?</Thing>
<Thing className='something'>The sun is shining...</Thing>
<div>Pretty nice day today.</div>
<Thing>Don't you think?</Thing>
<div className='something-else'>
<Thing>Splendid.</Thing>
</div>
</React.Fragment>
);
```
### 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(
<div>
<Input placeholder='Um input pequeno' />
<br />
<Input placeholder='input maior' size='2em' />
</div>
);
```
### 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(
<Rotate> < 💅🏾 > </Rotate>
);
```
> ⚠️ 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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Ferramentas de build/1-npm-yarn.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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:
<img align="center" src="/assets/npm-start-react.jpeg" alt="" width="50%">
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.
<img align="center" src="/assets/error-npm.jpg" alt="" width="50%">
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).
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Ferramentas de build/1.1-O-que-são-dependências.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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).
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Ferramentas de build/2-Webpack.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
<p align="center">
<img src="../../assets/webpack-babel.jpeg">
</p>
# 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack React Example</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
```
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(<h1>Hello World</h1>, 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(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
```
```html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run 'npm start' or 'yarn start'.
To create a production bundle, use 'npm run build' or 'yarn build'.
-->
</body>
</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)
<br>
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Ferramentas de build/3-Vite.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
<p align="center">
<img src="../../assets/vite.png" style="width: 200px">
</p>
# 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)
<br>
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/1-Introducao.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/2-O que e React.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/2.1-iniciando um projeto react.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 <nome-do-projeto>
```
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/3-JSX e Babel.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 = <h1>Olá, membro He4rt!!</h1>;
```
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.
<img align="center" src="/assets/tirinha-babel.jpg" width="100%">
[Ir para Próxima Seção](./4-Componentizacao.md)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/4-Componentizacao.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 <button onClick={() => alert("Botão clicado")}>Clique aqui</button>;
}
```
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 (
<div>
<img src="usuario.png" alt="Fulano" />
<section>
<strong>Mike</strong>
<p>Yew, it gives you total control over how you structure your app and date flow.</p>
</section>
</div>
);
}
```
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 <button onClick={() => alert("Botão clicado")}>Clique aqui</button>;
}
function Comment() {
return (
<div>
<img src="usuario.png" alt="Fulano" />
<section>
<strong>Mike</strong>
<p>Yew, it gives you total control over how you structure your app and date flow.</p>
</section>
</div>
);
}
function ComposedComponent() {
return (
<div>
<h1>Meus comentários</h1>
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
<Button />
</div>
);
}
```
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/4.1-FormasDeDeclarar.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<div>
<h1> Renderizando um componente de classe </h1>
</div>
);
}
}
```
## 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 (
<div>
<h1> Meu componente de função </h1>
</div>
);
}
```
## 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 (
<div>
<h1> Componente es6 </h1>
</div>
);
};
// Ou
const ComponenteB = () => (
<div>
<h1>Componente es6 2</h1>
</div>
);
```
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**. <br/> 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?" <br/>
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. <br/>
**PERAI** <br/>
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/4.2-Propriedades.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# Propriedades
Nesse capitulo você irá aprender o que são **Propriedades** nos componentes React. <br/>
**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
<input type="text" class="minha-classe" />
```
No React também é possível que nossos componentes façam o mesmo:
```js
const elemento = <ComponenteComProps name="React4noobs">
```
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(
<div>
<h1>{props.title}</h1>
<h2>{props.subtitle} </h2>
</div>
)
}
// Nosso componente podee receber as propriedades "title" e "subtitle".
function Page(){
return(
<div>
<h1> Meus posts </h1>
<ComponenteComProps title="Meu primeiro titulo" subtitle="Meu primeiro subtitulo">
</div>
)
}
```
## 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(
<div>
<h1>{this.props.title}</h1>
<h2>{this.props.subtitle} </h2>
</div>
)
}
}
// Nosso componente podee receber as propriedades "title" e "subtitle".
class Page extends React.Component{
render(){
return(
<div>
<h1> Meus posts </h1>
<ComponenteComProps title="Meu primeiro titulo" subtitle="Meu primeiro subtitulo">
</div>
)
}
}
```
## 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 <div>{props.children}</div>;
}
function Page() {
return (
<ComponenteCaixa>
<h1> titulo </h1>
<h1> titulo </h1>
<h1> titulo </h1>
<h1> titulo </h1>
<h1> titulo </h1>
</ComponenteCaixa>
);
}
// 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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/5-Estados.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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.
<p>Esse também é um dos motivos do React ser <strong>one way databinding</strong> (Significa que ele observa as mudanças por apenas um caminho para então atualizar a arvore de elementos(DOM)).</p>
Vamos pra mais um exemplo:
<p>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 é.</p>
## 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 (
<div>
<h1> Contador: {this.state.counter}</h1>
<span>
</div>
)
}
}
```
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 (
<div>
<h1> Contador: {this.state.counter}</h1>
<button onClick={handlePlusCounter}>+</button>
<button onClick={handleMinusCounter}>-</button>
<span>
</div>
)
}
}
```
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/6-Ciclo-de-vida.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<div>
<h1>{this.state.name}</h1>
<h2>{this.state.birthday}</h2>
</div>
);
}
}
```
ATENÇÃO!
Essa é uma parte do ciclo quase não utilizada, pois existem diversos problemas. Atualmente no React é recomendando o usar ocomponentDidMount.
<br/>
- **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.
<br/>
- **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 (
<div>
<h1>{this.state.name}</h1>
<h2>{this.state.birthday}</h2>
</div>
);
}
}
```
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:
<br/>
- **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 (
<div>
<h1>{this.state.name}</h1>
<h2>{this.state.birthday}</h2>
</div>
);
}
}
```
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.**
<br/>
- **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.
<br/>
- **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 (
<div>
<h1>{this.state.name}</h1>
<h2>{this.state.birthday}</h2>
</div>
);
}
}
```
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/7-Manipulando Eventos.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 HTML -->
<button onclick="searchUsers()">Pesquisar usuários</button>
<!-- Exemplo REACT -->
<button onClick="{searchUsers}">Pesquisar usuários</button>
```
Exemplo 2:
```html
<!-- HTML -->
<form onsubmit="handleSubmit(); return false">
<input type="text" name="nome" id="nome" placeholder="Digite seu nome" />
<button type="submit">Enviar</button>
</form>
```
```jsx
// React
function Form() {
function handleSubmit(event) {
event.preventDefault();
console.log("funfo");
}
return (
<form onSubmit={handleSubmit}>
<input type="text" name="nome" id="nome" placeholder="Digite seu nome" />
<button type="submit">Enviar </button>
</form>
);
// ou
return (
<form onSubmit={(event) => handleSubmit(event)}>
<input type="text" name="nome" id="nome" placeholder="Digite seu nome" />
<button type="submit">Enviar </button>
</form>
);
}
```
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 (
<form onSubmit={(event) => handleSubmit(event)}>
<input type="text" name="nome" id="nome" placeholder="Digite seu nome" />
<button type="submit">Enviar </button>
</form>
);
}
```
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 (
<>
<input
type="text"
name="text"
value={text}
onChange={handleChange}
></input>
</>
);
}
```
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.
<form onSubmit={(event) => handleSubmit(event, id)}>
<input type="text" name="nome" id="nome" placeholder="Digite seu nome" />
<button type="submit">Enviar </button>
</form>
);
}
```
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)
<p align="center">Made with :purple_heart:</p>
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8-React Hooks.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8.1-useState.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<div>
<h1>{clicks}</h1>
{/* A função 'setClicks' é usada para mudar valor de 'clicks' */}
<button onClick={() => setClicks((oldState) => oldState + 1)}>
Clique Aqui!
</button>
</div>
);
}
```
```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 (
<div>
<h1>{clicks}</h1>
Diferença:
<input
type="number"
value={valorInput}
onChange={(e) => setValorInput(e.target.value)}
/>
<br /> {/* Quebra de linha entre o input e o botão */}
<button onClick={handleButton}>Clique Aqui!</button>
</div>
);
}
```
### 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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8.2-useEffect.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<div>
<h1>{clicks}</h1>
<button onClick={() => setClicks(oldState => oldState + 1)}>
Clique Aqui!
</button>
</div>
);
}
```
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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8.3-useContext.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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'}
<UserContext.Provider value={user}>
<App />
</UserContext.Provider>
```
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 <div>Olá, {user.name} </div>;
);
```
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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8.4-useRef.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 <input/>
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 (
<div>
{/* Quando esse elemento for renderizado atualizará a variável com a sua referência */}
<input ref={inputRef} placeholder='Digite seu Email' />
<button onClick={handleContinue}>Continuar</button>
</div>
);
}
```
[Ir para a próxima seção](./8.5-useReducer.md)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8.5-useReducer.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<div>
{/*
Definimos o valor padrão do input e adicionamos
um dispatch para atualizar o valor
*/}
<input value={inputState.value} onChange={
(e) => dispatch({type: 'change', value: e.target.value}
)} />
<p>{inputState.error}</p>
</div>
);
}
```
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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8.6-useMemo.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<ul>
{filteredData.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/8.7-useCallback.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<div className={theme}>
<ShippingForm onSubmit={handleSubmit} />
</div>
)
}
```
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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/9-React Error Boundaries.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 `<Counter />`, 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 <h1>He4rt User: {user}</h1>
})
} catch {
return <h1>Deu ruim</h1>
}
}
const App = () => {
return <Counter />
}
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 <h1>He4rt User: {user}</h1>
})
}
const App = () => {
try{
return <Counter />
} catch(){
return <h1>Deu ruim</h1>
}
}
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 <p>Desculpe, algo deu errado.</p>
}
// 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 <div>Conteúdo do componente com erro</div>
}
}
// Componente pai usando o ErrorBoundary
class App extends Component {
render() {
return (
<ErrorBoundary>
<div>
<h1>Minha Aplicação</h1>
<ComponenteComErro />
</div>
</ErrorBoundary>
)
}
}
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 <h1>He4rt User: {user}</h1>
})
}
const ErrorHandler = () => {
return <h1>Eita, deu ruim! D:</h1>
}
const App = () => {
return (
<ErrorBoundary FallbackComponent={ErrorHandler}>
<Counter />
</ErrorBoundary>
)
}
export default App
```
Resultado:
Terminal:
Veja que criamos um componente fallback para exibir caso ocorra algum erro em qualquer componente que está encapsulado no `<ErrorBoundary />`, onde diferente do `try...catch`, conseguimos fazer uma tratativa de erro global. Então se tivessemos vários componentes encapsulados no `<ErrorBoundary />` 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 <h1>He4rt User: {user}</h1>
})
}
const ErrorHandler = () => {
return <h1>Eita, deu ruim! D:</h1>
}
const App = () => {
return (
<ErrorBoundary
FallbackComponent={ErrorHandler}
onError={(arg1, arg2) => {
console.log({ arg1, arg2 })
}}
>
<Counter />
</ErrorBoundary>
)
}
export default App
```
Perceba que adicionamos uma `prop` `onError` no `<ErrorBoundary />`, 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 <h1>He4rt User: {user}</h1>
})
}
const ErrorHandler = () => {
return <h1>Eita, deu ruim! D:</h1>
}
const notifyError = () => {
// func para mandar notificação de erro para o sentry ou alguma outra plataforma de monitoramento
}
const App = () => {
return (
<ErrorBoundary
FallbackComponent={ErrorHandler}
onError={(arg1, arg2) => {
// Quando ocorre um erro não tratado, o React desmonta toda a tela.
console.log({ arg1, arg2 })
}}
>
<Counter />
</ErrorBoundary>
)
}
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 <h1>He4rt User: {user}</h1>
}
const ErrorFallback = ({ error, resetErrorBoundary }) => {
// Aqui, podemos registrar o erro para observabilidade
registrarErroParaObservabilidade(error)
return (
<div role="alert">
<p>Algo deu errado. Estamos trabalhando para resolver o problema!</p>
<button onClick={resetErrorBoundary}>Tentar novamente</button>
</div>
)
}
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 (
<ErrorBoundary
FallbackComponent={ErrorFallback}
onError={(error, info) => {
// 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)
}}
>
<Counter />
</ErrorBoundary>
)
}
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 <h1>He4rt User: {user}</h1>
}
const ErrorFallback = ({ error, resetErrorBoundary }) => {
return (
<div role="alert">
<p>Algo deu errado:</p>
<pre style={{ whiteSpace: 'normal' }}>{error.message}</pre>
<button onClick={resetErrorBoundary}>Tentar novamente</button>
</div>
)
}
const App = () => {
return (
<ErrorBoundary
FallbackComponent={ErrorFallback}
onError={(error, info) => {
// 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)
}}
>
<Counter />
</ErrorBoundary>
)
}
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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/Controlled-vs-uncontrolled-components.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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 (
<input
value={name}
onChange={event => 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 (
<input
value={name}
onChange={event => 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 (
<>
<button onClick={handleClick}>Ver valor do email</button>
<input
ref={emailInput}
/>
</>
)
}
```
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 (
<>
<button onClick={handleClick}>Ver valor do email</button>
<input
ref={emailInput}
+ defaultValue="he4rt@4noobs.com"
/>
</>
)
}
```
[Ir para a próxima seção](./Listas-no-react.md)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
================================================
FILE: docs/Iniciando com React/Listas-no-react.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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. <br/>
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 (
<ul>
{lista.map((item) => {
return <li>{item}</li>;
})}
</ul>
);
}
```
<p align="center">
<img src="../../assets/lists/lists-examples-1.png" alt="resultado do código acima"/>
</p>
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. <br/>
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 (
<ul>
{lista.map((item) => (<li>{item}</li>)}
</ul>
);
}
```
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:
<p align="center">
<img src="../../assets/lists/lists-examples-2.png" alt="resultado do código acima"/>
</p>
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 (
<ul>
{lista.map((item) => (<li key={item}>{item}</li>)}
</ul>
);
}
```
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` <br/>
- 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
<Componente key={name} name={name} />
```
# 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
<>
<div />
<div />
<div />
</>
```
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 (
<div>
{lista.map((item) => {
return (
<Fragment key={item.id}>
// Geralmente por Id`s serem propriedades únicas, é muito utilizado
como keys.
<span>{item.name}</span>
<span>{item.idade}</span>
</Fragment>
);
})}
</div>
);
}
```
# 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. <br/>
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)
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/footer-4noobs.svg" width="380">
</a>
</p>
``
================================================
FILE: docs/Iniciando com React/Refs.md
================================================
<p align="center">
<a href="https://github.com/he4rt/4noobs" target="_blank">
<img src="../../assets/global/header-4noobs.svg">
</a>
</p>
# 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
gitextract_q5zlpq2x/
├── README.md
└── docs/
├── Bibliotecas de utilidade/
│ ├── 1-Lodash.md
│ └── 2-Storybook.md
├── Cliente GraphQL/
│ ├── 1-Conceito.md
│ └── 1.1-Desmistificando-200.md
├── Cliente REST/
│ ├── 1-Fetch.md
│ └── 2-Axios.md
├── Controle de estado/
│ ├── 1-API-de-Contexto copy.md
│ ├── 2-Redux.md
│ └── 3-Zustand.md
├── Design Patterns/
│ └── 1-Compound Components.md
├── Estilizacao/
│ ├── 2.0.Tailwindcss.md
│ ├── 3.0.CSS-in-JS.md
│ └── 3.1-styled-components.md
├── Ferramentas de build/
│ ├── 1-npm-yarn.md
│ ├── 1.1-O-que-são-dependências.md
│ ├── 2-Webpack.md
│ └── 3-Vite.md
├── Iniciando com React/
│ ├── 1-Introducao.md
│ ├── 2-O que e React.md
│ ├── 2.1-iniciando um projeto react.md
│ ├── 3-JSX e Babel.md
│ ├── 4-Componentizacao.md
│ ├── 4.1-FormasDeDeclarar.md
│ ├── 4.2-Propriedades.md
│ ├── 5-Estados.md
│ ├── 6-Ciclo-de-vida.md
│ ├── 7-Manipulando Eventos.md
│ ├── 8-React Hooks.md
│ ├── 8.1-useState.md
│ ├── 8.2-useEffect.md
│ ├── 8.3-useContext.md
│ ├── 8.4-useRef.md
│ ├── 8.5-useReducer.md
│ ├── 8.6-useMemo.md
│ ├── 8.7-useCallback.md
│ ├── 9-React Error Boundaries.md
│ ├── Controlled-vs-uncontrolled-components.md
│ ├── Listas-no-react.md
│ ├── Refs.md
│ └── Renderizacao-condicional.md
├── Performance/
│ └── Lazy Loading em React e Nextjs.md
├── README.md
├── Renderizacao no Servidor/
│ └── 1-Nextjs.md
├── Roteamento/
│ ├── README.md
│ ├── React-Router/
│ │ ├── 1-Introducao.md
│ │ └── 2-Rotas-customizadas.md
│ └── TanStack-Router/
│ ├── 1-Introducao.md
│ ├── 1.1-Type-Safety.md
│ ├── 2-Rotas-customizadas.md
│ ├── 3-Layouts.md
│ ├── 4-Caching.md
│ └── 5-DevTools.md
├── Testes/
│ ├── 1-testes-unitarios.md
│ └── 2-testes-de-integracao.md
└── Verificadores de Tipo/
└── Typescript.md
Condensed preview — 56 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (308K chars).
[
{
"path": "README.md",
"chars": 3762,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Bibliotecas de utilidade/1-Lodash.md",
"chars": 10810,
"preview": "[](https://github.com/he4rt/4noobs)\n\n# _Lodash\n\n## O que é o Lodash\n\nPor"
},
{
"path": "docs/Bibliotecas de utilidade/2-Storybook.md",
"chars": 2795,
"preview": "[](https://github.com/he4rt/4noobs)\n\n# Storybook\n\n## O que é o Storybook"
},
{
"path": "docs/Cliente GraphQL/1-Conceito.md",
"chars": 8570,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Cliente GraphQL/1.1-Desmistificando-200.md",
"chars": 6166,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Cliente REST/1-Fetch.md",
"chars": 7122,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Cliente REST/2-Axios.md",
"chars": 4523,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Controle de estado/1-API-de-Contexto copy.md",
"chars": 6727,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Controle de estado/2-Redux.md",
"chars": 15914,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Controle de estado/3-Zustand.md",
"chars": 5694,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Design Patterns/1-Compound Components.md",
"chars": 6069,
"preview": "<p align=\"center\">\n<a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n<img src=\"../../assets/global/header-4noob"
},
{
"path": "docs/Estilizacao/2.0.Tailwindcss.md",
"chars": 5420,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Estilizacao/3.0.CSS-in-JS.md",
"chars": 11126,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Estilizacao/3.1-styled-components.md",
"chars": 7878,
"preview": "# Na prática com Styled Components\n\nEsse exemplo [está na documentação](https://styled-components.com/docs/basics#instal"
},
{
"path": "docs/Ferramentas de build/1-npm-yarn.md",
"chars": 3356,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Ferramentas de build/1.1-O-que-são-dependências.md",
"chars": 2200,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Ferramentas de build/2-Webpack.md",
"chars": 7247,
"preview": "<p align=\"center\">\n<a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n<img src=\"../../assets/global/header-4noob"
},
{
"path": "docs/Ferramentas de build/3-Vite.md",
"chars": 2347,
"preview": "<p align=\"center\">\n<a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n<img src=\"../../assets/global/header-4noob"
},
{
"path": "docs/Iniciando com React/1-Introducao.md",
"chars": 1067,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/2-O que e React.md",
"chars": 1341,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/2.1-iniciando um projeto react.md",
"chars": 2792,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/3-JSX e Babel.md",
"chars": 1458,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/4-Componentizacao.md",
"chars": 4432,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/4.1-FormasDeDeclarar.md",
"chars": 3733,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/4.2-Propriedades.md",
"chars": 3362,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/5-Estados.md",
"chars": 3964,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/6-Ciclo-de-vida.md",
"chars": 9398,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/7-Manipulando Eventos.md",
"chars": 5905,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8-React Hooks.md",
"chars": 1324,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8.1-useState.md",
"chars": 3319,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8.2-useEffect.md",
"chars": 2097,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8.3-useContext.md",
"chars": 1660,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8.4-useRef.md",
"chars": 2051,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8.5-useReducer.md",
"chars": 2153,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8.6-useMemo.md",
"chars": 1671,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/8.7-useCallback.md",
"chars": 1653,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/9-React Error Boundaries.md",
"chars": 13320,
"preview": "<p align=\"center\">\n<a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n<img src=\"../../assets/global/header-4noob"
},
{
"path": "docs/Iniciando com React/Controlled-vs-uncontrolled-components.md",
"chars": 2675,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/Listas-no-react.md",
"chars": 6111,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/Refs.md",
"chars": 10098,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Iniciando com React/Renderizacao-condicional.md",
"chars": 6651,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Performance/Lazy Loading em React e Nextjs.md",
"chars": 7192,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/README.md",
"chars": 5185,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../assets/global/header-4n"
},
{
"path": "docs/Renderizacao no Servidor/1-Nextjs.md",
"chars": 4963,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Roteamento/README.md",
"chars": 2021,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/React-Router/1-Introducao.md",
"chars": 7233,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/React-Router/2-Rotas-customizadas.md",
"chars": 7859,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/TanStack-Router/1-Introducao.md",
"chars": 7263,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/TanStack-Router/1.1-Type-Safety.md",
"chars": 2563,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/TanStack-Router/2-Rotas-customizadas.md",
"chars": 8013,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/TanStack-Router/3-Layouts.md",
"chars": 4799,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/TanStack-Router/4-Caching.md",
"chars": 1799,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Roteamento/TanStack-Router/5-DevTools.md",
"chars": 4133,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\" title=\"Clique para visualizar mais inform"
},
{
"path": "docs/Testes/1-testes-unitarios.md",
"chars": 6496,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Testes/2-testes-de-integracao.md",
"chars": 4703,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
},
{
"path": "docs/Verificadores de Tipo/Typescript.md",
"chars": 4776,
"preview": "<p align=\"center\">\n <a href=\"https://github.com/he4rt/4noobs\" target=\"_blank\">\n <img src=\"../../assets/global/header"
}
]
About this extraction
This page contains the full source code of the he4rt/react4noobs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 56 files (282.2 KB), approximately 74.3k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.