\n\n\n## Sobre o Projeto\n\nDesenvolvido 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.\n\n## Como Contribuir\n\nEncontrou 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`.\n\nAo 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 💜\n\n1. Faça um Fork do projeto\n2. Clone o projeto localmente em sua máquina\n3. Crie uma branch sempre que houver uma nova feature (`git checkout -b 'feature/loveReact'`)\n4. Faça seu Commit (`git commit -m 'adding some stuff'`)\n5. Faça Push no seu Branch (`git push origin 'feature/loveReact'`)\n6. Abra um Pull Request e vem pro abraço!\n\n**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).\n\n## Idealizadora do projeto\n\nCriado 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 😃\n\nAtualmente 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.\n\n## Colaboradores\n\n\n \n\n\n
\n"
},
{
"path": "docs/Bibliotecas de utilidade/1-Lodash.md",
"content": "[](https://github.com/he4rt/4noobs)\n\n# _Lodash\n\n## O que é o Lodash\n\nPor mais que seja divertido implementar do zero aquela função cheia de malabarismos\nque demonstram todo seu conhecimento em ciência da computação, às vezes a gente\nprecisa de rapidez, eficiência, performance e modularidade o mais rápido possível.\nPara resolver este problema, eu lhes apresento: [Lodash](https://lodash.com).\n\nLodash é uma biblioteca Javascript que possui várias funções que são frequentemente\nutilizadas por quem desenvolve software com JS.\n\n## Instalando o Lodash\n\nA melhor forma instalar o Lodash é usando um gerenciador de pacotes.\n\nNa pasta do seu projeto, utilize um dos dois comandos (conforme o gerenciador de\npacotes que você está utilizando):\n\n```bash\nnpm install --save lodash\n# ou\nyarn add lodash \n```\n\nNo seu código, dentro do arquivo desejado, você pode importar o lodash:\n\n```js\nimport _ from \"lodash\"\n```\n\n**Nota**: usar `_` para nomear o pacote é apenas uma convenção da comunidade que\nutiliza o lodash. Você pode utilizar o nome que preferir.\n\n## Categorias\n\nO Lodash tem 13 categorias de funções:\n\n- Array\n- Collection\n- Date\n- Function\n- Lang\n- Math;\n- Number;\n- Object;\n- Seq;\n- String;\n- Util;\n- Properties;\n- Methods.\n\n## Algumas funções\n\nUtilizar o lodash é super simples, pois funciona como qualquer outro objeto em\njavascript. Nesse artigo, utilizaremos as funções mais conhecidas, mas você pode\nchecar a [documentação](https://lodash.com/docs/4.17.15) para mais exemplos.\n\n---\n\n### Contexto\n\nVamos supor que você acaba de ser contratado e ainda está conhecendo o sistema no\nqual vai trabalhar. As pessoas estão te passando algumas pequenas tasks.\n\nExiste uma tabela na interface da aplicação que está sendo desenvolvida, e enviado\npara esta tabela, nós temos o seguinte [array de\nobjetos](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/):\n\n```js\nconst devDepartment = [\n { id: 1, firstName: \"kendrick\", lastName: \"lamar\", salary: 4500, age: 22, level: \"jr\" },\n { id: 2, firstName: \"ada\", lastName: \"lovelace\", salary: 12000, age: 59, level: \"sr\" },\n { id: 3, firstName: \"childish\", lastName: \"gambino\", salary: 4800, age: 49, level: \"jr\" },\n { id: 4, firstName: \"cardi\", lastName: \"b\", salary: 9700, age: 32, level: \"pl\" },\n { id: 5, firstName: \"david\", lastName: \"glover\", salary: 10000, age: 31, level: \"pl\" },\n { id: 7, firstName: \"leonardo\", lastName: \"daVinci\", salary: 1200, age: 31, level: \"jr\" },\n { id: 4, firstName: \"cardi\", lastName: \"b\", salary: 5700, age: 32, level: \"jr\" },\n { id: 6, firstName: \"chico\", lastName: \"science\", salary: 15000, age: 46, level: \"sr\" },\n];\n```\n\nTe passaram algumas tasks para manipular apenas o array enquanto fazem seu onboarding.\n\nAgora chega de papinho e vamos botar a mão na massa!\n\n### capitalize\n\nComo você pode notar, todos os nomes estão com a primeira letra minúscula. É legal\nfazer isso para fins de normalização da informação, mas não queremos mostrar assim\npara o usuário.\n\nEntão sua primeira task é deixar a primeira letra de todos os nomes em maiúsculo.\n\nFelizmente, com o lodash, isso ficar mais simples do que já é:\n\n```js\nconst capitalizedDevDepartment = devDepartment.map((worker) => ({\n ...worker,\n firstName: _.capitalize(worker.firstName),\n lastName: _.capitalize(worker.lastName)\n}));\n```\n\nNo trecho de código acima nós usamos o map para gerar uma nova lista! Aqui\n[iteramos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration)\nsobre os elementos da lista `devDepartment`, e para cada elemento, nós adicionamos a\ninformação já existente do funcionário usando o [spread\noperator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)\ne sobrescrevemos o primeiro e segundo nome pelo retorno da função `capitalize()`\naplicada aos valores antigos.\n\nPareceu complicado na explicação, mas se você não entendeu, olhe o código novamente\ne pense em cada operação que ele está executando.\n\nPronto! Resolvido. Temos todos os nomes começando com letra maiúscula. Nosso lista está\nassim:\n\n```js\n[\n { id: 2, firstName: \"Ada\", lastName: \"Lovelace\", salary: 12000, age: 59, level: \"sr\" },\n { id: 5, firstName: \"David\", lastName: \"Glover\", salary: 10000, age: 31, level: \"pl\" },\n { id: 4, firstName: \"Cardi\", lastName: \"B\", salary: 9700, age: 32, level: \"pl\" },\n { id: 4, firstName: \"Cardi\", lastName: \"B\", salary: 9700, age: 32, level: \"pl\" },\n { id: 3, firstName: \"Childish\", lastName: \"Gambino\", salary: 4800, age: 49, level: \"jr\" },\n { id: 7, firstName: \"Leonardo\", lastName: \"DaVinci\", salary: 1200, age: 31, level: \"jr\" },\n { id: 1, firstName: \"Kendrick\", lastName: \"Lamar\", salary: 4500, age: 22, level: \"jr\" },\n { id: 6, firstName: \"Chico\", lastName: \"Science\", salary: 15000, age: 46, level: \"sr\" },\n];\n```\n\nPode mover o card dessa task e enviar o pull request. Vamos para a próxima!\n\n---\n\n### orderBy\n\nAgora você precisa implementar um filtro de ordenação na lista de funcionários. O\nusuário deve ser capaz de **ordenar os funcionários pelo salário.**\n\nA lodash nos oferece o `orderBy` para resolver esse problema:\n\n```js\nconst workersOrderedBySalary = _.orderBy(capitalizedDevDepartment, 'salary', 'desc')\n```\n\nNo snippet acima, nós estamos ordenando a lista `capitalizedDevDepartment` de forma\ndecrescente, utilizando a chave `salary` como parêmetro de ordenação. Então nós\narmazenamos o [retorno da função](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Return_values) na constante workersOrderedBySalary.\n\nE dessa forma você consegue a lista anterior ordenada do maior salário para o menor:\n\n```js\n[\n { id: 6, firstName: \"Chico\", lastName: \"Science\", salary: 15000, age: 46, level: \"sr\" },\n { id: 2, firstName: \"Ada\", lastName: \"Lovelace\", salary: 12000, age: 59, level: \"sr\" },\n { id: 5, firstName: \"David\", lastName: \"Glover\", salary: 10000, age: 31, level: \"pl\" },\n { id: 4, firstName: \"Cardi\", lastName: \"B\", salary: 9700, age: 32, level: \"pl\" },\n { id: 4, firstName: \"Cardi\", lastName: \"B\", salary: 9700, age: 32, level: \"pl\" },\n { id: 3, firstName: \"Childish\", lastName: \"Gambino\", salary: 4800, age: 49, level: \"jr\" },\n { id: 1, firstName: \"Kendrick\", lastName: \"Lamar\", salary: 4500, age: 22, level: \"jr\" },\n { id: 7, firstName: \"Leonardo\", lastName: \"DaVinci\", salary: 1200, age: 31, level: \"jr\" },\n];\n```\n\nJá pode rodar a pipeline de produção, galera. Essa aqui foi fácil!\n\n---\n\n### uniqWith & isEqual\n\nAo subir o código para produção, o cliente nota um problema: ele só tem 7 funcionários\nnesse departamento, mas estão aparecento 8. Você já deve ter notado o problema, certo?\nO funcionário de ID 4 e firstName \"Cardi\", está duplicado!\n\nEsse é um problema simples de resolver, mas com o lodash fica ainda mais fácil. **Você\nvai combinar duas funções do lodash: `uniqWith` e `isEqual`**.\n\n```js\nconst normalizedWorkersList = _.uniqWith(workersOrderedBySalary, _.isEqual)\n```\n\nNessa curtia linha de código o Lodash está trabalhando bastante. Em resumo, a função\n`uniqWith` faz a comparação entre dois elementos de cada vez, utilizando um\n**comparador**, que no nosso caso é a função `isEqual()`. A função `isEqual` será\ninvocada com dois itens como argumento, o elemento da vez (othVal), e os outros\nelementos que serão comparados(arrVal). Assim, todos os valores são comparados com\ntodos os outros valores, livrando a lista de toda duplicação.\n\nTá vendo como o Lodash abstrai bastante a complexidade dessas operações?\n\nFoi tão fácil que nem parece que a gente tá trabalhando. Agora nosso array de objetos\nestá assim:\n\n```js\n[\n { id: 6, firstName: \"Chico\", lastName: \"Science\", salary: 15000, age: 46, level: \"sr\" },\n { id: 2, firstName: \"Ada\", lastName: \"Lovelace\", salary: 12000, age: 59, level: \"sr\" },\n { id: 5, firstName: \"David\", lastName: \"Glover\", salary: 10000, age: 31, level: \"pl\" },\n { id: 4, firstName: \"Cardi\", lastName: \"B\", salary: 9700, age: 32, level: \"pl\" },\n { id: 3, firstName: \"Childish\", lastName: \"Gambino\", salary: 4800, age: 49, level: \"jr\" },\n { id: 1, firstName: \"Kendrick\", lastName: \"Lamar\", salary: 4500, age: 22, level: \"jr\" },\n { id: 7, firstName: \"Leonardo\", lastName: \"DaVinci\", salary: 1200, age: 31, level: \"jr\" },\n];\n```\n\nExistem formas até mais fáceis de resolver esse problema, como, por exemplo, utilizando\na função `uniqBy` do lodash. Mas eu quis mostrar esse exemplo para demonstrar que você\npode compor funções do lodash à vontade.\n\nQue tal tentar resolver esse mesmo problema utilizando o uniqBy? Cheque a\n[documentação](https://lodash.com/docs/4.17.15#uniqBy).\n\n---\n\n### groupBy\n\nOutra feature que o cliente te pediu, é que o usuário possa agrupar os funcionários\npelo seu nível. Como sempre, a Lodash deixa essa tarefa mamão com açúcar. Vamos ao\nexemplo:\n\n```js\nconst workersGroupedByLevel = _.groupBy(normalizedWorkersList, 'level')\n```\n\nAqui nós indicamos que queremos gerar um objeto a partir da lista `normalizedWorkersList`\ne agrupar os elementos a partir da key `level`.\n\nCom apenas uma linha, nós temos todos os funcionários agrupados pelo nível de senioridade.\n\nNosso array de funcionários agora é um objeto, e está assim:\n\n```js\n{\n sr: [\n { id: 6, firstName: \"Chico\", lastName: \"Science\", salary: 15000, age: 46, level: \"sr\" },\n { id: 2, firstName: \"Ada\", lastName: \"Lovelace\", salary: 12000, age: 59, level: \"sr\" },\n ],\n pl: [\n { id: 5, firstName: \"David\", lastName: \"Glover\", salary: 10000, age: 31, level: \"pl\" },\n { id: 4, firstName: \"Cardi\", lastName: \"B\", salary: 9700, age: 32, level: \"pl\" },\n ],\n jr: [\n { id: 3, firstName: \"Childish\", lastName: \"Gambino\", salary: 4800, age: 49, level: \"jr\" },\n { id: 1, firstName: \"Kendrick\", lastName: \"Lamar\", salary: 4500, age: 22, level: \"jr\" },\n { id: 7, firstName: \"Leonardo\", lastName: \"DaVinci\", salary: 1200, age: 31, level: \"jr\" },\n ],\n}\n```\n\nAgora pode pedir um aumento!\n\n---\n\n## Conclusão\n\nSe você chegou até aqui, você já tem ótimos exemplos e uma boa justificativa para utilizar\no Lodash. Muitas vezes as abstrações criadas pelo Lodash não serão o bastante para o caso\nque você precisa tratar, mas certamente esses momentos serão raros. É uma biblioteca que\ncasa muito bem com o jeito funcional de pensar que o React trás enquanto framework.\n\nUm exercício muito interessante de fazer é **tentar implementar todas essas funções\ndo zero**. Isso vai te dar uma boa ideia da complexidade que o lodash resolve.\n\nAlém disso, tentar ler o código que eles produzem é uma ótima forma de aprender\ntambém, este é o link para o repositório open source deles:\n[Lodash](https://github.com/lodash/lodash).\n\nBons estudos!\n\n[](https://github.com/he4rt/4noobs)"
},
{
"path": "docs/Bibliotecas de utilidade/2-Storybook.md",
"content": "[](https://github.com/he4rt/4noobs)\n\n# Storybook\n\n## O que é o Storybook\n\n[**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.\n\n### Design System\n\nQuando alinhado a um Design System, o Storybook potencializa a criação de interfaces consistentes e reutilizáveis.\n\nEssa 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.\n\nAqui vai um exemplo:\n\n- [Atomium](https://github.com/juntossomosmais/atomium)\n\n- [Atomium StoryBook](https://juntossomosmais.github.io/atomium/?path=/docs/introduction--docs)\n\n## Instalando o Storybook\n\n```bash\nnpx storybook@latest init\n# ou\nyarn dlx storybook@latest init\n```\n\nO comando acima fará as seguintes alterações em seu ambiente local:\n\n📦 Instalará as dependências necessárias. \n🛠 Configurará os scripts necessários para executar e construir o Storybook. \n🛠 Adicionará a configuração padrão do Storybook. \n📝 Adicionará alguns exemplos de histórias para você começar.\n\n## Iniciar o Storybook\n\nO 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.\n\n```bash\nnpm run storybook\n# ou\nyarn storybook\n```\n\n\n\n## Renderizar estilos de componentes\n\nO 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.\n\n- [Tailwind](https://storybook.js.org/recipes/tailwindcss/)\n- [Material UI](https://storybook.js.org/recipes/@mui/material/)\n- [Vuetify](https://storybook.js.org/recipes/vuetify/)\n- [Styled Components](https://storybook.js.org/recipes/styled-components/)\n- [Emotion](https://storybook.js.org/recipes/@emotion/styled/)\n- [Sass](https://storybook.js.org/recipes/sass/)\n- [Bootstrap](https://storybook.js.org/recipes/bootstrap/)\n- [Less](https://storybook.js.org/recipes/less/)\n- [Vanilla-extract](https://storybook.js.org/recipes/@vanilla-extract/css/)\n"
},
{
"path": "docs/Cliente GraphQL/1-Conceito.md",
"content": "
\n\n# O que é o GraphQL?\n\n[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.\n\n# O conceito do GraphQL\n\n## História\n\nPor que foi criado?\n\n- Uma forma diferente de entender e manipular os dados.\n\n Para explicar isso, vamos tentar entender a cor azul.\n Imagina que você tem uma tabela \"cores\" com a cor azul, vermelha, amarela, etc.\n Agora imagina que está tentando entender o que ela significa no seu conjunto de dados.\n\n Se você tem um database sobre carros, a cor azul simboliza a cor do carro.\n 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).\n\n 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.\n\n Será necessário ter mais dados juntos com a cor azul para ser capaz de entender o que ela significa.\n\n- Qual o problema que o facebook queria resolver?\n\n 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.\n\n Era necessario entender por exemplo, pessoas que gostam da cor preta, também gostam de heavy metal?\n\n Eu posso oferecer uma propaganda de chinelo para uma pessoa que estar saindo de férias para florianópolis?\n\n Mas como fazer isso quando você usa um padrão de API que isola os dados do seu sistema?\n\n Como fazer isso quando você tem muitos dados?\n\n Como fazer isso em pequenas requisições?\n\nVamos agora tentar melhorar a compreensão do [GraphQL](2), já que ele é muito amplo, vou lhe apresentar alguns exemplos.\n\n## Exemplos\n\nEm 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)?\n\n### Rest\n\n- **GET** `/user/`\n\n- **GET** `/post//stories`\n\n- **GET** `/post//posts`\n\n_Exemplo de consulta em REST_\n\n### GraphQL\n\nAgora vamos ver como o [GraphQL](2) faria a manipulação dos mesmos dados.\nVocê envia apenas uma consulta que inclui todos os dados requisitados e o servidor responde com um objeto JSON com eles.\n\n```graphql\nquery {\n User(id: 1234) {\n name\n posts {\n title\n media {\n url\n }\n likes {\n totalCount\n }\n }\n stories {\n media {\n url\n }\n }\n }\n}\n```\n\n_Exemplo de consulta em GraphQL_\n\n## Benefício da modelagem de dados distribuída\n\nAo 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.\n\nAssim, tanto o back-end, quanto o front-end estão ciente da estrutura de dados definidas envidas nas comunicações.\n\nVamos exemplificar para entender melhor esse conceito.\n\n### Modelando o usuário\n\n```graphql\ntype User {\n id: ID!\n name: String!\n posts: [Post]\n stories: [Story]\n}\n```\n\nOq significa esse modelo acima definido?\n\nTemos uma fonte de dados chamada User, ao ser acessada ela permite que você receba como resposta id, name, posts, stories.\nVamos tentar entender agora o campo name.\n\nO tipo do campo `name` é string?\n\n- `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.\n\nPara entender melhor precisamos olhar agora para o compo `posts`.\n\nO tipo do campo `posts` é um array? Ou um `Post`? Mas que tipo é `Post`? string? int? boolean?\n\nNã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.\n\n```graphql\ntype Post {\n id: ID!\n title: String!\n media: Media\n}\n```\n\nAgora 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.\n\nA todas essas definições de dados, a todas essas modelagens, chamamos `typedefs` definições de tipos.\n\nATENÇÃO! _Os tipos no graphql nada tem que ver com \"tipagem de dados\"_\n\n### Definindo resolução de tipos\n\nOs `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.\n\nÉ normalmente definido por um objeto que nele tem suas funções que ao serem executadas retornam o modelo de dados que o cliente quer.\n\n- Exemplo:\n\n```javascript\nconst resolvers = {\n User: {\n id: () => '1'\n name: () => 'User',\n posts: () => [],\n stories: () => []\n },\n Post: {\n id: () => '1',\n title: () => 'Post',\n media: () => {}\n }\n}\n```\n\nEste é um exemplo `aceitável` de resolvers para um graphql, mas não é o ideal.\n\nO 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.\n\nPara fazermos algo mais interessante, vamos fazer um resolver um user por uma querie.\n\nPrimeiro precisamos modelar essa query!\n\n```graphql\ntype Query {\n User(id: ID): User\n}\n```\n\nCriamos 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:\n\n```javascript\nconst resolvers = {\n Query: {\n User: () => ({\n id: '1',\n name: 'User',\n posts: [{ title: 'Post1' }, { title: 'Post2' }],\n stories: [],\n }),\n },\n};\n```\n\nTemos aqui um objeto resolver, que resolve Query, temos um item User que é uma função que retorna um objeto User.\n\nCom isso podemos realizar no cliente uma query como:\n\n```graphql\nquery {\n User(id: 1) {\n id\n name\n posts {\n title\n }\n }\n}\n```\n\nE com isso podemos ter como resposta:\n\n```json\n{\n \"data\": {\n \"User\": {\n \"id\": 1,\n \"name\": \"User\",\n \"posts\": [{ \"title\": \"Post1\" }, { \"title\": \"Post2\" }]\n }\n }\n}\n```\n\n## Vantagens\n\n- Rápido.\n- Sem problemas de over-fetching e under-fetching.\n- Fortemente tipada.\n- Entrega somente dos dados requisitados, barato para o cliente e servidor. (Menor e rápido)\n- Única versão, rota e dados totalmente desacoplados.\n- Documentação automática.\n\n## Desvantagens\n\n- Curva de aprendizado, pois você terá que aprender um novo conceito.\n- Armazenamento em cache, mas pode ser desligado.\n- Rate Limiting\n\nDe 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!\n\n## Conclusão\n\n_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)**!\n\n
\n\n# Desmistificando o retorno 200 do Graphql\n\nPrecisamos fazer uma viagem pela história do HTML, antes de desmistificar o retorno do Graphql.\n\nO década é de 1990, e o http (Hypertext Transfer Protocol) começa a ser difundido mundialmente.\n\nE 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.\n\n## O procotolo HTTP\n\n### Protocolo\n\nPrimeiro precisamos enteder o que é um protocolo.\n\nProtocolo é uma camada de abstração que define um mecanismo de comunicação entre dois pontos.\n\nImagina que você acaba de conhecer uma pessoa na rua, você olha para ela e diz: \"Olá!\"\n\nVocê acabou de usar um protocolo para comunicar com a pessoa. Se ela estiver ciente do protocolo ela provavelmente vai reconhecer a mensagem e responder.\n\nDa mesma forma funcionam os computadores, existem vários protocolos para executar diferentes tarefas.\n\n### HTTP\n\nO protocolo utilizado para buscar recursos na web é o http (Hypertext Transfer Protocol).\n\nVamos pegar um recurso como exemplo:\n\nhttp://api.sotops.com.br/images/nudedodaniel.jpg\n\nE quebrá-lo em partes:\n\nhttp://: Protocolo \napi: Maquina no servidor \nsotops: Servidor \ncom: nameServer comercial \nbr: nameServer brasileiro \nimages: Pasta no servidor \nnudedodaniel.jpg: arquivo no servidor \n\n\nQuando você acessa essa página, o browser irá buscar o recurso e enviará uma requisição para o servidor.\n\nPrimeiro procura por um servidor que seja responsável por recursos no br e lá pergunta sobre onde está o responsável por recursos comerciais.\n\nAo encontrar os recursos comerciais, pergunta onde está o servidor sotops.\n\nAo encontrar o servidor sotops, pergunta qual maquina no servidor é responsável pela api.\n\nAo encontrar a máquina api, requisita o arquivo nudedodaniel.jpg na pasta images.\n\nDentro 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.\n\nAgora imagina que algums erros podem ocorrer nessa requisição, como por exemplo:\n\n- 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`.\n\n- 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`.\n\n- Vamos supor que ocorre um erro no servidor, entao o protocolo retorna um código de resposta `HTTP 500`.\n\n- Vamos supor que tudo ocorre bem e você consegue acessar o recurso. Então o protocolo retorna um código de resposta `HTTP 200`.\n\nPor 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.\n\nE 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.\n\nE 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.\n\nQuando 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.\n\nSe 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.\n\nQuando você recebe uma pizza de calabresa na sua casa com peperoni, a responsabilidade é do entregador ou do restaurante?\n\nO 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.\n\nQuando 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.\n\nE por que isso é importante para o graphql?\n\n\n## Requisições graphql\n\nVamos usar como exemplo a requisição de usuário que temos no capítulo de conceito.\n\nMas 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.\n\n```graphql\nquery{\n q1:user(id: 1){\n id\n name\n post {\n id\n title\n }\n }\n q2: user(id: 2){\n id\n name\n post {\n id\n title\n }\n }\n```\n\nAgora imagina que o usuário de id:1 existe, mas o usuário de id:2 não.\nPortanto eu teria um http 200 para o primeiro e um 404 para o segundo.\n\nE ai vem a pergunta de um milhão, qual reponse eu dou para meu cliente?\n\nPor 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.\n\nPelo conteúdo dos dados a responsabilidade fica no mensagem da resposta, que normalmente feita em json.\n\nUm exemplo de resposta:\n\n```json\n{\n \"error\": {\n \"q1\": {},\n \"q2\": {}\n },\n \"data\": {\n \"q1\": {},\n \"q2\": {}\n }\n}\n```\n\nUma resposta típica graphql sempre contem um objeto com dois objetos dentro.\nUm deles o `error` responsável por dizer o que houve de errado com a requisição.\nE o outro `data` responsável pelos dados da requisição.\n\nDentro de cada um desses objetos poderemos ter separadamente cada uma das queries e suas respectivas respostas.\n\n\n\n\n
\n\n## O que é o Fetch?\n\n[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.\n\nO 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].\n\nComo 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].\n\n## Requisições HTTP\n\n### Recurso\n\nUma 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:\n\n## Método\n\nComo 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:\n\n- `GET`: solicitar dados de um determinado recurso, por exemplo a página do Google;\n- `POST`: assim com o `GET`, mas podemos passar dados no corpo na requisição;\n- `DELETE`: apagar dados ou arquivos do serviço.\n- `PUT`: alterar recursos já existentes ou criar um recurso inexistente no serviço Web;\n- `PATCH`: parecido com o `PUT`, mas altera dados específicos.\n\nNormalmente 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`.\n```shell\nfoo@bar:~$ curl -X DELETE google.com\n\n\n \n \n Error 405 (Method Not Allowed)!!1\n \n \n
405. That’s an error.\n
The request method DELETE is inappropriate for the URL /.\n That’s all we know.\nfoo@bar:~$\n```\n\n### Status Codes\n\nQuando 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]:\n\n- `200`: \"Tudo certo com o seu pedido\";\n- `201`: \"Seu pedido foi aceito e foi criado na API\";\n- `400`: \"Não deu para entender seu pedido, pode ser que há uma falha na ;estrutura nele\";\n- `404`: Muito famoso por dizer que não encontrou o que você pediu.\n\nA 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.\n\n\n\n## Como usar o Fetch\n\nComo 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:\n\n```js\nconst fetchResponsePromise = fetch(resource [, init])\n```\n\n- `resource`: a url que a requisição vai chamar. Por exemplo: http://www.example.com\n- `init`: um objeto **opcional**, no qual configuramos de forma mais detalhada a requisição. Todos os detalhes sobre esse objeto [aqui][10].\n\nComo 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:\n\n````js\n ...\n\n fetch(\"https://swapi.dev/api/people/1/\")\n .then(res => res.json())\n .then(\n (result) => {\n console.log(result);\n },\n (error) => {\n console.error(error);\n }\n )\n ...\n````\n\nO *Fetch* também pode estar em algum dos métodos do seu componente React:\n\n````js\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n error: null,\n isLoaded: false,\n items: []\n };\n }\n\n componentDidMount() {\n fetch(\"https://api.example.com/items\")\n .then(res => res.json())\n .then(\n (result) => {\n this.setState({\n isLoaded: true,\n items: result.items\n });\n },\n (error) => {\n this.setState({\n isLoaded: true,\n error\n });\n }\n )\n }\n\n render() {\n const { error, isLoaded, items } = this.state;\n if (error) {\n return
Error: {error.message}
;\n } else if (!isLoaded) {\n return
Loading...
;\n } else {\n return (\n
\n {items.map(item => (\n
\n {item.name} {item.price}\n
\n ))}\n
\n );\n }\n }\n}\n````\n\nNo 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.\n\n### Mais informações\n- [ReactJS Docs - AJAX e APIs][11]\n\n[Ir para Próxima Seção](./2-Axios.md)\n\n
\n\n## O que é o Axios?\n\nAxios é uma biblioteca criada com o intuito de realizar conexões HTTP de maneira dinâmica.\n\n## Como instalar o Axios\n\nPara instalar, digite um dos comandos abaixo:\n\n> npm install axios\n\n> yarn add axios\n\n## O conceito de API para o Axios\n\nPrimeiramente, 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.\n\n## Regras de uma API HTTP\n\nAntes 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?\n\n`GET`: Com o método GET solicitamos dados de um recurso específico \n`POST`: Com o método POST podemos realizar interações na API \n`DELETE`: Com esse método podemos apagar dados via API \n`PUT`: Com esse método podemos alterar dados da API. Ele atualiza recursos já existentes ou pode criar um recurso inexistente \n`PATCH`: Esse método é parecido com o `PUT`. No entanto, ele altera dados específicos\n\nExemplos:\n\n`GET`: Listar todos os usuários registrados \n`POST`: Registrar um novo usuário \n`DELETE`: Apagar um ou mais usuários \n`PUT`: Alterar os dados de um usuário, caso não encontre o usuario ele é criado. \n`PATCH`: Alterar um dado do usuário, como por exemplo a senha\n\nTambem 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).\n\nAlem dos métodos apresentados, temos os status da API. Eles servem para informar para o desenvolvedor o que aconteceu com sua requisição.\n\nPor exemplo: \n`201`: Seu pedido foi aceito e foi criado na API \n`200`: Tudo certo com o seu pedido \n`400`: Não deu para entender seu pedido, pode ser que há uma falha na estrutura nele \n`404`: Muito famoso por dizer que não encontrou o que você pediu\n\nComo 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/)\n\n### Como usar o Axios\n\nEntão chega de teoria, e vamos praticar o uso do axios?. Para esse exemplo criaremos um novo arquivo com o nome de `api.js`\n\n````js\nimport axios from 'axios';\n\nconst API = axios.create({\n baseURL: 'link da API'\n})\n\nexport default API;\n````\n\nNesse arquivo iremos criar nosso componente que ficará responsável por interagir com a API.\n\nFeito isso, podemos ir para o arquivo que queremos que tenha uma interação entre o front-end e o back-end.\n\n```js\nimport React, { useState } from 'react';\n\nimport api from 'api';\n\nexport default function Register() {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n\n async function handleRegister(e){\n e.preventDefault();\n\n const data = {\n name,\n email,\n password,\n };\n\n try {\n const response = await API.post('users', data)\n console.log('Registrado com sucesso ');\n\n } catch (error) {\n alert(`Erro ao Registrar`);\n console.log(error);\n }\n\n };\n\n return (\n
\n \n
\n )\n}\n```\nDe 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!\n\n[Ir para Próxima Seção](../Cliente%20GraphQL/1-Conceito.md)\n\n
\n\n# API de Contexto\n\nQuando estamos trabalhando em um projeto React, aprendemos que os dados trafegam sempre de pai para filho (via props).\n\nEm algumas situações, replicar essa passagem de props em vários níveis acaba se tornando repetitivo e extremamente verboso.\n\nA 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.\n\n## Quando usar?\n\nVocê gostaria de personalizar as cores do seu sistema baseado em uma escolha do usuário.\n\nPara isso, você escreve um componente para o usuário escolher a cor e o coloca na sua aplicação.\n\n```jsx\nfunction App() {\n const [userColor, setUserColor] = React.useState('#3DB7F4');\n\n return
\n \n
Olá mundo colorido
\n
\n}\n```\n\nVocê cria um novo componente e precisa usar as cores do usuário. Vamos criar esse componente:\n\n```jsx\nfunction ListaColorida({ items, color }) {\n return
\n {\n items.map((item) =>
{item}
)\n }\n
\n}\n```\n\nAlém da lista, você desenvolve outros componentes e coloca-os em uma parte da sua aplicação:\n\n```jsx\nfunction Dashboard({ color }) {\n return \n \n \n \n}\n```\n\nE a nossa aplicação, que precisa também passar essa propriedade adiante:\n\n```jsx\nfunction App() {\n const [userColor, setUserColor] = React.useState('#3DB7F4');\n\n return
\n \n Olá mundo colorido\n \n
\n}\n```\n\nQuando 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\nNã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.\n\n## Como usar\n\nPara iniciar, é necessário criar um Contexto. Este será o objeto que vai representar o dado que será trafegado entre os componentes.\n\n```javascript\nconst ContextoCorUsuario = React.createContext();\n```\n\nDepois, vamos colocar um provedor do contexto. Este provedor deve ficar no nível mais alto da hierarquia dos componentes.\n\n```jsx\nfunction App() {\n const [userColor, setUserColor] = React.useState('#3DB7F4');\n\n return \n
\n ...\n
\n \n}\n```\n\nAgora, todo componente dentro dessa árvore pode receber a cor escolhida pelo usuário através desse contexto. Por exemplo, nossa lista colorida.\n\n```jsx\nfunction ListaColorida({ items }) {\n return \n { (color) => (\n
\n {\n items.map((item) =>
{item}
)\n }\n
\n ) }\n \n}\n```\n\nCom 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.\n\nNosso App e nosso Dashboard ficam mais simples também:\n\n```jsx\nfunction Dashboard() {\n return \n \n \n \n}\n```\n\n```jsx\nfunction App() {\n const [userColor, setUserColor] = React.useState('#3DB7F4');\n\n return \n \n Olá mundo colorido\n \n \n}\n```\n\n## Usando useContext\n\nNa 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`.\n\n```jsx\nfunction ListaColorida({ items }) {\n const color = useContext(ContextoCorUsuario)\n\n return
\n {\n items.map((item) =>
{item}
)\n }\n
\n}\n```\n\nNa 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.\n\n## Considerações adicionais\n\nVocê 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.\n\n```jsx\nfunction App() {\n return \n \n \n ...\n \n \n \n}\n```\n\n```jsx\nfunction BarraDeNavegacao() {\n const localizacao = useContext(ContextoLocalizacaoUsuario)\n const corUsuario = useContext(ContextoCorUsuario)\n\n return
\n
{localizacao.latitude} {localizacao.longitude}
\n
{corUsuario}
\n
\n}\n```\n\n## Agora que você já sabe\n\nA 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.\n\nVocê 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.\n\nSeus 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.\n\nAchou 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!\n\n[Ir para Próxima Seção](../Verificadores%20de%20Tipo/Typescript.md)\n\n
\n\n# Redux\n\n\"Redux é um \"container\" de estado previsível para aplicativos JavaScript.\n\nEle 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.\n\nVocê 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\n\n## O que é o Flux?\n\nPrimeiramente precisamos entender como funciona a arquitetura do Redux, no caso entender primero o que é a arquitetura Flux.\n\nFlux é 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.\n\nEssa 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:\n\n - créditos: https://facebook.github.io/flux/docs/in-depth-overview/\n\nPerceba 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:\n\n - créditos: https://facebook.github.io/flux/docs/in-depth-overview/\n\nApenas 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\".\n\n## Como Funciona o Redux\n\nAgora 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.\n\nNo 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:\n\n - créditos: https://facebook.github.io/flux/docs/in-depth-overview/\n\n## Como usar o Redux no React\n\nPrimeiramente para instalar os pacotes do Redux na sua aplicação React, use os seguintes comandos:\n - npm install redux\n - npm install react-redux\n - npm install --save-dev redux-devtools\n\n### Action\n\nAgora 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\".\n\nNesse 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\".\n\n```jsx\nexport const ActionsTypes = {\n SET_PRODUCTS: \"SET_PRODUCTS\",\n SELECTED_PRODUCTS: \"SELECTED_PRODUCTS\",\n REMOVE_SELECTED_PRODUCTS: \"REMOVE_SELECTED_PRODUCTS\",\n};\n```\n\nNesse 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.\n\n```jsx\nimport { ActionsTypes } from \"../contants/action-types\";\n\nexport const setProducts = (products) => {\n return {\n type: ActionsTypes.SET_PRODUCTS,\n payload: products,\n }\n}\n\nexport const selectedProducts = (products) => {\n return {\n type: ActionsTypes.SELECTED_PRODUCTS,\n payload: products,\n }\n}\n\nexport const removeSelectedProducts = () => {\n return {\n type: ActionsTypes.REMOVE_SELECTED_PRODUCTS,\n }\n}\n```\n\nAgora 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\".\n\n```JSX\nimport React, { useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport axios from 'axios';\nimport ProductComponent from './ProductComponent';\nimport { setProducts } from '../redux/actions/productActions';\n\nconst ProductListing = () => {\n\n const products = useSelector((state) => state);\n const dispatch = useDispatch();\n\n const fetchProducts = async () => {\n const response = await axios\n .get(\"https://fakestoreapi.com/products\")\n .catch((err) => {\n console.log(\"error: \", err);\n });\n dispatch(setProducts(response.data));\n };\n\n useEffect(() => {\n fetchProducts()\n }, []);\n\n return(\n
\n \n
\n );\n}\n\nexport default ProductListing;\n```\n\n 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()\".\n\n 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\".\n\n### Reducers\n\nOs \"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.\n\nNesse próximo código vamos ver a estrutura que um \"Reducer\" possui.\n\n```JSX\nimport { ActionsTypes } from '../contants/action-types';\n\nconst initialState = {\n products: [],\n};\n\nexport const productReducer = (state = initialState, { type, payload }) => {\n switch (type) {\n case ActionsTypes.SET_PRODUCTS:\n return {...state, products: payload};\n default:\n return state;\n }\n};\n\nexport const selectedProductReducer = (state = {}, { type, payload }) => {\n switch (type) {\n case ActionsTypes.SELECTED_PRODUCTS:\n return {...state, ...payload};\n case ActionsTypes.REMOVE_SELECTED_PRODUCTS:\n return {};\n default:\n return state;\n }\n}\n```\nVeja 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\".\n\nNo 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.\n\n```JSX\nimport { combineReducers } from 'redux';\nimport { productReducer, selectedProductReducer } from './productReducer';\n\nconst reducers = combineReducers({\n allProducts: productReducer,\n product: selectedProductReducer,\n});\n\n\nexport default reducers;\n```\n\nNeste 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.\n\n```JSX\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\n\nconst ProductComponent = () => {\n\n const products = useSelector((state) => state.allProducts.products);\n const renderList = products.map((product) => {\n const {id, title, image, price, category} = product;\n\n return(\n
\n \n
\n
\n
\n \n
\n
\n
{ title }
\n
$ { price }
\n
{ category }
\n
\n
\n
\n \n
\n );\n });\n\n return <>{renderList};\n}\n\nexport default ProductComponent;\n```\n\nDe 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.\n\n```JSX\nimport React, { useEffect } from \"react\";\nimport axios from \"axios\";\nimport { useParams } from \"react-router-dom\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { selectedProducts, removeSelectedProducts } from \"../redux/actions/productActions\";\n\nconst ProductDetail = () => {\n const product = useSelector((state) => state.product)\n const {image, title, price, category, description} = product;\n const { productId } = useParams();\n const dispatch = useDispatch();\n\n const fetchProductDetail = async () => {\n const response = await axios.get(`https://fakestoreapi.com/products/${productId}`)\n .catch(err => {\n console.error(\"Error: \", err);\n })\n dispatch(selectedProducts(response.data));\n };\n\n useEffect(() => {\n if(productId && productId !== \"\")\n {\n fetchProductDetail();\n }\n\n return () => {\n dispatch(removeSelectedProducts());\n }\n }, [productId]);\n\n return (\n
\n );\n}\n\nexport default ProductDetail;\n```\n\n### Store\n\nPor 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\".\n\nOutras 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.\n\nNo 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.\n\n```JSX\nimport { createStore } from 'redux';\nimport reducers from './reducers/index';\n\nconst store = createStore(\n reducers,\n {},\n window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),\n);\n\nexport default store;\n```\n\nE aqui estamos praticamente finalizando o uso do Redux, onde por fim, é importado tanto a \"store\" que foi criada no código anterior, quanto o \"Provider\". Basicamente aqui é colocado o \"\" dentro desse componente Provider que está recebendo a \"store\" assim, basicamente o \"Provider\" faz a comunicação entre o React e o Redux da aplicação, sendo assim muito importante ele ser o elemento que envolve todos os outros componentes que você está utilizando o Redux.\n\n```JSX\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport App from './App';\nimport store from './redux/store';\n\nReactDOM.render(\n \n \n \n \n ,\n document.getElementById('root')\n);\n```\n\n## Conclusão sobre o Redux\n\nChegamos 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.\n\nPensando 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.\n\nEm 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.\n\nLink para código do projeto: \n\nAchou 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!\n\n[Ir para Próxima Seção](../Verificadores%20de%20Tipo/Typescript.md)\n\n
\n\n# Zustand\nO 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.\n\nÉ de fácil utilização por se prover de conceitos da arquitetura flux, utilizada pelo Redux, de maneira mais simplificada.\n\n# Instalação\nVocê pode instalar o zustand através do npm ou yarn:\n\n```bash\n# NPM\nnpm install zustand\n\n# Yarn\nyarn add zustand\n```\n\n# Como ele funciona\nAssim como no Redux, o Zustand funciona com uma única \"store\" onde serão armazenados os estados necessários a sua aplicação.\n\nPrimeiramente criamos a nossa `store`: \n```js\nimport { create } from 'zustand'\n\nconst useStore = create((set) => ({\n bears: 0,\n increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),\n removeAllBears: () => set({ bears: 0 }),\n}))\n```\n\nComo podemos ver no código acima, a nossa `store` é um `hook`\nonde temos:\n1. O estado e o seu valor inicial -> `bears: 0`\n2. Função para acrescentar 1 ao valor do estado atual -> `increasePopulation`\n3. Função onde é zerado o valor do estado -> `removeAllBears`\n\nAgora com a \"store\" criada e suas \"actions\" podemos utilizá-la nos respectivos componentes: \n\n```jsx\nfunction BearCounter() {\n const bears = useStore((state) => state.bears)\n return
{bears} around here...
\n}\n\nfunction Controls() {\n const increasePopulation = useStore((state) => state.increasePopulation)\n return \n}\n```\nPerceba que pode-se utilizar o \"hook\" `useStore` em qualquer lugar e sem a necessidade de `providers` como acontece no Redux.\n\n## Atualizando estado\n\nPara atualizar o estado basta utilizar a função que realiza esta ação (`action`).\nPegando o exemplo da \"store\" anterior e adcionando o estado `bearName` e a respectiva `action` `updateBearName` temos a seguinte configuração da nossa `store`:\n\n```js\nconst useStore = create((set) => ({\n bears: 0,\n bearName: '',\n updateBearName: (bearName) => set(() => ({ bearName: bearName}))\n increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),\n removeAllBears: () => set({ bears: 0 }),\n}))\n```\n\nCom isso no código do nosso app podemos atualizá-lo da seguinte forma:\n\n```js\nfunction App() {\n\tconst [bearName, updateBearName] = useStore(\n\t\t(state) => [state.bearName, state.updateBearName]\n\t\tshallow\n\t)\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t)\n}\n```\n\nObservaçã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.\n\n## Fatiando sua store\n\nA 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`.\n\nAbaixo vemos uma pequena store com um `state` chamado `fishes` e uma `action` para adcionar o valor de 1 a cada vez que é acionado:\n\n```js\nexport const createFishSlice = (set) => ({\n fishes: 0,\n addFish: () => set((state) => ({ fishes: state.fishes + 1 })),\n})\n```\n\nJá 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:\n\n```js\nexport const createBearSlice = (set) => ({\n bears: 0,\n addBear: () => set((state) => ({ bears: state.bears + 1 })),\n eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),\n})\n```\n\nAgora podemos juntar essas duas stores em uma só `useBoundStore`.\n\n```js\nimport { create } from 'zustand'\nimport { createBearSlice } from './bearSlice'\nimport { createFishSlice } from './fishSlice'\n\nexport const useBoundStore = create((...a) => ({\n ...createBearSlice(...a),\n ...createFishSlice(...a),\n}))\n```\n\nE por fim podemos utilizar normalmente em nosso componente React:\n\n```jsx\nimport { useBoundStore } from './stores/useBoundStore'\n\nfunction App() {\n const bears = useBoundStore((state) => state.bears)\n const fishes = useBoundStore((state) => state.fishes)\n const addBear = useBoundStore((state) => state.addBear)\n return (\n
\n
Number of bears: {bears}
\n
Number of fishes: {fishes}
\n \n
\n )\n}\n\nexport default App\n```\n\n## Conclusão\n\nUsar 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.\n\n[Documentação Oficial](https://docs.pmnd.rs/zustand/getting-started/introduction)\n\nAchou 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!\n\n[Ir para Próxima Seção](../Estilizacao/1.Preprocessadores%20CSS.md)\n\n
\n\n# O Que é Compound Components?\n\nO Compound Components é um padrão avançado em React.\nTem 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.\n\nEsse 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.\n\nTemos um exemplo de Compound Components na estrutura do `select` e `option` das tags em HTML:\n\n```jsx\n\n```\n\n\n\nO `select` funciona como um gerenciador de estados da inferface, enquanto o `option` são configurados em como o `select` deve funcionar.\n\n# Exemplo utilizando Compound Components\n\nNeste 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.\n\nVamos ver como seria criar esse componente passo a passo:\n\n1. Podemos começar criando a context responsável por gerênciar o state de abrir e fechar o modal\n\n```jsx\nimport { createContext, useState } from 'react'\n\nexport const ModalContext = createContext()\n\nexport const ModalStorage = ({ children }) => {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n \n {children}\n \n )\n}\n```\n\n2. Criando a base do componente Modal\n\n```jsx\nimport { ModalStorage } from './context'\n\nconst Modal = ({ children }) => {\n return {children}\n}\n\nexport default Modal\n```\n\nPerceba que estamos usando `children`, para pegar os componentes que serão inseridos dentro do Modal, vamos querer usa-lo assim:\n\n```\n\n ...\n \n
conteúdo do modal
\n \n\n```\n\n3. Agora precisamos criar o componente toggle, que vai ser responsável por abrir o Modal\n\n```jsx\nimport { useContext } from 'react'\n\nimport { ModalContext } from '../context'\n\nconst Toggle = ({ children }) => {\n const { setIsOpen } = useContext(ModalContext)\n\n return \n}\n\nexport default Toggle\n```\n\n4. Também precisamos do componente content que vai ser responsável por exibir o conteúdo do Modal\n\n```jsx\nimport { createContext, useState } from 'react'\n\nexport const ModalContext = createContext()\n\nexport const ModalStorage = ({ children }) => {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n \n {children}\n \n )\n}\n```\n\n5. Por fim, podemos atribuir os dois ao nosso componente Modal e já ta no jeito (:\n\n```jsx\nimport Toggle from './Toggle'\nimport Content from './Content'\n\nimport { ModalStorage } from './context'\n\nconst Modal = ({ children }) => {\n return {children}\n}\n\nModal.Toggle = Toggle\n\nModal.Content = Content\n\nexport default Modal\n```\n\n6. Utilizando\n\n```jsx\nimport Modal from './components/Modal'\n\nconst App = () => {\n return (\n \n Abrir Modal\n \n
React4Noobs
\n
Compound Components é dahora! /o/
\n \n \n )\n}\n\nexport default App\n```\n\n7. Resultado\n\nhttps://github.com/gabrielduete/react4noobs/assets/59345698/781b13d9-f22e-47f6-a48f-6fb900467e2d\n\nAssim, 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.\n\nEssa 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.\n\n# Outros exemplos\n\nTambém podemos utilizar Compound Components em outros contextos, por exemplo:\n\nComponentes de Accordion\n\n```jsx\n\n Titulo\n Seção 1\n Seção 2\n Seção 3\n Botão\n\n```\n\nComponentes de Menu\n\n```jsx\n\n```\n\nTodos são flexivéis e adptavéis, facilitando o desenvolvimento, escalabilidade e uso do componente.\n\n# Conclusão\n\nVimos 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.\n\nFique à 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.\n\n[Ir para a próxima seção](./2-React%20Error%20Boundaries.md)\n\n
\n\n# Tailwind\n\n> Sumário:\n>\n> - [Iniciando com Tailwind](#iniciando-com-tailwind)\n> - [Pros e Contra](#pros-e-contra)\n> - [Extensões de Auxílio](#extensões-de-auxílio)\n> - [Conclusão](#conclusão)\n\n# Iniciando com Tailwind\n\nO 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.\n\nEu 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. \n\nVamos dar uma olhada em um exemplo:\n\n```jsx\nexport default function Home() {\n return (\n
\n Hello world!\n
\n )\n}\n```\n\n
\n \n
\n\nNesse exemplo, estamos atribuindo três estilizações para a tag h1 que recebe o nosso \"Hello world!\". \n\nA 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. \n\nPor 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.\n\n---\n\n# Pros e Contras\n\nComo 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.\n\n### Pros\n\n- Não pensar em nome de classes de estilo, como é no CSS in JS;\n- Medidas de estilização padronizadas, facilitando seguir padrões;\n- Não precisa ficar trocando entre diferentes arquivos e abas durante a produção;\n- Facilidade em fazer mudanças de estilo sem sobrescrever os estilos de uma tag superior;\n- Utilizar da componentização resolve a \"bagunça\" que o Tailwind deixa nas tags HTML;\n- O uso de classes utilitárias faz o Tailwind um framework extremamente personalizável\n\n### Contra\n\n- É preciso entender o setup do Tailwind e como mexer no seu arquivo de configuração, para customizar os estilos;\n- Por ser “utility first” o HTML vai acabar consumindo mais espaço, já que aplicamos estilização diretamente neles;\n- Não é a solução universal, muitas vezes temos que utilizar de alguns operadores condicionais, ou classes customizadas para realizar a estilização;\n- Necessidade de aprender css da maneira Tailwind, já que algumas estilizações tem o nome um pouco diferente do css tradicional.\n\n---\n\n# Extensões de Auxílio\n\nPara facilitar a vida na hora de usar Tailwind, indico o uso de algumas extensões:\n\n### Tailwind IntelliSense\nExtensão que habilita o auto complete na className para aplicar as estilizações.\n\n
\n \n
\n\n
\n \n
\n\n---\n\n### Tailwind Fold\nSe 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\".\n\n
\n \n
\n\n
\n \n \n
\n\n---\n\n### Tailwind Sort Class\nExtensão para padronizar a ordem das estilizações na className. \n\n
\n\n---\n\n# Conclusão\n\nCom 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.\n\nPara 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.\n\n---\n\n
\n\n# CSS-in-JS\n\n> 🔥 **Tá com pressa?** pega o resumo:\n\n> 1. [O que é](#o-que-é-css-in-js)\n> 2. [Vantagens](#quais-vantagens-as-bibliotecas-de-css-in-js-fornecem)\n> 3. [Bibliotecas](#quais-as-principais-bibliotecas) \n> 3.1 💅 [Styled Components](#-styled-components) \n> 3.2 📦 [CSS Modules](#-css-modules) \n> 3.3 👩🎤 [Emotion](#-emotion)\n> 4. [Na prática com Styled Components](#na-prática-com-styled-components)\n> 5. [Conclusão](#conclusão)\n> 9. [Referências](#referências)\n\n## O que é CSS-in-JS?\n\nÉ 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. \n\nTodas 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.\n\nO 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.\n\n> ⚠️ **Mas atenção!** Usar uma biblioteca em JavaScript para estilizar seu app não vai te livrar de entender o fundamental de CSS, beleza?\n\n#### CSS-in-JS te permite...\n\n- Escrever CSS usando sintaxe de JavaScript\n- Aproveitar as vantagens do JS (funções, condicionais, variáveis, estados, ...)\n- Aproveitar as vantagens de qualquer coisa do ecossistema JS\n\n#### CSS-in-JS *não* vai te livrar de entender...\n\n- Como estilos são aplicados no DOM\n- Como funciona herança\n- Como funcionam as propriedades de CSS\n- Como funcionam os layouts em CSS\n\n#### E onde entra o JS?\n\nPara 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). \n\nTambé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)\n\n> ⚠️ **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.\n\n---\n\n## Quais vantagens as bibliotecas de CSS-in-JS fornecem?\n\nAs 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).\n\nAlém disso, outras abstrações comumente implementadas em bibliotecas CSS-in-JS são:\n\n- Eliminação de código morto (sem uso)\n- O código vai dar erros (incluindo sintaxe, tipagem, *undefined*)\n- Suporte a temas\n- Estilos dinâmicos (com base em `props`, por exemplo)\n- Estilos são \"escopados\" a um componente específico\n- Otimizações de performance como gerar o _CSS crítico_ sem necessidade de configuração adicional\n\n--- \n\n## Quais as principais bibliotecas?\n\nA ú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]().\nJá 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).\nVamos entender melhor como essas três funcionam?\n\n
\n\n| Critério | Cálculo |\n| ---------- | ------------------------------------------------------------- |\n| Awareness | Total de Respostas - Nunca ouviu falar / (Total de Respostas) |\n| Interest | Interessado / (Interessado + Não interessado) |\n| Satisfação | Usaria novamente / (Usaria novamente + Não usaria novamente) |\n\n## 💅 [Styled Components](https://github.com/styled-components/styled-components)\n\nUtilizando [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.\n\n`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.\n\nAlém da experiência aprimorada para devs, os componentes estilizados fornecem:\n\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\n- **Prefixo automático:** escreva seu CSS de acordo com o padrão atual e deixe que `styled components` cuide do resto.\n\nVocê obtém todos esses benefícios enquanto escreve o CSS que conhece e adora, apenas vinculado a componentes individuais.\n\n> 🔥 **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\n\n```jsx\nconst Button = styled.button`\n color: grey;\n`;\n```\n\nTambé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.\n\n```jsx\nconst Button = styled.button({\n color: 'grey',\n});\n```\n\nOs dois estilos acima são equivalentes.\n\nStyled Components é também compatível com React Native.\n\n### 📦 [CSS Modules](https://github.com/css-modules/css-modules)\nUm **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.\n\nCSS Modules compila para um formato intermediário chamado [ICSS](https://github.com/css-modules/icss), mas são escritos na forma padrão.\n\n```css\n/* style.css */\n.error {\n background-color: red;\n}\n```\n\nAo 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).\n\n```jsx\nimport styles from \"./style.css\";\n// import { className } from \"./style.css\";\n\nconst btn = ;\n```\n\n## 👩🎤 [Emotion](https://github.com/emotion-js/emotion)\nEmotion 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.\n\nO Emotion possui duas formas de uso, uma agnóstica de framework e outra específica para trabalho com React.\n\n### Forma agnóstica de framework:\n\n```jsx\nimport { css, cx } from 'emotion'\n\nconst color = 'white'\n\nrender(\n \n Hover to change color.\n \n)\n```\n\n### Com React\n\nEssa abordagem possui suporte a ESLint, temas, e outros benefícios, mas exige mais configuração. Além disso, tem também suporte à sintaxe _styled_\n\n#### clássico\n\n```jsx\n// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement\n/** @jsx jsx */\nimport { css, jsx } from '@emotion/core'\n\nconst color = 'white'\n\nrender(\n \n Hover to change color.\n \n)\n```\n\n##### styled\n\n```jsx\nimport styled from '@emotion/styled'\n\nconst Button = styled.button`\n padding: 32px;\n background-color: hotpink;\n font-size: 24px;\n border-radius: 4px;\n color: black;\n font-weight: bold;\n &:hover {\n color: white;\n }\n`\n\nrender()\n```\n\n---\n\n## Conclusão\n\nEntendemos 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.\n\nPara tirar melhor proveito dessa abordagem, é essencial que se conheça os conceitos básicos de CSS e de JavaScript, beleza?\n\n---\n\nVamos aprender um pouco mais de [styled components na prática?](./3.1-styled-components.md)\n\n\n
\n"
},
{
"path": "docs/Estilizacao/3.1-styled-components.md",
"content": "# Na prática com Styled Components\n\nEsse exemplo [está na documentação](https://styled-components.com/docs/basics#installation) 😄\n\n## Instalação\n\n```bash\nnpm install styled-components\n\n-- ou --\n\nyarn add styled-components\n```\n\n> ⚠️ **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.\n\n### Iniciando\n\n`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.\n\nO exemplo abaixo cria dois componentes e usa eles.\n\n```jsx\n// Cria um componente Title, um h1 com estilos\nconst Title = styled.h1`\n font-size: 1.5em;\n text-align: center;\n color: palevioletred;\n`;\n\n// Cria um componente Wrapper, uma section estilizada\nconst Wrapper = styled.section`\n padding: 4em;\n background: papayawhip;\n`;\n\n// Use-os como você usaria qualquer outro componente\nrender(\n \n Hello World!\n \n);\n```\n\n> 🔥 Detalhe! O css gerado já tem os prefixos de navegadores. Vai em frente, usa todas as propriedades hipsters que você conhece ;)\n\n### Adaptando os componentes com base em props\n\nO `styled-components` gera um componente, certo?\nSe gera um componente, pode ter props.\nE se tem props, você pode usar.\n\nEsse 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) ;)\n\n```jsx\nconst Button = styled.button`\n background: ${(props) => (props.primary ? 'palevioletred' : 'white')};\n color: ${(props) => (props.primary ? 'white' : 'palevioletred')};\n\n font-size: 1em;\n margin: 1em;\n padding: 0.25em 1em;\n border: 2px solid palevioletred;\n border-radius: 3px;\n`;\n\nrender(\n
\n \n \n
\n);\n```\n\n### Estendendo estilos\n\nÀs vezes precisamos fazer pequenas adaptações no layout de um componente.\nCom o `styled-components`, basta envolvê-lo no construtor `styled`:\n\n```jsx\n// Botão do exemplo acima, sem as interpolações\nconst Button = styled.button`\n color: palevioletred;\n font-size: 1em;\n margin: 1em;\n padding: 0.25em 1em;\n border: 2px solid palevioletred;\n border-radius: 3px;\n`;\n\n// Um novo Botão, baseado no anterior, com alguns detalhes a mais\nconst TomatoButton = styled(Button)`\n color: tomato;\n border-color: tomato;\n`;\n\nrender(\n
\n \n Tomato Button\n
\n);\n```\n\nAinda, é 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:\n\n```jsx\n\n```\n\n> 📚 **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)\n\n### Sintaxe\n\nO `styled-components` usa um pré-processador chamado [stylis](https://github.com/thysultan/stylis.js), que suporta a sintaxe do SCSS.\n\n```jsx\nconst Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`\n color: blue;\n\n &:hover {\n color: red; // quando passamos o mouse\n }\n\n & ~ & {\n background: tomato; // como irmão de , mas talvez não diretamente adjacente\n }\n\n & + & {\n background: lime; // adjacente a \n }\n\n &.something {\n background: orange; // tagueado com uma classe CSS adicional \".something\"\n }\n\n .something-else & {\n border: 1px solid; // dentro de outro elemento nomeado \".something-else\"\n }\n`;\n\nrender(\n \n Hello world!\n How ya doing?\n The sun is shining...\n
Pretty nice day today.
\n Don't you think?\n
\n Splendid.\n
\n \n);\n```\n\n### Anexando props adicionais\n\nPara 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.\nDessa 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`.\nAlé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.\n\nAqui, renderizamos um componente `input` e anexamos alguns atributos dinâmicos e estáticos a ele:\n\n```jsx\nconst Input = styled.input.attrs((props) => ({\n // podemos definir props estáticas\n type: 'text',\n\n // ou definir props dinâmicas\n size: props.size || '1em',\n}))`\n color: palevioletred;\n font-size: 1em;\n border: 2px solid palevioletred;\n border-radius: 3px;\n\n /* aqui usamos a prop computada dinamicamente */\n margin: ${(props) => props.size};\n padding: ${(props) => props.size};\n`;\n\nrender(\n
\n \n \n \n
\n);\n```\n\n### Animações\n\nPor fim, vamos dar aquela animada nos nossos componentes?\nAnimaçõ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:\n\n```jsx\n// Criar a animação\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n`;\n\n// Criar um componente que vai rotacionar o que receber\nconst Rotate = styled.div`\n display: inline-block;\n animation: ${rotate} 2s linear infinite;\n padding: 2rem 1rem;\n font-size: 1.2rem;\n`;\n\nrender(\n < 💅🏾 > \n);\n```\n\n> ⚠️ Keyframes não é suportada pelo React Native.\n\n---\n\n## Referências\n\n### Conceitos\n\n- [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\n- [What actually is CSS-in-JS?](https://medium.com/dailyjs/what-is-actually-css-in-js-f2f529a2757) - Oleg Isonen\n- [The tradeoffs of CSS-in-JS](https://medium.com/free-code-camp/the-tradeoffs-of-css-in-js-bee5cf926fdb) - Oleg Isonen\n- [CSS-in-JS](https://en.wikipedia.org/wiki/CSS-in-JS) - Wikipedia\n- [Why you should definitely learn how to use CSS-in-JS](https://jxnblk.com/blog/why-you-should-learn-css-in-js/) - Brent Jackson\n\n### Bibliotecas\n\n- [Utilizando Styled Components (CSS-in-JS) no ReactJS e React Native | Diego Fernandes](https://www.youtube.com/watch?v=R3S8DEzEn6s) - RocketSeat\n- [Styled Components, por onde começar? Os poderes do CSS in JS](https://www.youtube.com/watch?v=QdfjWRc4ySA) - Mario Souto\n- [JSS](https://cssinjs.org/?v=v10.4.0) - JSS\n- [Basics](https://styled-components.com/docs/basics#installation) - Styled Components\n\n---\n\n[Ir para Próxima Seção](../Controle%20de%20estado/1-API-de-Contexto.md)\n\n
\n\n# NPM e Yarn\n\nO 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\nNã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.\n\nSe 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).\n\n# Create-react-app\n\nO Create React App é uma ferramenta para criar projetos em React com o intuito de facilitar a configuração da aplicação.\n\n## Instalação\n\nCom o npx do npm iremos executar o seguinte comando para criar a aplicação. Ou podemos utilizar o Yarn para fazermos o mesmo processo.\n\n```cmd\nnpx create-react-app react4noobs\n\n-- ou --\n \nyarn create react-app react4noobs\n```\n\nAguarde alguns minutos para que o npm baixe as dependências.\n\nO 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.\n\nAo abrir seu package.json você encontrará três scripts, são eles:\n\n\n| Comando | Rodando com NPM | Rodando com Yarn |\n| ------- | --------------- | ---------------- |\n| start | npm start | yarn start |\n| build | npm run build | yarn build |\n| eject | npm run eject | yarn eject |\n\nO **start** iniciará a aplicação de acordo com os componentes desenvolvidos no */src*.\n\nE uma tela no navegador irá se abrir:\n\n\n\nQuando 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.\n\n\n\nO **build** é utilizado para enviar a aplicação para \"produção\".\n\nComo 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.\n\nO **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*.\n\nPor 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.\n\n---\n\nVamos olhar agora um pouco sobre [dependências](./1.1-O-que-são-dependências.md).\n\n
\n\n# O que são dependências\n\nDependê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.\n\nPor 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.\n\n## Como instalamos dependências\n\nIsso vai depender de qual gerenciador de pacotes você está utilizando (npm, yarn ou outros). No NPM ou Yarn pode utilizar:\n\n```bash\nnpm install react-router-dom\n\n--ou--\n\nyarn add react-router-dom\n```\n\nO 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.\n\n```bash\nnpm install prettier --save-dev\n\n--ou--\n\nyarn add prettier --dev\n```\n\n## Como removemos dependências\n\nAs 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\n\n```bash\nnpm uninstall prettier --save-dev\nnpm uninstall react-router-dom \n\n--ou--\n\nyarn remove prettier --save-dev\nyarn remove react-router-dom \n```\n\n---\n\nCom esses comandos podemos instalar ou remover qualquer pacote que vamos adicionar ao projeto.\n\nVamos olhar agora um pouco do [Webpack](./2-Webpack.md).\n\n
\n\n# O que é WebPack?\n\nO 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.\n\nPrimeiramente 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.\n\nOutra 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.\n\nBem, 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.\n\n# O que é Babel?\n\nBem, 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.\n\nCaso você tenha curiosidade recomendo dar uma olhada na documentação oficial, basta [clicar aqui](https://babeljs.io/docs/en/)\n\n# Como utilizar o Webpack no React?\n\nDe 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.\n\n# Bora praticar como usar o Webpack?\n\nEntão, chega de teoria e bora ver na prática como isso será aplicado no ecossistema do React.\n\nBem, para entender o conceito de Webpack e React iremos criar um Hello World.\n\nPrimeiramente 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.\n\n```\nnpm install --save react react-dom\n\nnpm install --save-dev webpack babel-core babel-loader @babel/preset-env @babel/preset-react\n```\n\nAgora podemos criar nosso index.html, o arquivo principal que importará todo o Javascript e carregará a aplicação:\n\n```HTML\n\n\n\n\nWebpack React Example\n\n\n\n\n\n\n\n\n\n```\n\nVeja que temos uma parte que importa o arquivo 'bundle.js' ele será todo o javascript da nossa aplicação;\n\nPara 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:\n\n```js\nmodule.exports = {\n entry: './app.js',\n output: {\n filename: 'bundle.js',\n },\n};\n```\n\nFeito 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).\n\nNo 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.\n\nApós esses passos, podemos alterar o 'package.json' para que possamos rodar o webpack e gerar o build:\n\n```json\n{\n \"name\": \"webpack-react-example\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"webpack\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"react\": \"^15.4.1\",\n \"react-dom\": \"^15.4.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.18.2\",\n \"babel-loader\": \"^6.2.8\",\n \"babel-preset-es2015\": \"^6.18.0\",\n \"babel-preset-react\": \"^6.16.0\",\n \"webpack\": \"^1.13.3\"\n }\n}\n```\n\nNossa alteração foi adicionar o script `start`. Com ele, podemos rodar nossa aplicação com o comando:\n\n```\nnpm start\n```\n\nAgora vamos criar o arquivo que falta, o app.js, que terá o Hello World em React:\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(
Hello World
, document.getElementById('app'));\n```\n\nPorém, apesar desse código ser muito simples, possui duas limitações que nossos browsers não conseguem interpretar:\n\n- Código em React\n- Código em ES2015\n\nPor 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:\n\n```js\nmodule.exports = {\n entry: './app.js',\n output: {\n filename: 'bundle.js',\n },\n\n module: {\n rules: [\n {\n test: /.js/,\n exclude: /(node_modules|bower_components)/,\n use: {\n loader: 'babel-loader',\n },\n },\n ],\n },\n};\n```\n\nPode ter ficado complicado agora, mas vamos passo a passo.\n\nPrimeiro, vamos pegar todos os arquivos que terminem com .js:\n\n`test: /\\.js$/ `\n\nDepois, vamos excluir todos os arquivos que vem da pasta node_modules, porque não faz sentido tocarmos em libs externas:\n\n`exclude: /node_modules/ `\n\nAgora, basta informarmos que vamos usar o Babel como loader principal:\n\n`loader: 'babel`\n\nE 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:\n\n```\n{\n \"presets\": [\n \"@babel/preset-env\",\n \"@babel/preset-react\",\n ]\n}\n\n```\n\nPronto. Agora basta digitar o comando para rodar o Webpack:\n\n`npm start`\n\nFeito 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).\n\nBem 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.\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n```\n\n```html\n\n\n\n\n\n\n\n\n```\n\nApenas um pedaço do código original do index.html\n\n## Referências:\n\n[Webpack para React: o Guia Final](https://medium.com/tableless/webpack-para-react-o-guia-final-cb8a95b369ed)\n\n[Ir para Próxima Seção](./3-Vite.md)\n\n \n
\n\n# O que é Vite?\n\nO 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.\n\nEle 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.\n\n# Por que usar o vite e não outras ferramentas de build?\n\no 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.\n\nAlém disso, ele não requer configurações complexas, ele usa o arquivo vite.config.js para detectar automaticamente configurações de compilação.\n\nE 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.\n\nCaso você tenha curiosidade recomendo dar uma olhada na documentação oficial, basta [clicar aqui](https://vitejs.dev/guide/)\n\n# Como utilizar o Vite no React?\n\nDe 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:\n\n```bash\nnpm create vite@latest my-react-app --template react\n\nou\n\nnpm create vite@latest my-react-app --template react-ts\n\n```\n\nApó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.\n\n## Referências:\n\n[Site oficial do ViteJS](https://vitejs.dev)\n\n \n
\n\n# Introdução\n\nSeja bem-vindo! :purple_heart:\n\nO 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.\n\nVocê pode consultar esses outros repositórios do 4noobs para aprender esses conteúdos:\n\n- [HTML](https://github.com/sorenhe4rt/HTML4Noobs)\n- [CSS](https://github.com/mathh95/css4noobs)\n- [Javascript](https://github.com/ThiagoDellaNoce/javascript4noobs)\n\nApó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.\n\n[Ir para Próxima Seção](./2-O%20que%20e%20React.md)\n\n
\n\n# React\n\n## O que é React?\n\nO **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.\n\nUma 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.\n\nVocê pode consultar a documentação em PORTUGUÊS, traduzida pela comunidade, [aqui](https://pt-br.react.dev/)\n\nParece complicado, né? Mas não se assuste! Iremos entrar em detalhes em breve.\n\n[Ir para Próxima Seção](./3-JSX%20e%20Babel.md)\n\n
\n\n# React\n\n## Iniciando um projeto\n\nComo já sabemos o `React` é uma biblioteca! E para podermos utiliza-la precisamos instalar os pacotes necessários em nosso projeto.\n\nAté 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:\n\n```js\nnpx create-react-app \n```\n\nPorém recentemente esta mesma ferramenta foi depreciada, ou seja não é mais recomendava e provavelmente nem terá mais suporte/atualizações.\n\nPortanto, 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)\n\n- NextJS\n\n```js\nnpx create-next-app\n```\n\n- Remix\n\n```js\nnpx create-remix-app\n```\n\n- Gatsby\n\n```js\nnpx create-gatsby\n```\n\n\\_ Expo(Para mobile)\n\n```js\nnpx create-expo-app\n```\n\nEstas 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\"`.\n\nDito isto, temos opções criando nossa propria configuração personalizada ou utilizando o [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/).\n\nMostraremos como começar com o Vite pois ele já oferece comandos sem nenhuma configuração para todos.\n\nPara projetos React com javascript, basta utilizar o comando:\n\n```js\nyarn create vite\n```\n\n```js\nnpm create vite@latest\n```\n\n\n\n\n\n\nVocê também pode iniciar os projetos já colocando o nome através do comando.\n\n```js\nyarn create vite@latest react4noobs --template react\n```\n\nCaso 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!\n\nEntã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.\n\n[Ir para Próxima Seção](./3-JSX%20e%20Babel.md)\n\n
\n\n# JSX\n\nO 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.\n\nO React não obriga o uso do JSX, mas geralmente utilizamos por achar prático e por ele ajudar bastante na parte visual.\n\n## Exemplo\n\n```js\nconst elemento =
Olá, membro He4rt!!
;\n```\n\nEste código acima é o JSX propriamente dito, não é uma string e nem HTML, legal né?\n\nEm JSX, como acabamos misturando sintaxe HTML com Javascript, em atributos do HTML como `class` devemos substituir para `className` no JSX.\n\nSe pode utilizar JSX dentro de `if` e laços `for`, para mostrar um elemento, vamos ver os detalhes mais adiante.\n\n# Babel\n\nO Babel é um transpilador utilizado para transformar o JSX em outras versões Javascript, mas agora vem a dúvida, por quê?\n\nAtualmente nem todos os navegadores entendem o Javascript moderno, mas com o Babel, a compatibilidade entre todos se torna possível.\n\n \n\n[Ir para Próxima Seção](./4-Componentizacao.md)\n\n
\n\n# Componentização\n\n## O que é a componentização?\n\nA componentização dentro do React é um conceito bastante utilizado. Um dos seus principais objetivos é maximizar o reuso em uma aplicação.\n\nO **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.\n\n> Componentes são conjuntos isolados de lógica (javascript), visualização (JSX/HTML) e estilização (CSS).\n\nA componentização funciona da seguinte forma, dividimos nossa interface/aplicação em pequenas partes (componentes) que sozinhas conseguem ter funcionalidades específicas.\n\nNa 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.\n\n\n_Fonte: [QCode](https://www.qcode.in/learn-react-by-creating-a-comment-app/)_\n\n## Exemplos\n\n### Exemplo 1 - Simples\n\nPara 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.\n\n```js\nimport React from \"react\";\n\nexport default function Button() {\n return ;\n}\n```\n\nVocê 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.\n\n### Exemplo 2 - Avançado\n\nPodemos ter diversos tipos de componentes e cada componente com sua complexidade.\n\nNa [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á?\n\n```js\nimport React from \"react\";\n\nexport default function Comment() {\n return (\n
\n \n \n Mike\n
Yew, it gives you total control over how you structure your app and date flow.
\n \n
\n );\n}\n```\n\nNesse 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.\n\n### Exemplo 3 - Reuso\n\nComo dito no inicio, um dos principais objetivos da componentização é o `reuso`, dito isto podemos declarar componentes para serem utilizados dentro de outros.\nPara 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.\n\n```js\nimport React from \"react\";\n\nfunction Button() {\n return ;\n}\n\nfunction Comment() {\n return (\n
\n \n \n Mike\n
Yew, it gives you total control over how you structure your app and date flow.
\n );\n}\n```\n\nComo podem ver, podemos reutilizar quantas vezes quisermos um componente criado no React, a unica diferença será que a primeira letra sempre será maiuscula.\n\nPodemos 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.\n\n[Ir para Próxima Seção](./4.1-FormasDeDeclarar.md)\n\n
\n\n# Formas de declarar um componente\n\nAtualmente no React temos duas formas de declarar componentes:\n\n1. Componentes de classe\n2. Componentes de função(_Você viu este no ultimo capítulo_)\n\n## Componentes de classe\n\nComo o próprio nome já diz, declaramos um componenente criando uma classe javascript.\n\nPara declarar precisamos:\n\n- Criar uma classe\n- Extender essa classe com o **React.Component**.\n- Adicionar o método **render()** e seu retorno.\n\n Essa função chamada **render()** é responsavel por renderizar nosso componente em tela, ela sempre deve retornar um código html.\n\n```js\nimport React from \"react\";\n\nclass Welcome extends React.Component {\n render() {\n return (\n
\n
Renderizando um componente de classe
\n
\n );\n }\n}\n```\n\n## Componentes de Função\n\nEsta forma consiste em declarar componentes através de funções. Você já deve ter visto no capítulo anterior e em outros lugares.\n\nTudo que você precisa é:\n\n- Criar uma função com a primeira letra Maiuscula\n- Retornar um código HTML desta função\n\nPronto, agora tu já tem seu componente de função.\n\n> Observação: Apartir do React 17, não é necessário mais importar o React nos arquivos.\n\n```js\nimport React from \"react\";\n\nfunction ComponenteDeFuncao() {\n return (\n
\n
Meu componente de função
\n
\n );\n}\n```\n\n## Uma terceira forma??\n\nSim, 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:\n\n```js\nimport React from \"react\";\n\nconst ComponenteA = () => {\n return (\n
\n);\n```\n\nOk mas o que está acontecendo?\nDeclaramos uma váriavel com **letra maíuscula** e dizemos que ela é uma função que possui um retorno.\nNo caso do _ComponenteA_, abrimos uma função e fazemos o nosso return como estamos acostumados, isto é chamado **retorno explícito**. Já no _ComponenteB_ acontece o que chamados de **retorno implícito**, quisemos apenas renderizar um componente e não possuimos nenhum dado para tratar dentro da função, dessa forma o javascript irá entender que ali é o **return** da função.\n\n## Qual devo utilizar?\n\nAo chegar aqui tu aprendeu sobre como declarar os componentes e provavelmente surgiu a seguinte dúvida: \"Qual tipo de componente devo utilizar?\" \nA 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. \n**PERAI** \nNã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!\n\nPodemos concluir nesse capítulo que temos mais de uma forma para declarar componentes e o por que aprender ambas formas.\n\nNo 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.\n\n[Ir para Próxima Seção](./4.2-Propriedades.md)\n\n
\n\n# Propriedades\n\nNesse capitulo você irá aprender o que são **Propriedades** nos componentes React. \n\n**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\"):\n\n```html\n\n```\n\nNo React também é possível que nossos componentes façam o mesmo:\n\n```js\nconst elemento = \n```\n\nQuando o React vê um componente criado por você, ele irá passar todos os atributos JSX e componentes filhos para um objeto chamado **\"props\"**\n\nCom isso podemos acessar esse objeto de dentro do componente.\n\n## Exemplo 1: Componentes funcionais\n\nComo 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.\n\n```js\nimport React from 'react'\n\nfunction ComponenteComProps(props){\n return(\n
\n
{props.title}
\n
{props.subtitle}
\n
\n )\n}\n// Nosso componente podee receber as propriedades \"title\" e \"subtitle\".\n\nfunction Page(){\n return(\n
\n
Meus posts
\n \n
\n )\n}\n```\n\n## Exemplo 2: Componentes de classe\n\nNos componentes de classe podemos acessar o objeto **props** a partir do **this**.\n\n```js\nimport React from 'react'\n\nclass ComponenteComProps exteds React.Component{\n render(){\n return(\n
\n
{this.props.title}
\n
{this.props.subtitle}
\n
\n )\n\n }\n}\n// Nosso componente podee receber as propriedades \"title\" e \"subtitle\".\n\nclass Page extends React.Component{\n render(){\n return(\n
\n
Meus posts
\n \n
\n )\n }\n}\n```\n\n## Importante\n\nNã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.\n\nEx:\n\n```js\nimport React from \"react\";\n\n// O objetivo desse componente é ficar por \"cima\" de todos os outros.\nfunction ComponenteCaixa(props) {\n return
{props.children}
;\n}\n\nfunction Page() {\n return (\n \n
titulo
\n
titulo
\n
titulo
\n
titulo
\n
titulo
\n \n );\n}\n\n// Agora todos esses elemementos dentro do componente caixa serão renderizados pelo mesmo.\n```\n\nPodemos concluir que o React transforma todos os atributos e filhos em um unico objeto e podemos acessa-los através do objeto **props**.\n\nNos próximos capítulos vocês aprenderão sobre **Ciclo de vida de um componente** e **Estados**.\n\n[Ir para Próxima Seção](./5-Estados.md)\n\n
\n\n# Estados\n\nNeste capítulo você entenderá o que são **Estados** no React.\n\n## O que é?\n\nEstados 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.\n\n
Esse também é um dos motivos do React ser one way databinding (Significa que ele observa as mudanças por apenas um caminho para então atualizar a arvore de elementos(DOM)).
\n\nVamos pra mais um exemplo:\n\n
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 é.
\n\n## Como fazer no React?\n\nBom no React temos algumas formas de lidar com isso, seja pelos hooks ou pelos componentes de classe.\nComo não falamos sobre hooks ainda, trabalharemos apenas com componentes de classe.\n\nNesse exemplo vamos trabalhar apenas com um estado, porém é possivel colocar quantos quiser no objeto.\n\n```js\nimport React from 'react';\n\nclass Counter extends React.Component {\n // No contrutor de classe, criamos nossos estados através do this.state\n constructor(props){\n super(props);\n this.state = {\n counter: 0,\n }\n }\n\n // É possivel acessar o estado com this.state.nome-do-estado\n render(){\n return (\n
\n
Contador: {this.state.counter}
\n \n
\n )\n }\n}\n```\n\nAgora 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.\n\nDessa forma, devido ao conceito de imutabilidade, sempre iremos definir novos dados ao invés de modificar o dado.\nPara isso o React usa uma função chamada **setState** que adiciona um novo valor a variável.\n\n```js\n // No contrutor de classe, criamos nossos estados através do this.state\n constructor(props){\n super(props);\n this.state = {\n counter: 0,\n }\n }\n\n function handlePlusCounter(){\n // Através da função setState, podemos definir novos valores.\n this.setState({\n counter: this.state.counter + 1;\n })\n }\n\n function handleMinusCounter(){\n this.setState({\n counter: this.state.counter - 1;\n })\n }\n\n // É possivel acessar o estado com this.state.nome do estado\n render(){\n return (\n
\n
Contador: {this.state.counter}
\n \n \n \n
\n )\n }\n}\n```\n\nEntã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.\n\nO conceito de estado e seu uso no React é bem simples porém conforme a aplicação cresce a complexidade aumenta.\n\nNos próximos capítulos vocês aprenderão sobre **Ciclo de vida de um componente** e **Hooks**.\n\n[Ir para Próxima Seção](./6-Ciclo-de-vida.md)\n\n
\n\n# Ciclo de vida\n\nNeste capítulo você entenderá o que é **Ciclo de vida** no React.\n\n## Introdução\n\nQuando 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.\n\nO 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.\n\nAinda não entendeu? Vamos para um exemplo:\n\nVocê 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.\n\nEnfim, vamos ao que interessa!\n\nO React permite que manipulemos o ciclo de vida e podemos dividir o mesmo em 3 momentos:\n\n- Montagem (Quando aparece em tela)\n- Atualização (Quando altera um dado em tela)\n- Desmontagem (Quando desaparece da tela)\n\n\n\n## Montagem\n\nNesta 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.\n\nTemos três funções nesta etapa:\n\n- **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.\n\n > No React Hooks é ouseLayoutEffect.\n > Exemplo:\n > 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.\n\n```jsx\nimport React from \"react\";\nimport axios from \"axios\";\nclass CardPerson extends React.Component {\n constructor() {\n super();\n this.state = {\n name: \"\",\n birthday: \"\",\n };\n }\n // Funcão para pegar os dados\n async loadData() {\n try {\n // Fazemos uma requisição para algumaapi\n const response = await axios.get(\"URLDE ALGUMA API\");\n // Após pegar os dados setamos ele noestado\n this.setState({\n name: response.data.name,\n birthday: response.data.birthday,\n });\n } catch (error) {\n console.log(\"error\");\n }\n }\n componentWillMount() {\n loadData();\n }\n render() {\n return (\n
\n
{this.state.name}
\n
{this.state.birthday}
\n
\n );\n }\n}\n```\n\nATENÇÃO!\nEssa é uma parte do ciclo quase não utilizada, pois existem diversos problemas. Atualmente no React é recomendando o usar ocomponentDidMount.\n\n \n\n- **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.\n\n \n\n- **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.\n\n> No React Hooks é o useEffect.\n\n```jsx\nimport React from \"react\";\nimport axios from \"axios\";\nclass CardPerson extends React.Component {\n constructor() {\n super();\n this.state = {\n name: \"\",\n birthday: \"\",\n };\n }\n // Funcão para pegar os dados\n async loadData() {\n try {\n // Fazemos uma requisição para alguma api\n const response = await axios.get(\"URLDE ALGUMA API\");\n // Após pegar os dados setamos eles no estado\n this.setState({\n name: response.data.name,\n birthday: response.data.birthday,\n });\n } catch (error) {\n console.log(\"error\");\n }\n }\n componentDidMount() {\n loadData();\n }\n render() {\n return (\n
\n
{this.state.name}
\n
{this.state.birthday}
\n
\n );\n }\n}\n```\n\nApó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.\nVamos 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.\n\nA 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.\n\n## Atualização\n\nEsta 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.\nTemos três funções nesta etapa:\n\n \n\n- **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.\n Esse método existe apenas para questão de performance, confiar nele para evitar re-renderização pode ocasionar bugs indesejados.\n\n```jsx\nimport React from \"react\";\nimport axios from \"axios\";\n\nclass CardPerson extends React.Component {\n constructor(props) {\n super();\n this.state = {\n name: props.name,\n birthday: props.birthday,\n };\n }\n // Essa função recebe as próximas props e state\n shouldComponentUpdate(nextProps, nextState) {\n return nextProps.name !== this.state.name;\n }\n render() {\n return (\n
\n
{this.state.name}
\n
{this.state.birthday}
\n
\n );\n }\n}\n```\n\nOk, 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\n\n**Devo alertar novamente que essa função é utilizada em casos muito raros e não é recomendada sua utilização sem um motivo concreto.**\n\n \n\n- **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.\n\n \n\n- **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.\n\n> No React Hooks é o useEffect\n\n```jsx\nimport React from \"react\";\nimport axios from \"axios\";\nclass CardPerson extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: props.name,\n birthday: \"\",\n };\n }\n // Funcão para pegar os dados\n async loadData() {\n try {\n // Fazemos uma requisição para alguma api\n const response = await axios.get(\"URL DE ALGUMA API\");\n // Após pegar os dados setamos eles no estado\n this.setState({\n name: response.data.name,\n birthday: response.data.birthday,\n });\n } catch (error) {\n console.log(\"error\");\n }\n }\n // Guarda as propriedades e estados anteriores\n componentDidUpdate(prevProps, prevState) {\n if (prevState.name !== this.state.name) {\n loadData();\n }\n }\n render() {\n return (\n
\n
{this.state.name}
\n
{this.state.birthday}
\n
\n );\n }\n}\n```\n\nAqui sempre que o name for alterado,faremos uma requisição nova na api para pegar os novos dados.\n\n## Desmontagem\n\nEsta é 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.**\n\n- **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**).\n\n## Conclusão\n\nConcluí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.\nBom, 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.\nNos próximos tópicos você aprenderá sobre oque são hooks, como utilizar e seus equivalentes em relação ao ciclo de vida!\n\n[Ir para Próxima Seção](./7-Manipulando%20Eventos.md)\n\n
\n\n# Manipulando Eventos\n\n## Qual a diferença dos eventos do HTML para o React?\n\nBom, de certa forma a manipulação de eventos no React é bem parecida com o padrão do HTML porém existem algumas diferenças.\n\n- 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).\n- Graças ao JSX você passa uma função na propriedade do evento e não um texto.\n- No HTML podemos evitar o comportamento padrão de alguns elementos enviando false porém no React precisamos fazer isso o **preventDefault**.\n\nExemplo 1:\n\n```html\n\n\n\n\n\n```\n\nExemplo 2:\n\n```html\n\n\n```\n\n```jsx\n// React\n\nfunction Form() {\n function handleSubmit(event) {\n event.preventDefault();\n console.log(\"funfo\");\n }\n\n return (\n \n );\n // ou\n return (\n \n );\n}\n```\n\nVale 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.\n\n## Consigo passar mais de um parâmetro\n\nA 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!\n\nEx:\n\n```jsx\nfunction Form() {\n function handleSubmit(event) {\n event.preventDefault();\n console.log(\"funfo\");\n }\n\n return (\n \n );\n}\n```\n\nLembra de como é feito para lidar com eventos no JS puro?\nUm 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.\nEsse comportamento é melhor de explicar com Javascript puro da seguinte forma.\n\n```js\n// Pegamos o botão\ncont btnSave = document.querySelect('#saving');\n\n// Adicionamos um evento para ele através do addEventListner\n// 1º Parametro: nome do evento\n// 2º Parametro: Função de callback, lembrando que sempre irá receber um event como parametro.\nbtnSave.addEventListener('click', (event) => {\n\n})\n\n// Tu também pode fazer o seguinte\nfunction handleClick(event){\n //algo aqui dentro\n}\n\nbtnSave.addEventListener('click', handleClick)\n\n// Outra forma é ir direto pra uma propriedade do componente.\n\nbtnSave.click = handleClick;\n```\n\nEnfim, 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`.\n\n```js\nimport { useState } from \"react\";\n\nfunction inputChangeComponent() {\n const [text, setText] = useState(\"\");\n\n // Recebemos o evento\n // Vale lembrar que após o primeiro parametro, podemos simplesmente por qualquer parametro que quisermos.\n function handleChange(event) {\n setText(event.target.value);\n }\n\n return (\n <>\n \n \n );\n}\n```\n\nOutro 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.\nVamos utilizar o exemplo do form que fizemos lá em cima.\n\n```jsx\nfunction Form() {\n const id = 847875211221;\n\n function handleSubmit(event, id) {\n event.preventDefault();\n console.log(\"funfo\", id);\n }\n\n return (\n // 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.\n // 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.\n \n );\n}\n```\n\nNesse tópico você aprendeu sobre manipulação de eventos no React. Agora é praticar e estudar para poder melhorar cada vez mais.\nDeixo também o link da [documentação do React](https://pt-br.reactjs.org/docs/handling-events.html), para poderem ver direto da fonte.\n\n---\n\n[Ir para Próxima Seção](../Ferramentas%20de%20build/1-npm-yarn.md)\n\n
\n\n# React Hooks\n\n## O que são Hooks\n\nHooks 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'.\n\nPor 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.\n### Observações sobre os hooks:\n\n> 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.\n\n\nAgora 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.\n[Ir para a próxima seção](./8.1-useState.md)\n\n\n\n
\n\n# React Hooks\n\n## useState\n\nO _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.\n\nO _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.\n\nEsta 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.\n\nEste 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.\n\n### Exemplos:\n\n```jsx\nimport React, { useState } from \"react\";\n\nfunction Counter() {\n // Cria estado 'clicks' com valor inicial 0\n // Um jeito fácil de separar o retorno do useState é fazendo desestruturação de array\n const [clicks, setClicks] = useState(0);\n\n return (\n
\n
{clicks}
\n {/* A função 'setClicks' é usada para mudar valor de 'clicks' */}\n \n
\n );\n}\n```\n\n```jsx\nimport React, { useState } from \"react\";\n\nfunction Counter() {\n // Cria estado 'clicks' com valor inicial 0\n const [clicks, setClicks] = useState(0);\n // Cria estado para o campo de diferença\n const [valorInput, setValorInput] = useState(\"1\");\n\n function handleButton() {\n // Converte o valor do campo para um número\n const valorInputNumber = parseInt(valorInput);\n // Se o valor não for um número inteiro então não fazer nada\n if (isNaN(valorInputNumber)) return;\n // Alterar o contador somando o número obtido do campo\n setClicks((oldState) => oldState + valorInputNumber);\n }\n\n return (\n
\n
{clicks}
\n Diferença:\n setValorInput(e.target.value)}\n />\n {/* Quebra de linha entre o input e o botão */}\n \n
\n );\n}\n```\n\n### Erros comuns\n\n**Esquecer de importar o _useState_**\n\nO hook precisa ser importado do React antes de ser utilizado:\n\n```js\nimport { useState } from \"react\";\n```\n\n**Tentar alterar o estado diretamente (estado = novoValor)**\n\nO 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.\n\n**Esperar que o estado seja atualizado imediatamente**\n\nA 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.\n\n[Ir para a próxima seção](./8.2-useEffect.md)\n\n
\n\n# React Hooks\n\n## useEffect\n\nO _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.\n\n### Exemplo:\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction Counter() {\n const [clicks, setClicks] = useState(0);\n\n // Atualiza o título da página toda vez que 'clicks' muda de valor\n useEffect(() => {\n document.title = `Você clicou ${clicks} vezes`;\n }, [clicks]);\n\n return (\n
\n
{clicks}
\n \n
\n );\n}\n```\n\nCaso o _array_ de dependências seja declarado vazio (`[]`), a função de _callback_ vai ser executada apenas no momento em que o componente é montado.\n\n```jsx\nuseEffect(() => {\n // Essa função vai ser executada apenas quando o componente é montado\n}, []);\n```\n\nCaso você queira que uma função seja executada quando o componente é desmontado, basta retornar essa função dentro do _callback_.\n\n```jsx\nuseEffect(() => {\n // A função retornada pelo callback vai ser executada apenas quando o componente for desmontado\n return () => {\n console.log('Componente Desmontado');\n };\n}, []);\n```\n\nTambé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.\n\n```jsx\nuseEffect(() => {\n // Essa função vai ser executada toda vez que o componente renderizar\n});\n```\n\n[Ir para a próxima seção](./8.3-useContext.md)\n\n
\n\n# React Hooks\n\n## useContext\n\nO 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.\n\n```jsx\nconst UserContext = React.createContext();\n```\n### Provider\n\nO 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. \n\n\n```jsx\nconst user = {name: 'Matheus'} \n\n\n \n\n```\n\nNo código acima o recurso compartilhado é um objeto user. Para compartilhar um recurso basta que seja atribuído ao atributo value.\n\nEm seguida, podemos consumir esse contexto em nossos componentes individuais utilizando o hook useContext:\n\n```jsx\nconst user = useContext(UserContext);\n return
Olá, {user.name}
;\n);\n```\n\nAlguns dos exemplos que são utilizados com o useContext, são para gerenciar authenticação, seleção de temas. \n\n\nUns outro exemplo que é bastante utilizado e para adicionar os dark mode\n\nConcluindo, essa é uma forma de tornar o seu código mais limpo evitando a necessidade de utilizar várias e várias props.\n\n[Ir para a próxima seção](./8.4-useRef.md)\n\n
\n\n# React Hooks\n\n## useRef\n\nO _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.\n\nCom isso podemos salvar tambem elementos HTML para que consigamos efeitos que se assemelham aos métodos _Finding HTML Elements_ do JavaScript nos Browsers.\nEx.: `document.getElementById()`, `document.getElementsByClassName()` e etc.\n\nPara 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.\n\n### Exemplo:\n\n```jsx\nimport React, { useRef } from 'react';\n\nfunction ContactForm() {\n // Criamos uma const que recebe o useRef passando null como parâmetro inicial\n // Quando o elemento for renderizado em tela a variável inputRef será atualizada\n // A partir da primeira renderização, o valor será o elemento \n const inputRef = useRef(null);\n\n const handleContinue = () => {\n // Podemos acessar as informações do elemento\n // Nesse if verifico se o input possui algum valor, e se não, chamo a função focus\n if (!inputRef.current.value) {\n inputRef.current.focus();\n }\n };\n\n return (\n
\n {/* Quando esse elemento for renderizado atualizará a variável com a sua referência */}\n \n\n \n
\n );\n}\n```\n\n[Ir para a próxima seção](./8.5-useReducer.md)\n\n
\n\n# React Hooks\n\n## useReducer\n\no _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.\n\n### Exemplo:\n\n```jsx\nimport React, { useReducer } from 'react';\n\n// Criamos um valor inicial do nosso reducer\nconst initialInputState = {\n value: '',\n error: '',\n validation: /^[a-zA-Z]*$/\n};\n\n// Definimos o reducer para executar o dispatch e\n// sempre que chamarmos a action para modificar o valor\n// validamos o input da action\nconst inputReducer = (state, action) => {\n switch(action.type){\n case 'change':\n if(state.validation.test(action.value))\n return {...state, value: action.value, error: ''}\n else\n return {...state, value: action.value, error: 'Invalid input'}\n default:\n return state;\n }\n};\n\nfunction InputWithValidation() {\n const [inputState, dispatch] = useReducer(inputReducer, initialInputState);\n \n return (\n
\n {/*\n Definimos o valor padrão do input e adicionamos\n um dispatch para atualizar o valor\n */}\n dispatch({type: 'change', value: e.target.value}\n )} />\n
{inputState.error}
\n
\n );\n}\n```\n\nDesse 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.\n\n[Ir para a próxima seção](./8.6-useMemo.md)\n\n
\n\n# React Hooks\n\n## useMemo\n\nO _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.\n\n### Exemplo:\n\n```jsx\nimport { useMemo } from 'react';\n\nfunction List({ data }) {\n // Use useMemo para memorizar o resultado de filterData\n const filteredData = useMemo(() => filterData(data), [data]);\n\n return (\n
\n {filteredData.map(item => (\n
{item.name}
\n ))}\n
\n );\n}\n\nfunction filterData(data) {\n // Cálculo complexo que filtra os dados baseado em algum critério\n return data.filter(item => item.isActive);\n}\n```\n\nNeste 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.\n\nAqui, 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.\n\n[Ir para a próxima seção](./8.7-useCallback.md)\n\n
\n\n# React Hooks\n\n## useCallback\n\nO _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.\n\n### Exemplo:\n\n```jsx\nimport { useCallback } from 'react'\n\nfunction ProductPage({ productId, referrer, theme }) {\n // Função utilizada para fazer a chamada para o backend e enviar dados do formulário\n const handleSubmit = useCallback(\n (orderDetails) => {\n post('/product/' + productId + '/buy', {\n referrer,\n orderDetails,\n })\n },\n [productId, referrer]\n )\n\n return (\n
\n \n
\n )\n}\n```\n\nNeste 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.\n\n[Ir para a próxima seção](./9-React%20Error%20Boundaries.md)\n\n
\n\n# O que é Error Boundaries?\n\nAntes 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.\n\nA 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()`.\n\nÉ 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.\n\nEm certos tipos de erro não conseguimos usar o Error Boundary:\n\n- Manipuladores de evento\n- Código assíncrono (ex. callbacks de setTimeout ou requestAnimationFrame)\n- Renderização no servidor\n- Erros lançados na própria error boundary (ao invés de em seus filhos)\n\n# Utilização\n\nNesse componente estamos usando o try...catch para tratar um erro no componente ``, e isso de fato funciona, a tag `h1` é exibida no tratamento do erro.\n\n```jsx\nimport React from 'react'\n\nconst Counter = () => {\n try {\n users?.map(({ user }) => {\n return
He4rt User: {user}
\n })\n } catch {\n return
Deu ruim
\n }\n}\n\nconst App = () => {\n return \n}\n\nexport default App\n```\n\n\n\nMesmo dando erro, ele compila a aplicação:\n\n\n\n---\n\nPoré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:\n\n```jsx\nimport React from 'react'\n\nconst Counter = () => {\n users?.map(({user}) => {\n return
\n }\n}\n\nexport default App\n```\n\nErro:\n\n\nE 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.\n\n# Criando um componente Error Boundaries\n\nVamos 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.\n\n```jsx\nimport React, { Component } from 'react'\n\nclass ErrorBoundary extends Component {\n constructor(props) {\n super(props)\n this.state = { hasError: false }\n }\n\n // Este método é chamado quando ocorre um erro em qualquer componente filho\n componentDidCatch(error, info) {\n this.setState({ hasError: true })\n // Você pode registrar o erro ou realizar ações específicas aqui\n console.error('Erro capturado:', error)\n console.error('Informações do erro:', info)\n }\n\n render() {\n // Se ocorreu um erro, você pode renderizar uma mensagem de erro personalizada\n if (this.state.hasError) {\n return
Desculpe, algo deu errado.
\n }\n\n // Se não houve erro, renderiza normalmente os componentes filhos\n return this.props.children\n }\n}\n\n// Exemplo de componente que pode gerar um erro\nclass ComponenteComErro extends Component {\n render() {\n // Simulando um erro (isso seria geralmente uma operação que pode falhar)\n throw new Error('Erro simulado!')\n return
Conteúdo do componente com erro
\n }\n}\n\n// Componente pai usando o ErrorBoundary\nclass App extends Component {\n render() {\n return (\n \n
\n
Minha Aplicação
\n \n
\n \n )\n }\n}\n\nexport default App\n```\n\nPodemos 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.\n\n# Utilizando o `react-error-boundary`\n\nComo 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.\n\nVejamos como implementar o `react-error-boundary` seguindo o mesmo exemplo anterior:\n\n```jsx\nimport React from 'react'\n\nimport { ErrorBoundary } from 'react-error-boundary'\n\nconst Counter = () => {\n users?.map(({ user }) => {\n return
He4rt User: {user}
\n })\n}\n\nconst ErrorHandler = () => {\n return
Eita, deu ruim! D:
\n}\n\nconst App = () => {\n return (\n \n \n \n )\n}\n\nexport default App\n```\n\nResultado:\n\n\n\nTerminal:\n\n\n\nVeja que criamos um componente fallback para exibir caso ocorra algum erro em qualquer componente que está encapsulado no ``, onde diferente do `try...catch`, conseguimos fazer uma tratativa de erro global. Então se tivessemos vários componentes encapsulados no `` e algum deles ocorresse algum erro que não foi tratado localmente, seria exibido o componente da fallback\n\n# Método `onError`\n\nUsando o exemplo anterior, podemos adicionar o método `onError`:\n\n```jsx\nimport React from 'react'\n\nimport { ErrorBoundary } from 'react-error-boundary'\n\nconst Counter = () => {\n users?.map(({ user }) => {\n return
He4rt User: {user}
\n })\n}\n\nconst ErrorHandler = () => {\n return
Eita, deu ruim! D:
\n}\n\nconst App = () => {\n return (\n {\n console.log({ arg1, arg2 })\n }}\n >\n \n \n )\n}\n\nexport default App\n```\n\nPerceba que adicionamos uma `prop` `onError` no ``, se vermos o resultado `console.log` do `onError`:\n\n\n\nCom 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...\n\nVeja como ficaria o código se quiséssemos usar o onError para disparar algum evento em algum serviço:\n\n```jsx\nimport React from 'react'\n\nimport { ErrorBoundary } from 'react-error-boundary'\n\nconst Counter = () => {\n users?.map(({ user }) => {\n return
He4rt User: {user}
\n })\n}\n\nconst ErrorHandler = () => {\n return
Eita, deu ruim! D:
\n}\n\nconst notifyError = () => {\n // func para mandar notificação de erro para o sentry ou alguma outra plataforma de monitoramento\n}\n\nconst App = () => {\n return (\n {\n // Quando ocorre um erro não tratado, o React desmonta toda a tela.\n console.log({ arg1, arg2 })\n }}\n >\n \n \n )\n}\n\nexport default App\n```\n\nEm 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.\n\n---\n\nPodemos também registrar o erro para observabilidade. Veja o exemplo:\n\n```jsx\nimport React from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\n// Simulando um erro\nconst Counter = () => {\n throw new Error('Erro simulado!')\n return
He4rt User: {user}
\n}\n\nconst ErrorFallback = ({ error, resetErrorBoundary }) => {\n // Aqui, podemos registrar o erro para observabilidade\n registrarErroParaObservabilidade(error)\n\n return (\n
\n
Algo deu errado. Estamos trabalhando para resolver o problema!
\n \n
\n )\n}\n\nconst registrarErroParaObservabilidade = (error) => {\n // Simulando o envio do erro para um serviço de observabilidade (por exemplo, Sentry)\n console.error('Erro enviado para observabilidade:', error)\n // Lógica adicional para enviar o erro para um serviço externo\n // Exemplo: Sentry.captureException(error);\n}\n\nconst App = () => {\n return (\n {\n // Aqui você pode enviar o erro para um serviço de monitoramento\n // ou realizar outras ações de tratamento.\n console.error('Erro:', error)\n console.error('Informações do erro:', info)\n }}\n >\n \n \n )\n}\n\nexport default App\n```\n\nPodemos 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.\n\n# Error Boundary com StackTrace\n\nTambém podemos utilizar o error boundaries para exibir informações detalhadas de erro de forma mais amigável e sem desmontar toda a tela.\nVejamos o exemplo a seguir:\n\n```jsx\nimport React from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\n// Simulando o erro\nconst Counter = () => {\n throw new Error('Erro simulado!')\n return
\n )\n}\n\nconst App = () => {\n return (\n {\n // Aqui podemos enviar o erro para um serviço de monitoramento\n // ou realizar outras ações de tratamento.\n console.error('Erro:', error)\n console.error('Informações do erro:', info)\n }}\n >\n \n \n )\n}\n\nexport default App\n```\n\nNesse 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.\n\nLembrando 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.\n\n# Conclusão\n\nVimos 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`.\n\nFica 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.\n\n# Referências\n\n- [Doc antiga do react](https://pt-br.legacy.reactjs.org/docs/error-boundaries.html)\n- [Error Boundaries no ReactJS - Tratamento de Erros #014](https://www.youtube.com/watch?v=6FRzHRoZmG8&ab_channel=Jo%C3%A3oBibiano)\n- [A FORMA CORRETA DE TRATAR ERROS NO REACT](https://youtu.be/cV4JswN3L24)\n- [Trate erros de JavaScript no React com Error Boundaries](https://youtu.be/vfwbOgpSvQA)\n\n[Ir para a próxima seção](./Controlled-vs-uncontrolled-components.md)\n\n
\n\n# Controlled Components vs Uncontrolled Components\n\n## Controlled Components\n\nOs 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.\n\nA 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. \n\n```jsx\nconst Component = () => {\n const [name, setName] = useState(\"\")\n\n return (\n setName(event.target.value)}\n />\n )\n}\n```\n\nPara passar um valor padrão, basta colocar um valor inicial no estado que está controlando o componente.\n\n```diff\nconst Component = () => {\n- const [name, setName] = useState(\"\")\n+ const [name, setName] = useState(\"4noobs\")\n\n return (\n setName(event.target.value)}\n />\n )\n}\n```\n\n## Uncontrolled Components\n\nOs 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.\n\n```jsx\nconst Component = () => {\n const emailInput = useRef(null)\n\n const handleClick = () => {\n console.log(emailInput.target.value)\n }\n\n return (\n <>\n \n \n \n )\n}\n```\n\nPara passar um valor padrão, basta colocar a propriedade `defaultValue` com um valor inicial para o componente.\n\n```diff\nconst Component = () => {\n const emailInput = useRef(null)\n\n const handleClick = () => {\n console.log(emailInput.target.value)\n }\n\n return (\n <>\n \n \n \n )\n}\n```\n\n[Ir para a próxima seção](./Listas-no-react.md)\n\n
\n\n# Listas\n\n> Sumário:\n>\n> - [Como renderizar uma lista](#como-renderizar-uma-lista)\n> - [Oque são Keys e por que precisamos delas](#o-que-são-keys-e-por-que-precisamos-delas)\n> - [Posso utilizar Fragments ao renderizar uma lista?](#posso-utilizar-fragments-ao-renderizar-uma-lista)\n> - [Conclusão](#conclusão)\n\n# Como renderizar uma lista\n\nDurante 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. \nNo 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.\n\n```jsx\nconst lista = ['item1', 'item2', 'item3'];\n\nfunction Componente() {\n return (\n
\n {lista.map((item) => {\n return
{item}
;\n })}\n
\n );\n}\n```\n\n
\n\n\n
\n\nComo podemos ver no código acima, realizamos um mapeamento (map) literal da nossa lista para que ele retorne um componente/tag para cada item.\n\nAh, 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. \n\nVale 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.\n\n```jsx\nconst lista = ['item1', 'item2', 'item3'];\n\nfunction Componente() {\n return (\n
\n {lista.map((item) => (
{item}
)}\n
\n );\n}\n```\n\nVocê 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:\n\n
\n\n
\n\nPercebe-se que o erro basicamente nos diz: `Cada item de uma lista precisa ter uma chave (key) única`.\n\n# O que são Keys e por que precisamos delas\n\nNeste 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.).\n\n```jsx\nconst lista = ['item1', 'item2', 'item3'];\n\nfunction Componente() {\n return (\n
\n {lista.map((item) => (
{item}
)}\n
\n );\n}\n```\n\nVocê 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.\n\n`!!Nota importante -> Evite utilizar` \n\n- 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.\n\n- 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.\n\n- 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.\n\n```jsx\n\n```\n\n# Posso utilizar Fragments ao renderizar uma lista?\n\nSim, 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.\n\nNormalmente, utilizamos o componente Fragment por meio da famosa abreviação\n\n```jsx\n<>\n \n \n \n\n```\n\nMas, para listas precisa ser assim:\n\n```jsx\nimport { Fragment } from 'react';\n\nconst lista = [\n {\n id: 1,\n name: 'Fulano',\n idade: 15,\n },\n {\n id: 2,\n name: 'Fulano2',\n idade: 15,\n },\n];\n\nfunction Componente() {\n return (\n
\n {lista.map((item) => {\n return (\n \n // Geralmente por Id`s serem propriedades únicas, é muito utilizado\n como keys.\n {item.name}\n {item.idade}\n \n );\n })}\n
\n );\n}\n```\n\n# Conclusão\n\nAté aqui vimos como renderizar as listas no react e o motivo para algumas especificidades.\nA renderização de listas é algo que você com certeza irá utilizar no dia a dia e é muito importante saber as regras. \n\nEsperamos 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.\nNos vemos no próximo capitulo, seeyaa!\n\n[Ir para a próxima seção](./7-Manipulando%20Eventos.md)\n\n
\n\n# Refs\n\nHoje 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?\n\n> Sumário:\n>\n> - [O que é uma ref?](#o-que-é-uma-ref)\n> - [Formas de criar uma ref](#formas-de-criar-uma-ref)\n> - [Como manipular a DOM com uma ref?](#como-manipular-a-dom-com-uma-ref)\n> - [Como utilizar uma ref para armazenar valores](#como-utilizar-uma-ref-para-armazenar-valores)\n> - [Como passar uma ref para componentes customizados?](#como-passar-uma-ref-para-componentes-customizados)\n> - [Conclusão](#conclusão)\n\n# O que é uma ref\n\nNo React, `ref` é uma referência de valor. Ela tem o poder de armazenar informações sem desencadear uma nova renderização, ao contrário dos estados. Também é usada para manipular elementos da `DOM` (o React oferece suporte total para esse tipo de documentação, portanto, é preferível usar `refs` em vez da manipulação direta por meio do document).\n\n# Formas de criar uma ref\n\nA nossa querida biblioteca fornece apenas duas formas de criar uma `ref`.\n\n1. A forma mais moderna: através do hook [useRef](\"./8.4-useRef.md\") para componentes funcionais.\n\n```jsx\n import {useRef} from 'react'\n\n const Componente = () => {\n const ref = useRef(null)\n\n ...//Seu código abaixo\n }\n```\n\n2. A forma mais antiga é `createRef`, usada para instanciar refs em componentes de classe.\n\n```jsx\n import {createRef, Component} from 'react'\n\n class Componente extends Component {\n someRef = createRef()\n\n ...//Seu código abaixo\n\n }\n```\n\nAmbas as formas retornam para nós um objeto com a propriedade `current`. Essa propriedade irá conter o valor com o qual inicializamos nossa `ref`. Em outras palavras, se a criarmos declarando um objeto, o ref.current conterá um objeto; se a inicializarmos com um número (por exemplo, o número 5), o `ref.current` conterá o número 5.\n\nCaso tenha interesse em saber mais sobre o `useRef`, basta clicar [aqui](\"./8.4-useRef.md\") para ser redirecionado para o artigo deste hook. Lembrando que para todos os tópicos a seguir, iremos utilizar o `useRef`. Então caso você tenha interesse de ver exemplos com o `createRef`, recomendo fortemente esta [página na documentação do React](https://react.dev/reference/react/createRef#createref).\n\n# Como manipular a DOM com uma Ref\n\nNo React, conseguimos passar a propriedade `ref` em praticamente todas as tags HTML e componentes, tudo isso por meio da propriedade `ref`.\n\n```jsx\nimport {useRef} = 'react'\n\nfunction Componente(){\n const ref = useRef()\n\n return (\n
\n \n
\n )\n}\n```\n\nNo exemplo acima, adicionamos a nossa `ref` ao componente input. Com isso, o nosso `ref.current` trará informações a respeito do input.\n\nCaso tenha testado este código localmente e utilizado um `console.log` na `ref`, irá notar que no primeiro log o resultado será `undefined`. Isso acontece porque a atribuição do elemento apenas ocorrerá durante a montagem do nosso componente, e também não declaramos um valor inicial para o mesmo.\n\nEnfim, dentro do ref.current, temos acesso a diversas informações do componente, da mesma forma que teríamos ao utilizar o document.getElementsByTagName ou algum outro método de pesquisa na DOM.\n\n### Exemplos - Manipulando um input não controlado\n\nNeste exemplo, teremos um input onde o usuário pode escrever o que bem entender. Não iremos controlá-lo, ou seja, não iremos criar um estado e uma função para armazenar os valores e ditar quais regras o componente deve seguir para salvá-los. Queremos apenas pegar o valor digitado quando formos finalizar o nosso formulário.\n\n```jsx\nimport { useRef } from 'react';\n\nfunction Formulario() {\n const inputNameRef = useRef(); // Ref responsável pelo input onde será digitado o nome.\n const inputPasswordRef = useRef(); // Ref responsavél pelo input onde será digitada a senha.\n\n const onSubmit = (event) => {\n event.preventDefault(); // Evitar o comportamento padrão dos formulários, ou seja evitar que a tela recarregue.\n console.log({\n name: inputNameRef.current.value,\n password: inputPasswordRef.current.value,\n });\n\n // Quando essa função for executada, deverá printar no nosso console exatamente o que está escrito nos componentes.\n };\n\n return (\n \n );\n}\n```\n\nResultado\n\n\n# Como utilizar uma ref para armazenar valores\n\nBem, como já vimos anteriormente, podemos atribuir uma `ref` a um elemento HTML. Além disso, podemos atribuir valores, sejam números, textos ou até mesmo objetos! A maior vantagem é que essas alterações não geram uma re-renderização em nossa aplicação.\n\n### Exemplo - Contador que não mostra em tela.\n\n```jsx\nimport { useRef } from 'react';\n\nfunction Componente() {\n const counter = useRef(0);\n\n const updateCounter = () => {\n counter.current += 1;\n console.log(counter.current);\n };\n\n return (\n
\n \n
\n );\n}\n```\n\n\n\nBasicamente, não ocorre novas renderizações em tela, apenas os logs do valor sendo atualizado.\n\n### Exemplo - Contador que pode mostrar o valor em tela.\n\n```jsx\nimport { useRef, useState } from 'react';\n\nfunction Componente() {\n const [value, setValue] = useState(null);\n const [showValue, setShowValue] = useState(false);\n const counter = useRef(0);\n\n const updateCounter = () => {\n counter.current += 1;\n console.log(counter.current);\n };\n\n const toggleShowValue = () => setShowValue((prevState) => !prevState);\n\n return (\n
\n \n \n\n {showValue &&
{value}
}\n
\n );\n}\n```\n\n\n\n\nCerto, mas qual a diferença em relação ao exemplo anterior? Basicamente, como as `refs` não disparam novas renderizações, não podemos obter atualizações em tempo real na tela. Por isso, torna-se necessário utilizar estados para lidar com o mesmo.\n\nA partir desse ponto, a imaginação é o limite! É possível fazer muitas coisas. Inclusive, na própria documentação do React (link no final do artigo), existe um exemplo de um cronômetro que utiliza o `ref.current` como um `setInterval`.\n\n# Como passar uma ref para componentes customizados\n\nNormalmente, quando vamos usar em nossa aplicação algum componente, como o input ou qualquer outro, criamos um componente customizado para garantir que, em todos os locais de nossa aplicação, tenhamos o mesmo design e comportamento. No caso do input, talvez em algum momento você queira usá-lo sem nenhum controle, ou seja, como um `uncontrolled component`, e para isso usaríamos as `refs` que aprendemos anteriormente. No entanto, tenho uma má notícia: não conseguiríamos usá-lo da mesma forma que antes.\n\n```jsx\nconst CustomInput = ({value, label, onChange, ...rest}) => {\n return {\n \n }\n}\n\nconst App = () => {\n return (\n \n )\n}\n```\n\nEssa forma mencionada anteriormente não funcionará. Isso ocorre porque, por padrão no React, nossos componentes não expõem as refs para os elementos da `DOM` dentro deles (como inputs, tags, etc.).\n\nPara resolver esse problema, nossa querida biblioteca nos disponibiliza a função, ou melhor dizendo, um `HOC (High Order Component)`, que permite passar as refs para baixo.\n\nPara utilizá-lo, basta passar o componente desejado como `primeiro parâmetro`.\n\nNossos componentes sempre recebem as refs como `segundo parâmetro`, ou seja, `Component(props, ref)`.\n\nPodemos ver no exemplo abaixo que é bem simples de usar e não tem muito segredo.\n\n```jsx\nimport {forwardRef} from 'react'\nconst CustomInput = ({value, label, onChange, ...rest}, ref) => {\n return {\n \n }\n}\n\nexport default forwardRef(CustomInput)\n\n// ou\n\nconst CustomInput = forwardRef(({value, label, onChange, ...rest}, ref) => {\n return {\n \n }\n})\n```\n\nNo App, continuaria a mesma coisa.\n\n```jsx\nconst App = () => {\n return (\n \n )\n}\n```\n\n# Conclusão\n\nNeste artigo, vimos um pouco sobre `refs` e como utilizá-las de diversas formas. As `refs` são uma maneira de lidar com valores sem causar re-renderizações e até mesmo de obter informações dos componentes sem precisar utilizar os métodos da `DOM`. Muitas bibliotecas, principalmente as de formulários, como o `React Hook Form`, utilizam essa estratégia de `refs` por questões de desempenho.\n\nCaso queira se aprofundar ainda mais em tudo o que foi discutido aqui, deixo os links da documentação oficial do React.\n\n- [Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)\n- [useRef](https://react.dev/reference/react/useRef#i-cant-get-a-ref-to-a-custom-component)\n- [forwardRef](https://react.dev/reference/react/forwardRef)\n\nEspero que tenha gostado e caso tenha surgido alguma duvida, sinta-se livre para entrar em contato!\n\nSeeyaa!\n\n[Ir para a próxima seção](./Renderizacao-condicional.md)\n\n
\n\n# Renderização Condicional\n\nHoje falaremos sobre renderização condicional no React! O que é? Como utlizar?\n\n> Sumário:\n>\n> - [O que é a renderização condicional](#o-que-é-a-renderização-condicional)\n> - [Condicionando o retorno dos nossos componentes](#condicionando-o-retorno-dos-nossos-componentes)\n> - [Condicionando no JSX](#condicionando-no-jsx)\n> - [Condicionando com operador ternário](#condicionando-com-operador-ternário)\n> - [Condicionando com operador AND(&&)](#condicionando-com-operador-and)\n> - [Aumentando a complexidade com o OR(||)](#aumentando-a-complexidade-com-o-or)\n> - [Conclusão](#conclusão)\n\n# O que é a renderização condicional\n\nA renderização condicional é basicamente uma forma de alterar o que é mostrado em tela a partir de uma condição. Algo como utilizar um `if else` para algo, porém no JSX. Podemos ter diversas lógicas e alterar a visualização dos componentes, como por exemplo: `Um modal que só ira abrir quando o estado isOpen for true` ou `Um texto que quando o estado for true será \"batata\" e quando for false será \"ok\"`.\nBem simples, não? Agora vamos ver um pouco a respeito das formas de utilização.\n\n# Condicionando o retorno dos nossos componentes\n\nComo nós já sabemos, no final de todo componente sempre irá existir um `return` com o nosso HTML, certo? Então, podemos condicionar ele, adicionando alguma condição junto de um `segundo retorno`.\nSegue o exemplo abaixo:\n\n```jsx\nconst Componente = ({ data }) => {\n if (!data) {\n return (\n
\n
Dados não encontrados
\n
\n );\n }\n\n return (\n
\n
{data.nome}
\n
{data.idade}
\n
\n );\n};\n```\n\nNeste exemplo, nosso `Componente` recebe a propriedade `data` e renderiza `nome` e `idade`. Caso o componente não receba a propriedade, normalmente iria estourar um erro ou renderizaria `undefined` ou `null` em tela. Dito isto, podemos colocar uma condição antes do nosso `retorno padrão do componente`, neste caso adicionamos para caso o `componente não receba a propriedade data`, ele renderize uma div com o texto `Dados não encontrados`. Quando ele receber o valor, ele irá partir para a renderização padrão.\n\n`Nota: Isso é o mesmo que utilizar IF ELSE. Se acontecer algo faça tal, se não, faça isso.`\n\n# Condicionando no JSX\n\nGraças ao JSX, assim como virmos nos estados, podemos colocar variaveis dentro do nosso HTML, até mesmo fazer listas com 'map'. Ou seja, `podemos utilizar código javascript dentro do HTML`. Com isso também podemos fazer algumas condições dentro deles, utilizando alguns operadores como o `ternário e o AND(&&)`.\n\n# Condicionando com operador ternário\n\nVamos direto ao exemplo:\n\n```jsx\nimport { useState, useEffect } from 'react';\n\nconst Componente = () => {\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n setTimeout(() => setIsLoading(false), 3000);\n }, []);\n\n return (\n
\n {isLoading ? (\n
Loading...
\n ) : (\n
\n
Nome
\n
Idade
\n
\n )}\n
\n );\n};\n```\n\nNo exemplo acima, temos um componente com o estado de `isLoading`\nque quando for `true`, deve aparecer um texto escrito `loading` em tela. E quando for `false` deve aparecer os outros componentes. E isso tudo utilizando o ternário dentro do HTML.\n\n# Condicionando com operador AND(&&)\n\n```jsx\nimport { useState, useEffect } from 'react';\n\nconst Componente = () => {\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n setTimeout(() => setIsLoading(false), 3000);\n }, []);\n\n return (\n
\n
Nome
\n
Idade
\n {isLoading &&
Loading...
}\n
\n );\n};\n```\n\nNeste exemplo, alteramos o exemplo com `ternários` para mostrar o `AND operator, mais conhecido como &&`. Nesta situação, o elemento com o texto `loading...` só irá aparece quando o `isLoading` for `true`, quando for `false` será removido da tela. Como vocês podem ver, neste caso é `se for true renderize, se não, não renderize`.\n\nÉ muito bom utilizar quando temos elementos que só podem aparecer em tela sob alguma condição e não afeta os outros elementos.\n\n# Aumentando a complexidade com o OR(||)\n\nO operador OR(||) também conhecido como `OU` pode trazer uma complexidade maior e é muito util a depender do que você precisa na sua aplicação.\n\nExemplo misto com o operador ternário.\n\n```jsx\nimport { useState, useEffect } from 'react';\n\nconst Componente = () => {\n const [isLoading, setIsLoading] = useState(true);\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setTimeout(() => {\n setIsLoading(false);\n setHasError(true);\n }, 3000);\n }, []);\n\n return (\n
\n {isLoading || hasError ? (\n
Loading...
\n ) : (\n
\n
Nome
\n
Idade
\n
\n )}\n
\n );\n};\n```\n\nNeste exemplo, temos um novo estado chamado `hasError` que iniciará como `false` e ao terminar os três segundos do `setTimeout` irá ter seu valor alterado para `true`. Podemos ver uma leve diferença na condição do ternário, agora caso `isLoading ou hasError forem true` irá renderizar o texto \"Loading...\". Neste caso, se qualquer um dos dois estados for true, não irá renderizar as informações.\n\nExemplo com AND(&&):\n\n```jsx\nimport { useState, useEffect } from 'react';\n\nconst Componente = () => {\n const [isLoading, setIsLoading] = useState(true);\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setTimeout(() => {\n setIsLoading(false);\n setHasError(true);\n }, 3000);\n }, []);\n\n return (\n
\n
Nome
\n
Idade
\n {(isLoading || hasError) &&
Loading...
}\n
\n );\n};\n```\n\nNeste exemplo, basicamente `se isLoading ou hasError for true, renderiza o
Loading...
`\n\n# Conclusão\n\nNeste tópico você aprendeu sobre `Renderização condicional` no React, tenha certeza que irá utiliza-la com frequencia em seu dia a dia.\n\nCaso queira saber mais, segue o link da documentação do [React](https://react.dev/learn/conditional-rendering#conditionally-assigning-jsx-to-a-variable)\n\nEspero que tenham gostado do conteúdo, aso surja alguma duvida, sinta-se livre para entrar em contato! Então é isso, até a proxima! Seeyaaaa.\n\n[Ir para a próxima seção](./8-React%20Hooks.md)\n\n
\n\n# Introdução\n\n> Caso prefira, também escrevi esse artigo no meu [Blog](https://gabrielduete.com/pt-br/blog/art-of-lazy-loading) e no [DEV](https://dev.to/gabrielduete/the-art-of-lazy-loading-how-to-improve-your-frontend-app-performance-nextjsreact-4h5l).\n\nLazy Loading é uma estratégia de otimização de desempenho. Com essa estratégia,\ngarantimos que alguns recursos sejam carregados **somente quando realmente\nnecessários**, ou seja, quando estão prestes a entrar na **área visível da\npágina (viewport)**.\n\n## Visão geral\n\nPor padrão, podemos usar Lazy Loading em JavaScript, CSS, fontes, imagens e\niframes.\n\nPodemos definir o atributo `loading` em elementos `img` ou `iframe`, assim:\n\n\n\nCom isso, conseguimos instruir o navegador a **adiar o carregamento** desse\nelemento até que ele esteja prestes a ser exibido na tela.\n\n# Lazy Loading no Next.js\n\nNo Next.js, as coisas funcionam de forma um pouco diferente. Temos **duas\nestratégias nativas principais** para criar componentes com lazy loading, e vou\nadicionar mais uma que pode facilitar ainda mais nossa vida:\n\n- [Dynamic Imports (Next.js)](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic)\n- [React Lazy (React)](https://react.dev/reference/react/lazy)\n- [react-lazyload (biblioteca externa)](https://www.npmjs.com/package/react-lazyload)\n\n# 1. Dynamic Imports\n\nCom os **Dynamic Imports** do Next.js, podemos importar componentes\ndinamicamente, algo muito útil para componentes que **não são necessários no\ncarregamento inicial da página**.\n\nUm bom exemplo de uso é com componentes de feedback, como modais ou alertas, que\nsó são exibidos após alguma ação do usuário. Então, por que carregá-los logo no\ninício?\n\nPodemos importar apenas quando for realmente necessário!\n\nVeja um exemplo onde temos um botão e um componente `Snackbar` do Material UI.\nApós o clique, o Snackbar deve ser exibido com um aviso:\n\n\n\nResultado:\n\n\n\nPodemos ver que o `Snackbar` e o `Alert` são carregados inicialmente, mas só são\nutilizados **se** o usuário clicar no botão. E se ele **não** clicar? O\ncarregamento desses dois componentes se torna inútil.\n\nVamos olhar para o tamanho do Build, especialmente o \"First Load JS\":\n\n\n\nAgora, o mesmo exemplo usando **Dynamic Imports** para `Snackbar` e `Alert`:\n\n\n\nResultado idêntico:\n\n\n\nBuild:\n\n\n\nPodemos ver que o tamanho do **First Load JS** caiu significativamente!\n\n- De `43 KB` para `35.6 KB`\n- E de `148 KB` para `141 KB`\n\nVocê pode pensar: “Mas foi pouco!”. Estamos falando de **apenas uma página**,\ncom uma funcionalidade simples. Agora imagine isso em **todo o seu site**?\n\n### Vamos calcular o ganho total para 10 páginas:\n\n1. **Antes da otimização:**\n\n - Tamanho por página: **43 KB**\n - Total: **43 KB × 10 = 430 KB**\n\n2. **Depois da otimização:**\n - Tamanho por página: **35.6 KB**\n - Total: **35.6 KB × 10 = 356 KB**\n\n### **Economia total**\n\n- Redução: **430 KB - 356 KB = 74 KB**\n- Porcentagem: **(74 ÷ 430) × 100 ≈ 17,2%**\n\nIsso mostra que, em um site com muitas páginas, pequenas otimizações podem gerar\numa **grande diferença** no consumo de recursos e no tempo de carregamento.\n\n# 2. React Lazy\n\nTambém podemos usar o `React.lazy`, que é uma funcionalidade nativa do React\npara importar componentes dinamicamente — bem parecido com os dynamic imports do\nNext.js.\n\nA diferença é que aqui, **precisamos usar o `Suspense`** para envolver o\ncomponente, e passar um componente no `fallback`, que será exibido **enquanto o\ncomponente está sendo carregado**.\n\nEsse carregamento ocorre **apenas na primeira vez** que o componente é usado. Se\no usuário recarregar a página, será carregado novamente — mas se ele continuar\nnavegando, não haverá novo carregamento.\n\nExemplo:\n\n\n\nResultado:\n\n\n\nNote que no primeiro clique no botão, apareceu \"loading...\", que é o componente\ndefinido no fallback.\n\nBuild:\n\n\n\nHouve uma **redução ainda maior** do que com os Dynamic Imports do Next.js.\nPorém, há um **componente de loading adicional**, o que pode impactar na\nexperiência do usuário (UX).\n\nPor isso, **essa abordagem deve ser alinhada com o time de design e produto** —\npois exibir um loading pode não ser uma boa ideia em alguns casos. É\nrecomendável usar apenas quando o componente for **realmente pesado** ou a\npágina estiver **muito lenta**.\n\n# 3. React-Lazyload\n\nO `react-lazyload` funciona de forma um pouco diferente. Ele **não afeta\ndiretamente o carregamento inicial** da página, mas sim monitora **a posição dos\nelementos** em relação ao viewport.\n\nQuando um elemento estiver **próximo da tela**, ele será renderizado.\n\nOu seja, podemos usá-lo para renderizar **componentes pesados à medida que o\nusuário rola a página**.\n\nExemplo:\n\n\n\nEsse código gera 15 imagens. Imagine como seria pesado carregar todas de uma vez\nsó? Com o Lazyload, as imagens são carregadas **aos poucos**, conforme o usuário\nrola a página.\n\nResultado:\n\n\n\nNa aba “Network” do navegador, vemos que as imagens são carregadas **à medida\nque são exibidas** na tela.\n\nIsso traz um **grande ganho de performance**, garantindo que a internet do\nusuário não fique sobrecarregada.\n\n# Conclusão\n\nVimos práticas valiosas para melhorar a performance da sua aplicação usando Lazy\nLoading com Next.js e React. Aprendemos que é possível **carregar componentes,\nimagens e iframes apenas quando necessário**, reduzindo consumo de recursos e\nacelerando o carregamento das páginas.\n\nEspero que as explicações tenham sido claras. Qualquer dúvida, é só me chamar\npara conversar.\n\n**Fique com Deus e bons estudos!**\n\n[Caso queira, explore também a seção de Design Patterns.](../Design%20Patterns/1-Compound%20Components.md)\n\n
\n\n# O que é\n\nUsando do Next.js podemos renderizar (de modo simplificado, o processo de transformar os componentes React escritos em JSX para HTML) o conteúdo da página de diferentes formas, no lado do cliente, padrão do React, chamado de _Client-Side Rendering_ (CSR), e no lado do servidor com múltiplas abordagens que serão tratadas abaixo. Por padrão o Next.js irá renderizar o máximo das páginas do projeto no lado do servidor.\n\n# Por que devemos preferir renderizar no servidor?\n\nAs vantagens da renderização no servidor se dão de duas formas, (1) performance e (2) SEO. A performance se beneficia porque podemos \"guardar\" o HTML da página já pronto em servidores espalhados pelo mundo (CDN), isso também pode ocorrer com arquivos JavaScript porém além de serem maiores suas contrapartes em HTML, eles teriam de ser pegos pelo navegador do usuário e transformados em HTML, assim ganhamos velocidade no carregamento da página, lembrando que **quanto menos JavaScript for enviado para o cliente melhor**. Já para o SEO (Search Engine Optimization) a melhora vem do fato dos mecanismos de busca terem dificuldade em categorizar corretamente páginas que o conteúdo é gerado dinamicamente via JavaScript, então ao enviarmos HTML \"preenchido\" para o cliente facilitamos a indexação do nosso site em serviços como Google. Outra vantagem é por exemplo no caso do usuário ter uma conexão ruim, assim carregar pelo servidor é mais rápido que no cliente.\n\n# No lado do servidor (Server-Side Rendering - SSR)\n\nPodemos carregar dados dinamicamente, a cada request, com a função `getServerSideProps`, que deve ser exportada de uma página, dentro de um arquivo na pasta `pages`, o retorno da função é usado na população das props da página. Por exemplo, em uma rede social podemos carregar os 10 primeiros posts do feed de um usuário no lado do servidor e deixar apenas as postagens subsequentes para o navegador buscar. O SSR é, na maior parte dos casos, preferível comparado ao CSR mas ainda apresenta problemas, visto que caso alguma chamada realizada na função `getServerSideProps` leve muito tempo, o navegador irá ficar \"pendurado\" no request, aguardando sua resposta para mostrar o conteúdo da página\n\n```ts\n// /pages/feed/index.tsx\n\nexport default function Posts ({posts}) {\n ...\n // Logica da página\n}\n\n// Essa função será executada a cada request pela página /feed\nexport const getServerSideProps: GetServerSideProps = async (context) => {\n const firstPosts = await fetchPosts()\n\nreturn {\n props: {\n posts: firstPosts\n },\n};\n```\n\n# Geração estática (Static Site Generation - SSG)\n\nCaso os dados apresentados na página não mudem, podemos carregá-los apenas uma vez, no build do projeto, e deixar o HTML completamente pronto, para isso usamos a função `getStaticProps`. Essa funcionalidade pode ser útil quando construindo, por exemplo, um blog, já que os dados não serão mudados constantemente. Essa abordagem é a mais performática, sempre que possível tente usá-la.\n\n```ts\n// /pages/articles/index.tsx\n\nexport default function ArticlesList ({ articles }) {\n ...\n // Logica da página\n}\n\n// Essa função será executada apenas uma vez, no build do projeto\nexport const getStaticProps: GetStaticProps = async (context) => {\n const articles = await getArticles()\n\n return {\n props: {\n // Como a propriedade e a variável tem o mesmo nome, não precisamos\n // explicitar qual propriedade deve ser assimilada, equivalente a\n // fazermos `articles: articles`\n articles\n },\n\n}\n\n\n```\n\n# Geração estática incremental (Incremental Static Regeneration - ISR)\n\nCaso sua página possa ser gerada em _build time_ porém o conteúdo se altera com alguma frequência podemos usar da abordagem de site estático porém que se \"recarrega\" em um certo intervalo de tempo, para isso passamos a propriedade `revalidate` no retorno da função `getStaticProps`, com o intervalo em segundos que a página será buildada novamente. Isso pode ser útil no caso de um e-commerce em que a página inicial tem uma sessão de itens \"quentes\" que mostram os itens mais vendidos nas últimas 24 horas, uma informação assim, pode facilmente ser atualizada a cada 10 minutos. Para maioria dos casos o ISR apresenta o melhor dos dois mundos, conteúdo gerado dinamicamente e alta performance, se possível seu uso é recomendado junto ao SSG.\n\n```ts\n// /pages/index.tsx\n\nexport default function Home ({ hotItems }) {\n ...\n // Logica da página\n}\n\n// Essa função será executada no build do projeto e também a cada 10 minutos\nexport const getStaticProps: GetStaticProps = async (context) => {\n const trendingItems = await getTrending()\n\n return {\n props: {\n hotItems: trendingItems\n },\n revalidate: 600 // 10 (minutos) * 60 (segundos)\n}\n```\n"
},
{
"path": "docs/Roteamento/README.md",
"content": "
\n\n# Roteamento\n\nO roteamento é entrega de dados com base em algo, no nosso caso a nossa url. Quando você visita o **youtube.com** você está acessando a rota padrão do youtube, mas quando acessamos por exemplo **youtube.com/feed/explore** estamos acessando a rota \"*feed/explore*\", o explorar do youtube. Quando construimos um site podemos ter uma página home (representada normalmente pelo \"/\") que por padrão seria o nosso endereço, exemplo o **www.meusite.com** mas podemos ter também a rota \"*/posts* \"que teriam todos os posts do nosso site.\n\n## Roteamento com react\n\nO react em si não possui um gerenciamento próprio de rotas, mas podemos utilizar bibliotecas como o React Router ou ferramentas como Next.js ou Gatsby que veremos em breve para criarmos a nossas rotas. Nesse módulo é apresentado a utilização das bibliotecas React Router e TanStack Router.\n\n1. React Router\n 1. [Introdução](./React-Router/1-Introducao.md)\n 2. [Rotas Customizadas](./React-Router/2-Rotas-customizadas.md)\n2. TanStack Router\n 1. [Introdução](./TanStack-Router/1-Introducao.md)\n 1. [Type-Safety](./TanStack-Router/1.1-Type-Safety.md)\n 2. [Rotas Customizadas](./TanStack-Router/2-Rotas-customizadas.md)\n 3. [Layouts](./TanStack-Router/3-Layouts.md)\n 4. [Caching](./TanStack-Router/4-Caching.md)\n 5. [DevTools](./TanStack-Router/5-DevTools.md)\n\n
\n\n# React Router - Introdução\n\n> 🔥 **Tá com pressa?** Se liga no sumário:\n> 1. [O que é](#o-que-é-o-react-router)\n> 2. [Vantagens](#algumas-vantagens-da-utilização-do-react-router)\n> 3. [Instalação](#como-instalar-o-react-router)\n> 4. [Mão no código](#iniciando-com-o-react-router) \n> 4.1 [Estrutura das páginas](#construindo-a-estrutura-das-páginas) \n> 4.2 [Estruturando as rotas](#estruturando-rotas-com-o-react-router) \n> 4.3 [Utilizando na aplicação](#utilizando-o-react-router-na-aplicação)\n\n## O que é o React Router?\n\nAtualmente mantido pelo mesmo grupo de criadores do famoso framework web [Remix](https://remix.run/), o **React Router** é uma biblioteca para criação de rotas em aplicações React. Ele permite que você defina rotas para diferentes URLs em seu aplicativo e gerencie como os componentes são exibidos de acordo com essas rotas. Isso é essencial em diferentes tipos de aplicações devido à capacidade de criar e gerenciar as rotas da aplicação de maneira marcante e simples.\n\nEle foi um dos principais pioneiros do ramo de roteamento de aplicativos de página única (SPAs) e é amplamente utilizado na comunidade do React devido a sua facilidade de uso e flexibilidade. Ele permite que você defina rotas aninhadas, gerencie parâmetros de URL e proteja rotas com autenticação e autorização. Além disso também fornece recursos como navegação programática, gerenciamento de histórico e geração de rotas dinâmicas. \n\nEle também possui uma grande compatibilidade com bibliotecas e ferramentas externas, como [Redux](../../Controle%20de%20estado/2-Redux.md), para ajudar a gerenciar o estado global do aplicativo. Em resumo, o React Router é uma ferramenta poderosa para gerenciar a navegação em aplicativos React.\n\n## Algumas vantagens da utilização do React Router\n\n- [x] Possui uma impecável [documentação](https://reactrouter.com/)\n- [x] É vastamente utilizado, entretanto obter ajuda/informações é muito fácil\n- [x] Possui inúmeros hooks para carregamento e gerenciamento de dados internos e externos, navegação entre páginas, obtenção de parâmetros, dentre outros\n\n## Como instalar o React Router\n\nPara instalar o **React Router** em sua aplicação, basta utilizar algum dos comandos abaixo de acordo com o seu gerenciador de pacotes:\n\n```BASH\n# Utilizando npm\nnpm install react-router-dom\n# Utilizando Yarn\nyarn add react-router-dom\n# Utilizando pnpm\npnpm add react-router-dom\n```\n\n## Iniciando com o React Router\n\nPartindo para prática, no exemplo a seguir será criado uma aplicação com duas rotas, uma \"Página inicial\" e a página de \"Sobre nós\". Lembrando que a estrutura de pastas e arquivos foram apenas para uma simples exemplificação, podendo ser alterada de acordo com a necessidade/desejo do desenvolvedor.\n\n## Construindo a estrutura das páginas\n\nAbaixo foi criado uma estrutura de exemplo para essas páginas, onde cada uma possui um header com links para as outras páginas, e um conteúdo específico para cada uma delas.\n\n```TSX\nimport React from 'react';\n// importação do componente de âncora do React Router\nimport { Link } from 'react-router-dom';\n\n// ARQUIVO: pages/Home.tsx\nexport function Home() {\n return (\n
\n \n Página inicial Sobre nós\n \n
Bem-vindo ao react4noobs
\n
\n );\n}\n\n// ARQUIVO: pages/About.tsx\nexport function About() {\n return (\n
\n \n Página inicial Sobre nós\n \n
\n O projeto 4Noobs nasceu com o objetivo de ser um espaço onde as pessoas pudessem encontrar conteúdo de fácil entendimento em um primeiro encontro com determinado tema, promovendo uma melhor capacitação profissional. A intenção desse Open Source é que as pessoas de diferentes níveis de entendimento pudessem contribuir.\n
\n
\n );\n}\n```\n\n## Estruturando rotas com o React Router\n\nAgora que já temos as páginas criadas, vamos criar as rotas para elas utilizando o **React Router**.\n\n```TSX\n// ARQUIVO: router.ts\n\n// Importando funções do React Router\nimport { createBrowserRouter, RouteObject } from 'react-router-dom';\n\n// Importando as páginas da aplicação\nimport { Home } from './pages/Home';\nimport { About } from './pages/About';\n\n// Criando a rota para a página inicial\nconst homeRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript\n path: '/' // Caminho da rota\n element: // Componente que será renderizado\n}\n\n// Criando a rota para a página sobre nós\nconst aboutRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript\n path: '/about', // Caminho da rota\n element: About, // Componente que será renderizado\n};\n\n// Adicionando as rotas ao gerenciador\nconst routes: RouteObject[] = [homeRoute, aboutRoute]; // Note que aqui o objeto está sendo tipado, apenas utilize caso seu projeto possui TypeScript\n\n// Criando o gerenciador de rotas com o adapter para navegadores\nconst router = createBrowserRouter([routes]);\n\nexport default router;\n```\n\n### Qual a função do `createBrowserRouter`?\nO `createBrowserRouter` é uma função responsável por armazenar as rotas da aplicação web. Além de utilizar do DOM History API para fazer a alteração da rota e cuidar de toda o histórico de navegação da página. Dentro dela é possível ter um Array (Lista) de objetos, onde cada um deles é uma rota da aplicação, seguindo a seguinte estrutura:\n - **path**: Responsável por identificar o caminho da rota, como por exemplo `'/signin'` e `'/signup'`.\n - **element**: Responsável por renderizar o componente que será exibido na rota.\n\n## Utilizando o React Router na aplicação\n\nA partir do momento que já temos as rotas criadas com o **React Router**, basta utilizá-las na aplicação aplicando o Provider do próprio **React Router**, como mostra o exemplo a seguir:\n\n```TSX\n// ARQUIVO: main.tsx *ou inicializador da aplicação e semelhantes*\n\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\n// Importando o provider das rotas\nimport { RouterProvider } from 'react-router-dom';\n\n// Importando as rotas\nimport router from './router';\n\nReactDOM.createRoot(document.getElementById('root')).render(\n \n \n \n);\n```\n\nE pronto! A partir de agora já é possível navegar entre as páginas da aplicação utilizando o **React Router**.\n\n[Ir para Próxima Seção](./2-Rotas-customizadas.md)\n\n
\n\n# React Router - Rotas Customizadas\n\n> 🔥 **Tá com pressa?** Se liga no sumário:\n> 1. [Children Routes](#criando-children-routes-subrotas)\n> 2. [Rotas com parâmetros](#criando-rotas-com-parâmetros)\n> 3. [Consumindo parâmetros](#consumindo-parâmetros-de-uma-rota)\n> 4. [Navegando entre rotas](#navegando-entre-rotas) \n> 4.1 [Hook useNavigate](#utilizando-o-hook-usenavigate) \n> 4.2 [Componente Link](#utilizando-o-componente-link) \n> 5. [Navegando para rotas anteriores](#navegando-para-uma-rota-anterior) \n\n## Criando Children Routes (subrotas)\n\nChildren routes são rotas que são aninhadas dentro de outra rota. Elas são usadas para criar hierarquias de rotas, ou seja, criar uma estrutura de rotas para a sua aplicação.\n\nPor exemplo, imagine que você tem uma aplicação com uma página \"Perfil Logado\" e essa página possui as seguintes opções de navegação: \"Editar perfil\" e \"Alterar senha\". Em vez de ter duas rotas diferentes para cada opção, você pode criar uma rota \"Perfil\" e aninhar as três opções de navegação dentro dela como children routes.\n\nDessa forma, a rota \"Perfil\" seria o parent route e as outras três seriam as children routes, e ao acessar a rota \"perfil\", a aplicação saberia que as opções de navegação estão contidas nela, e renderizaria os componentes da rota filho correspondente.\n\nEm resumo Children routes são uma forma de organizar suas rotas de maneira hierarquica, ou seja, criando um parent route para seus componentes filho. Para criar uma children route no **React Router** é necessário inserí-las no createBrowserRouter também, assim como qualquer outra rota, como no exemplo abaixo:\n\n\n```TSX\n// ARQUIVO: routes.ts\n\n// Importando funções do React Router\nimport { createBrowserRouter, RouteObject } from 'react-router-dom';\n\n// ... Importação das páginas\n\n// Criando a Parent Route\nconst profileRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript\n path: '/' // Caminho da rota\n element: // Componente que será renderizado\n}\n\n// Criando as Children Routes\nconst editProfileRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript\n path: '/profile/edit', // Caminho da rota !! Note que é necessário inserir o path da parent route no início\n element: , // Componente que será renderizado\n};\nconst changePasswordRoute: RouteObject = { // Note que aqui o objeto está sendo tipado, apenas utilize tipagens caso seu projeto possuir TypeScript\n path: '/profile/change-password', // Caminho da rota !! Note que é necessário inserir o path da parent route no início\n element: , // Componente que será renderizado\n};\n\n// Adicionando as rotas ao gerenciador\nconst routes = [profileRoute, editProfileRoute, changePasswordRoute];\n\n// Criando o gerenciador de rotas com o adapter para navegadores\nconst router = createBrowserRouter([routes]);\n\nexport default router;\n```\n\n## Criando rotas com parâmetros\n\nAs rotas com parâmetros são aquelas que permitem passar dados dinâmicos através de sua URL. Isso é muito útil quando se deseja passar informações específicas, tal como o ID do usuário afim de exibir seu perfil e suas informações relacionadas.\n\nImagine que você é o desenvolvedor da funcionalidade de perfil público no website da He4rt e deseja exibir a página de perfil de um usuário específico quando o usuário clicar em um nome de usuário na lista de usuários. Em vez de criar uma rota para cada usuário manualmente, você pode criar uma rota única para a página de perfil e passar o ID do usuário como um parâmetro na URL.\n\nA sintaxe para criar uma rota com parâmetros é similar a criar uma rota normal, porém o nome do parâmetro é incluído dois pontos `:` em seu início. Por exemplo:\n\n```TSX\n// Criando a rota com parâmetro\nconst viewProfileRoute: RouteObject = {\n path: '/profile/:id',\n element: ,\n};\n```\n\n\n## Consumindo parâmetros de uma rota\n\nPara consumir os parâmetros de uma rota, você pode utilizar a função `useParams` do **React Router**. Essa função retorna um objeto que inclui parâmetros da rota, e você pode desestruturar esse objeto para obter os parâmetros que deseja. Veja o exemplo abaixo:\n\n```TSX\n// ARQUIVO: ViewProfile.tsx\n\n// Importando a função useParams do React Router\nimport { useParams } from 'react-router-dom';\n\nexport function ViewProfile() {\n // Obtendo os parâmetros da rota\n const { id } = useParams();\n\n return (\n // Renderizando o ID do perfil\n
O ID do Perfil Informado é: {id}
\n )\n}\n```\n\nAo acessar a rota `/profile/1234`, o resultado esperado é que o ID do perfil seja exibido na tela como \"O ID do Perfil Informado é: 1234\".\n\n## Navegando entre rotas\n\nPara navegar entre rotas, há duas formas de fazer isso: utilizando o hook `useNavigate` ou utilizando o componente `Link`.\n\n### Utilizando o hook `useNavigate`\n\nO hook `useNavigate` retorna uma função que permite navegar para uma rota específica. Para utilizá-lo, basta importar a função `useNavigate` do **React Router** e chamar a função retornada por ela. Veja o exemplo abaixo:\n\n```TSX\n// Importando a função useNavigate do React Router\nimport { useNavigate } from 'react-router-dom';\n\nexport function ExampleRoute() {\n // Obtendo a função de navegação\n const navigate = useNavigate();\n\n function handleNavigateToOtherUser(id: string) {\n return navigate({\n pathname: `/profile/${id}`,\n })\n }\n\n return (\n // Renderizando o botão de navegação\n \n )\n}\n```\n\n### Utilizando o componente `Link`\n\nO componente `Link` é um componente que permite navegar para uma rota específica. Para utilizá-lo, basta importar o componente `Link` do **React Router** e passar o caminho da rota para qual você deseja navegar. Veja o exemplo abaixo:\n\n```TSX\n// Importando o componente Link do React Router\nimport { Link } from 'react-router-dom';\n\nexport function ExampleRoute() {\n return (\n // Renderizando o botão de navegação\n \n Navegar para usuário 1234\n \n )\n}\n```\n\n## Navegando para uma rota anterior\n\nPara navegar para a rota anterior, basta utilizar os conteitos de navegação anteriormente, porém inserindo como pathname um `-1` para voltar exatamente para a página anterior. Veja o exemplo abaixo:\n\n```TSX\n// Importando a função useNavigate do React Router\nimport { useNavigate } from 'react-router-dom';\n\nexport function ExampleRoute() {\n // Obtendo a função de navegação\n const navigate = useNavigate();\n\n function handleNavigateToPreviousRoute(id: string) {\n return navigate({\n pathname: -1, // Número de quantas páginas você deseja voltar\n })\n }\n\n return (\n // Renderizando o botão de navegação\n \n )\n}\n```\n\nE pronto! A partir de agora já é possível criar rotas dinâmicas e navegar na aplicação utilizando o **React Router**.\n\n[Ir para Próxima Seção]() \n\n
\n\n# TanStack Router\n\n> 🔥 **Tá com pressa?** Se liga no sumário:\n> 1. [O que é](#o-que-é-o-tanstack-router) \n> 1.1. [TypeSafety](./1.1-Type-Safety.md)\n> 2. [Vantagens](#algumas-vantagens-da-utilização-do-tanstack-router)\n> 3. [Instalação](#como-instalar-o-tanstack-router)\n> 4. [Mão no código](#iniciando-com-o-tanstack-router) \n> 4.1 [Estrutura das páginas](#construindo-a-estrutura-das-páginas) \n> 4.2 [Estruturando as rotas](#estruturando-rotas-com-o-tanstack-router) \n> 4.3 [Utilizando na aplicação](#utilizando-o-tanstack-router-na-aplicação) \n\n## O que é o TanStack Router?\n\nCriada pelos mesmos criadores do famoso [TanStack Query](https://tanstack.com/query/latest) (antigamente chamado de `React Query`), o **TanStack Router** é um novo framework agnóstico de bibliotecas para criação de rotas de forma simples e escalável em aplicações de diversos níveis com foco em revolucionar a maneira de como são gerenciadas as rotas nessas aplicações.\n\nUma das principais vantagens ao se utilizar essa biblioteca é o fato de possuir um poderoso gerenciamento de cache embutido em seu núcleo, assim como o [TanStack Query](https://tanstack.com/query/latest), melhorando muito mais a experiência do usuário ao navegar em sua aplicação, que por sua vez se torna mais fluida.\n\nAlém disso, ela também é baseada em grandes ferramentas já conhecidas, tais como [React Router](https://reactrouter.com/), [Next.js](https://nextjs.org/) e [Remix](https://remix.run/), porém com uma base de código 100% reformulada visando performance, segurança e utilização de boas práticas do [TypeScript](https://www.typescriptlang.org/) e seu [Type-Safety](./1.1-Type-Safety.md), melhorando assim também a experiência do desenvolvedor, principalmente em aplicações grandes com diversas pessoas trabalhando ao mesmo tempo.\n\nVale ressaltar que no momento no qual este conteúdo foi produzido (jan/2023), o framework ainda está em fase beta, entretanto novas atualizações ainda serão implementadas até a versão final, que deve ser lançada em breve.\n\n## Algumas vantagens da utilização do TanStack Router\n\n- [x] Suporte completo ao TypeScript seguindo boas práticas com Type-Safe\n- [x] Cacheamento automático (ou manual caso preferir)\n- [x] Agnóstico de Frameworks (Por enquanto disponível apenas para React, mas sinta-se a vontade para [contribuir com novas implementações para o projeto](https://github.com/tanstack/router))\n- [x] Pré-carregamento automática de rotas\n- [x] DevTools própria para depuração\n- [x] Elementos de rotas assíncronos\n- [x] Validação, formatação, serialização e processamento de dados com a Search Param API\n\n## Como instalar o TanStack Router\n\nPara instalar o **TanStack Router** em sua aplicação, basta utilizar algum dos comandos abaixo de acordo com o seu gerenciador de pacotes:\n\n```BASH\n# Utilizando npm\nnpm install @tanstack/react-router@beta --save\n# Utilizando Yarn\nyarn add @tanstack/react-router@beta\n# Utilizando pnpm\npnpm add @tanstack/react-router@beta\n```\n\n## Iniciando com o TanStack Router\n\nPartindo para prática, no exemplo a seguir será criado uma aplicação com duas rotas, uma \"Página inicial\" e a página de \"Sobre nós\". Lembrando que a estrutura de pastas e arquivos foram apenas para uma simples exemplificação, podendo ser alterada de acordo com a necessidade/desejo do desenvolvedor.\n\n## Construindo a estrutura das páginas\n\nAbaixo foi criado uma estrutura de exemplo para essas páginas, onde cada uma possui um header com links para as outras páginas, e um conteúdo específico para cada uma delas.\n\n```TSX\nimport React from 'react';\n// importação do componente de âncora do TanStack Router\nimport { Link } from '@tanstack/react-router';\n\n// ARQUIVO: pages/Home.tsx\nexport function Home() {\n return (\n
\n \n Página inicial Sobre nós\n \n
Bem-vindo ao react4noobs
\n
\n );\n}\n\n// ARQUIVO: pages/About.tsx\nexport function About() {\n return (\n
\n \n Página inicial Sobre nós\n \n
\n O projeto 4Noobs nasceu com o objetivo de ser um espaço onde as pessoas pudessem encontrar conteúdo de fácil entendimento em um primeiro encontro com determinado tema, promovendo uma melhor capacitação profissional. A intenção desse Open Source é que as pessoas de diferentes níveis de entendimento pudessem contribuir.\n
\n
\n );\n}\n```\n\n## Estruturando rotas com o TanStack Router\n\nAgora que já temos as páginas criadas, vamos criar as rotas para elas utilizando o **TanStack Router**.\n\n```TSX\n// ARQUIVO: router.ts\n\n// Importando funções do TanStack Router\nimport { ReactRouter, createRouteConfig } from '@tanstack/react-router';\n\n// Importando as páginas da aplicação\nimport { Home } from './pages/Home';\nimport { About } from './pages/About';\n\n// Criando o gerenciador de rota\nconst rootRoute = createRouteConfig();\n\n// Criando a rota para a página inicial\nconst homeRoute = rootRoute.createRoute({\n path: '/', // Caminho da rota\n component: Home, // Componente que será renderizado\n});\n\n// Criando a rota para a página sobre nós\nconst aboutRoute = rootRoute.createRoute({\n path: '/about', // Caminho da rota\n component: About, // Componente que será renderizado\n});\n\n// Adicionando as rotas ao gerenciador\nconst routes = [homeRoute, aboutRoute];\nconst routeConfig = rootRoute.addChildren(routes);\n\n// Criando o gerenciador de rotas com o adapter para react\nconst router = new ReactRouter({\n routeConfig,\n defaultPreload: 'intent'\n});\n\nexport default router;\n```\n### ⭐ Habilitando o [Type-Safety](./1.1-Type-Safety.md) em aplicações com o Typescript\n\n```TSX\ndeclare module '@tanstack/react-router' {\n interface RegisterRouter {\n router: typeof router\n }\n}\n```\n\n## Utilizando o TanStack Router na aplicação\n\nA partir do momento que já temos as rotas criadas com o **TanStack Router**, basta utilizá-las na aplicação aplicando o Provider do próprio **TanStack Router**, como mostra o exemplo a seguir:\n\n```TSX\n// ARQUIVO: App.ts *ou inicializador da aplicação e semelhantes*\n\nimport React from 'react';\n\n// Importando o provider das rotas\nimport { RouterProvider } from '@tanstack/react-router';\n\n// Importando as rotas\nimport router from './router';\n\nfunction App() {\n // Utilizando as rotas na aplicação\n return ;\n}\n\nexport default App;\n```\n\nE pronto! A partir de agora já é possível navegar entre as páginas da aplicação utilizando o **TanStack Router**.\n\n[Ir para Próxima Seção](./2-Rotas-customizadas.md)\n\n
\n\n## Type-Safety\nType-safety em TypeScript significa que o código é verificado em tempo de compilação para garantir que os tipos de dados sejam usados de maneira consistente e correta. Isso ajuda a evitar erros comuns, como tentar usar uma função com argumentos incorretos ou atribuir uma variável a um tipo de dado incorreto. TypeScript fornece uma série de tipos de dados básicos, como números, strings e booleanos, além de suporte para tipos personalizados, como classes e interfaces. Ao usar esses tipos, você pode garantir que seu código seja mais confiável e fácil de manter. Um exemplo muito claro dos problemas que gerenciadores de rota sem type-safety podem causar é o seguinte:\n\n```TSX\n // Exemplo de rota\n \n```\n\nNote que os parametros dessa query são extensos e podem ser facilmente confundidos, enviados no formato incorreto ou até mesmo esquecidos, gerando problemas na aplicação.\n```TSX\n \n // ^ O parametro \"sortBy\" foi enviado incorretamente e esqueceram do \"filterBy\"\n```\n\nAlém disso, a qualquer momento o desenvolvedor pode alterar o caminho/nome da rota e esquecer de alterar em algum outro lugar da aplicação, gerando ainda mais problemas.\n```TSX\n // ... Rota original alterada para `clients-by`\n \n // ^ No lugar de \"/clients\" deveria ser \"/clients-by\", porém o desenvolvedor se esqueceu disso :(\n```\n\nPara resolver esses problemas, o **TanStack Router** utiliza o sistema de Type-Safety para que o desenvolvedor possa definir os parametros da rota e o tipo de dado que cada um deve receber, além de poder definir o caminho/nome da rota de forma na qual a própria IDE já acusa erros em desenvolvimento. Isso será explanado melhor no tópico de [**Rotas customizadas**](./2-Rotas-Customizadas.md).\n\n
\n\n# TanStack Router - Rotas Customizadas\n\n> 🔥 **Tá com pressa?** Se liga no sumário:\n> 1. [Children Routes](#criando-children-routes-subrotas)\n> 2. [Rotas com parâmetros](#criando-rotas-com-parâmetros)\n> 3. [Consumindo parâmetros](#consumindo-parâmetros-de-uma-rota)\n> 4. [Navegando entre rotas](#navegando-entre-rotas) \n> 4.1 [Hook useNavigation](#utilizando-o-hook-usenavigation) \n> 4.2 [Componente Link](#utilizando-o-componente-link) \n> 5. [Navegando para rotas anteriores](#navegando-para-uma-rota-anterior) \n\n## Criando Children Routes (subrotas)\n\nChildren routes são rotas que são aninhadas dentro de outra rota. Elas são usadas para criar hierarquias de rotas, ou seja, criar uma estrutura de rotas para a sua aplicação.\n\nPor exemplo, imagine que você tem uma aplicação com uma página \"Perfil Logado\" e essa página possui as seguintes opções de navegação: \"Editar perfil\" e \"Alterar senha\". Em vez de ter duas rotas diferentes para cada opção, você pode criar uma rota \"Perfil\" e aninhar as três opções de navegação dentro dela como children routes.\n\nDessa forma, a rota \"Perfil\" seria o parent route e as outras três seriam as children routes, e ao acessar a rota \"perfil\", a aplicação saberia que as opções de navegação estão contidas nela, e renderizaria os componentes da rota filho correspondente.\n\nEm resumo Children routes são uma forma de organizar suas rotas de maneira hierarquica, ou seja, criando um parent route para seus componentes filho. Para criar uma children route no **TanStack Router** basta utilizar o método `createRoute` do parent route, como no exemplo abaixo:\n\n```TSX\n// ARQUIVO: routes.ts\n\n// Importando funções do TanStack Router\nimport { ReactRouter, createRouteConfig } from '@tanstack/react-router';\n\n// ... Importação das páginas\n\nlet rootRoute = createRouteConfig();\n\n// Criando a Parent Route\nconst profileRoute = rootRoute.createRoute({\n path: '/profile', // Caminho da rota\n});\n\n// Criando as Children Routes\nconst editProfileRoute = profileRoute.createRoute({\n path: '/edit', // Caminho da rota\n component: EditProfile, // Componente que será renderizado\n});\nconst changePasswordRoute = profileRoute.createRoute({\n path: '/change-password', // Caminho da rota\n component: ChangePassword, // Componente que será renderizado\n});\n\n// Adicionando as Children Routes ao Parent\nconst profileRoutes = [editProfileRoute, changePasswordRoute];\nconst profileRouteConfig = profileRoute.addChildren(profileRoutes);\n\n// Adicionando as rotas ao gerenciador\nconst routes = [profileRouteConfig];\nconst routeConfig = rootRoute.addChildren(routes);\n\n// ... Criação do Router\n```\n\n## Criando rotas com parâmetros\n\nAs rotas com parâmetros são aquelas que permitem passar dados dinâmicos através de sua URL. Isso é muito útil quando se deseja passar informações específicas, tal como o ID do usuário afim de exibir seu perfil e suas informações relacionadas.\n\nImagine que você é o desenvolvedor da funcionalidade de perfil público no website da He4rt e deseja exibir a página de perfil de um usuário específico quando o usuário clicar em um nome de usuário na lista de usuários. Em vez de criar uma rota para cada usuário manualmente, você pode criar uma rota única para a página de perfil e passar o ID do usuário como um parâmetro na URL.\n\nA sintaxe para criar uma rota com parâmetros é similar a criar uma rota normal, porém o nome do parâmetro é incluído um cifrão em seu início. Por exemplo:\n\n```TSX\n// ARQUIVO: routes.ts\n\n// Importando funções do TanStack Router\nimport { ReactRouter, createRouteConfig } from '@tanstack/react-router';\n\n// ... Importação das páginas\n\nlet rootRoute = createRouteConfig();\n\n// Criando a rota com parâmetro\nconst viewProfileRoute = rootRoute.createRoute({\n path: '/profile/$id',\n component: ViewProfile,\n});\n\n// Adicionando a rota ao gerenciador\nconst routes = [viewProfileRoute];\nconst routeConfig = rootRoute.addChildren(routes);\n\n// ... Criação do Router\n```\n\n## Consumindo parâmetros de uma rota\n\nPara consumir os parâmetros de uma rota, você pode utilizar a função `useMatch` do **TanStack Router**. Essa função retorna um objeto que inclui parâmetros da rota, e você pode desestruturar esse objeto para obter os parâmetros que deseja. Veja o exemplo abaixo:\n\n```TSX\n// ARQUIVO: ViewProfile.tsx\n\n// Importando a função useMatch do TanStack Router\nimport { useMatch } from '@tanstack/react-router';\n\nexport function ViewProfile() {\n // Obtendo os parâmetros da rota\n const { params } = useMatch({\n from: \"/profile/$id\", // Caminho da rota, note que se você habilitou o Type-Safe, já irá se auto-completar\n });\n\n // Desestruturando os parâmetros\n const { id } = params;\n\n return (\n // Renderizando o ID do perfil\n
O ID do Perfil Informado é: {id}
\n )\n}\n```\n\nAo acessar a rota `/profile/1234`, o resultado esperado é que o ID do perfil seja exibido na tela como \"O ID do Perfil Informado é: 1234\".\n\n## Navegando entre rotas\n\nPara navegar entre rotas, há duas formas de fazer isso: utilizando o hook `useNavigation` ou utilizando o componente `Link`.\n\n### Utilizando o hook `useNavigation`\n\nO hook `useNavigation` retorna uma função que permite navegar para uma rota específica. Para utilizá-lo, basta importar a função `useNavigation` do **TanStack Router** e chamar a função retornada por ela. Veja o exemplo abaixo:\n\n```TSX\n// Importando a função useNavigation do TanStack Router\nimport { useNavigation } from '@tanstack/react-router';\n\nexport function ExampleRoute() {\n // Obtendo a função de navegação\n const navigate = useNavigation();\n\n function handleNavigateToOtherUser(id: string) {\n return navigate({\n to: \"/profile/$id\",\n params: { id },\n })\n }\n\n return (\n // Renderizando o botão de navegação\n \n )\n}\n```\n\n### Utilizando o componente `Link`\n\nO componente `Link` é um componente que permite navegar para uma rota específica. Para utilizá-lo, basta importar o componente `Link` do **TanStack Router** e passar o caminho da rota para qual você deseja navegar. Veja o exemplo abaixo:\n\n```TSX\n// Importando o componente Link do TanStack Router\nimport { Link } from '@tanstack/react-router';\n\nexport function ExampleRoute() {\n return (\n // Renderizando o botão de navegação\n \n Navegar para usuário 1234\n \n )\n}\n```\n\n## Navegando para uma rota anterior\n\nPara navegar para a rota anterior, você pode utilizar a variável history desestruturada do hook `useRouter` do **TanStack Router**. Essa variável contém é um objeto que contém a função `back` que permite navegar para a rota anterior. Veja o exemplo abaixo:\n\n```TSX\n// Importando a função useRouter do TanStack Router\nimport { useRouter } from '@tanstack/react-router';\n\nexport function ExampleRoute() {\n // Obtendo a variável history\n const { history } = useRouter();\n\n function handleNavigateToPreviousRoute() {\n return history.back();\n }\n\n return (\n // Renderizando o botão de navegação\n \n )\n}\n```\n\nE pronto! A partir de agora já é possível criar rotas dinâmicas e navegar na aplicação utilizando o **TanStack Router**.\n\n[Ir para Próxima Seção](./3-Layouts.md)\n\n
\n\n# TanStack Router - Layouts\n\n> 🔥 **Tá com pressa?** Se liga no sumário:\n> 1. [Definição](#o-que-são-layouts-aplicado-no-contexto-de-rotas)\n> 2. [Estrutura das páginas](#construindo-a-estrutura-das-páginas)\n> 3. [Estrutura do Layout](#construindo-a-estrutura-do-layout)\n> 4. [Estruturando as rotas](#estruturando-rotas-com-o-tanstack-router) \n\n## O que são Layouts aplicado no contexto de rotas?\n\nOs Layouts são elementos geralmente utilizados para definir a estrutura padrão numa aplicação, componentes nos quais são comuns em várias páginas do aplicativo, como por exemplo o cabeçalho e o rodapé, que são usados como um container para outros componentes que representam o conteúdo específico de cada página.\n\nNo **TanStack Router** isso é feito utilizando um truque o componente dentro da renderização da Parent Route.Isso permite que você mantenha a estrutura básica de suas páginas consistente, enquanto ainda sendo capaz de renderizar conteúdo dinâmico baseado na rota atual.\n\n## Construindo a estrutura das páginas\n\nAbaixo foi criado uma estrutura de exemplo para essas páginas, onde cada uma possui um conteúdo específico para cada uma delas.\n\n```TSX\nimport React from 'react';\n\n// ARQUIVO: pages/Home.tsx\nexport function Home() {\n return (\n
Bem-vindo ao react4noobs
\n );\n}\n\n// ARQUIVO: pages/About.tsx\nexport function About() {\n return (\n
\n O projeto 4Noobs nasceu com o objetivo de ser um espaço onde as pessoas pudessem encontrar conteúdo de fácil entendimento em um primeiro encontro com determinado tema, promovendo uma melhor capacitação profissional. A intenção desse Open Source é que as pessoas de diferentes níveis de entendimento pudessem contribuir.\n
\n );\n}\n```\n\n## Construindo a estrutura do Layout\n\nAbaixo foi criado uma estrutura de exemplo para um Layout, que representa o cabeçalho replicado nas páginas.\n\n```TSX\n// ARQUIVO: layouts/RootLayout.tsx\nexport function RootLayout() {\n return (\n <>\n {/* Esse header será replicado para as sub rotas da Parent Route que você colocar o Layout */}\n \n Página inicial Sobre nós\n \n \n {/* O Outlet representa o conteúdo da sub rota */}\n \n )\n}\n```\n\n## Estruturando rotas com o TanStack Router\n\nAgora que já temos as páginas criadas, vamos criar as rotas para elas utilizando o do **TanStack Router**.\n\n```TSX\n// ARQUIVO: router.tsx\n// Note que a extensão mudou de .ts para .tsx porque iremos inserir componentes html em sua estrutura\n\n// Importando funções do TanStack Router\nimport { ReactRouter, createRouteConfig, Link, Outlet } from '@tanstack/react-router';\n\n// Importando o Layout\nimport { RootLayout } from './layouts/RootLayout';\n\n// Importando as páginas da aplicação\nimport { Home } from './pages/Home';\nimport { About } from './pages/About';\n\n// Criando o gerenciador de rota\nconst rootRoute = createRouteConfig({\n component: RootLayout // Layout construido para as rotas\n});\n\n// Criando a rota para a página inicial\nconst homeRoute = rootRoute.createRoute({\n path: '/', // Caminho da rota\n component: Home, // Componente da rota que será renderizado\n});\n\n// Criando a rota para a página sobre nós\nconst aboutRoute = rootRoute.createRoute({\n path: '/about', // Caminho da rota\n component: About, // Componente da rota que será renderizado\n});\n\n// Adicionando as rotas ao gerenciador\nconst routes = [homeRoute, aboutRoute];\nconst routeConfig = rootRoute.addChildren(routes);\n\n// Criando a rota com o adapter para react\nconst router = new ReactRouter({\n routeConfig,\n defaultPreload: 'intent'\n});\n\nexport default router;\n```\n\nLembrando que o exemplo acima foi utilizado um layout de escopo global, pois foi criado no `rootRoute`, porém isso pode ser replicado para outras subrotas em seus Parent Routes, que você aprendeu a fazer no módulo de [Rotas Customizadas](./2-Rotas-customizadas.md).\n\nE pronto! A partir de agora já é possível utilizar os Layouts em sua aplicação de maneira fácil utilizando o **TanStack Router**.\n\n[Ir para Próxima Seção](./4-Caching.md)\n\n
\n\n# TanStack Router - Caching\n\n> 🔥 **Tá com pressa?** Se liga no sumário:\n> 1. [Aplicação do cache na web](#como-o-caching-é-aplicado-em-aplicações-web)\n> 2. [Vantagens do caching](#vantagens-do-caching-no-tanstack-router)\n\n## Como o caching é aplicado em aplicações web?\n\nCaching em aplicações web é uma técnica utilizada para armazenar dados em memória, a fim de aumentar a velocidade de acesso, diminuir a carga no servidor e melhorar a experiência do usuário com consistência na fluidez. Quando um usuário acessa uma rota específica em uma aplicação web, os dados e informações sobre a página podem ser armazenados em cache, permitindo que as solicitações subsequentes sejam carregadas mais rapidamente, sem a necessidade de recarregar todos os dados do servidor. Isso pode melhorar significativamente o desempenho e a experiência do usuário.\n\n## Vantagens do Caching no **TanStack Router**\n\n- [x] Obsolência enquanto revalidado\n- [x] Utilização de Max-age\n- [x] Auto invalidação\n- [x] Garbage collection\n- [x] Auto-carregamento de páginas\n- [x] Amigável com cache externo\n\n[Ir para Próxima Seção](./5-DevTools.md)\n\n
\n\n# TanStack Router - DevTools\n\n> 🔥 **Tá com pressa?** Se liga no sumário:\n> 1. [O que é](#o-que-é-um-devtools) \n> 2. [Instalação](#como-instalar-o-tanstack-devtools)\n> 3. [Criando a instância do DevTools](#criando-a-instância-do-devtools) \n> 3. [Utilizando o DevTools na aplicação](#utilizando-o-devtools-na-aplicação) \n\n## O que é um DevTools\n\nO DevTools é um conjunto de ferramentas de desenvolvimento, os de navegadores web são um ótimo exemplo e são um dos tipos de DevTools mais conhecidos, permitindo aos desenvolvedores inpecionar, depurar e modificar o código de uma página web em tempo real. O DevTools é uma ferramenta valiosa para desenvolvedores para testar e otimizar seus sites e aplicações.\n\nNo contexto do **TanStack DevTools**, as ferramentas disponibilizadas são para auxiliar a visualização de todo o funcionamento interno do **TanStack Router** e evitar a perda de inúmeras horas tentando depurar uma aplicação com diversas rotas.\n\n## Como instalar o TanStack DevTools\n\nPara instalar o **TanStack DevTools** em sua aplicação, basta utilizar algum dos comandos abaixo de acordo com o seu gerenciador de pacotes:\n\n```BASH\n# Utilizando npm\nnpm install @tanstack/react-router-devtools@beta --save\n# Utilizando Yarn\nyarn add @tanstack/react-router-devtools@beta\n# Utilizando pnpm\npnpm add @tanstack/react-router-devtools@beta\n```\n\n## Criando a instância do DevTools\n\nPara utilizar as ferramentas do DevTools apenas em ambiênte de desenvolvimento, basta importá-lo da forma a seguir:\n\n\n> ⚠️ Mas tome cuidado, é necessário que você defina a variável de ambiente `NODE_ENV` para identificar se a aplicação está sendo executada em produção.\n\n```TSX\n// ARQUIVO: router.ts\n\n// Importação do lazy do react\nimport { lazy } from 'react';\n\nconst isRunningInProduction = process.env.NODE_ENV === 'production';\nexport const TanStackRouterDevtools =\n isRunningInProduction\n ? () => null // Não renderiza nada em produção\n : lazy(() =>\n // Lazy load em desenvolvimento\n import('@tanstack/react-router-devtools').then(\n (res) => ({\n default: res.TanStackRouterDevtools\n })\n ),\n );\n```\n\n## Utilizando o DevTools na aplicação\n\nLembra de quando foi introduzido o conceito de Layouts? Pois bem, para utilização do DevTools é necessário que você importe a instância dentro de um Layout, para que assim ele obtenha o **TanStack Router** automáticamente.\n\n```TSX\n// ARQUIVO: layouts/RootLayout.tsx\n\n// Importação do DevTools\nimport { TanStackRouterDevtools } from '../router';\n\nexport function RootLayout() {\n return (\n <>\n \n Página inicial Sobre nós\n \n \n \n \n \n )\n}\n```\n\nE pronto! O botão para acionar o DevTools será exibido na aplicação na posição que você informou, tendo uma aparência parecida com essa:\n\n\n\nAo clicar sobre esse botão, uma tela de inspeção irá aparecer, nela é possível obter informações sober os layouts que a rota está contida, estados passados para a rota, histórico de navegação, execução de funções para navegação, parâmetros de pesquisa, erros, dentre muitas outras funcionalidades :)\n\n\n\n\n\n
\n\n## O que são Testes Unitários ?\n\nTestes unitários podem ser definidos como porções de códigos responsáveis por validar o comportamento de unidades funcionais de código, sendo unidades funcionais de qualquer componente que através de sua invocação possa gerar o resultado esperado. Podemos, então, pensar inicialmente em testes unitários no contexto de funções puras, que por sua vez são funções as quais não alteram o estado da nossa aplicação, tal como uma função de soma de dois números. Segue um exemplo:\n\n```js\nfunction sum(a, b) {\n return a + b;\n}\n```\n\nPorém, podemos expandir o conceito de teste unitários para coisas mais complexas.\n\nPor exemplo, no contexto do React, a renderização de um componente é verificar se o mesmo é renderizado, se é renderizado com o comportamento esperado e até mesmo se está lidando com eventos do próprio componente tais como cliques da maneira correta.\n\n## A importância e o ciclo do TDD\n\nTDD, ou Test-Driven Development (Desenvolvimento Orientado a Testes) é uma técnica de desenvolvimento de software fundamental para a validação de uma aplicação, muito utilizada pelas empresas e cobrada dos seus desenvolvedores. Essa prática minimiza os erros da aplicação, tanto na fase de desenvolvimento, quando podemos alterar uma classe sem quebrar o código, quanto para a produção, ao sabermos que todo nosso código está testado e funcionando como esperamos.\n\nO Ciclo de TDD pode ser definido em três etapas: Criação, Falha, Refatoração. No primeiro, criamos o teste do qual queremos validar, em seguida passamos para a segunda etapa, onde forçamos o teste a falhar e assim temos certeza do funcionamento do teste, por fim passamos para a Refatoração, na qual refatoramos o teste, agora otimizando-o e fazendo-o passar.\n\n## Ferramentas utilizadas em testes de integração\n\nPara aplicações escritas em javascript, é muito comum o uso do _framework_ de teste chamado [Jest](https://jestjs.io/). Ele é responsável pela estrutura do arquivo de teste, e nos permite criar conjuntos e cenários para que possamos criar as asserções que queremos.\n\nJá para manipulação do DOM, podemos utilizar a biblioteca [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). Ela nos permite renderizar e fazer _queries_ no nosso DOM para criarmos nossas asserções.\n\nAlém disso, temos outro _framework_ famoso no mercado, [Enzyme](https://enzymejs.github.io/enzyme/) utilizado principalmente no contexto de componentes funcionais React e teste de frontend graças à sua compatibilidade com outros frameworks de testes tais como o Jest,facilitando assim a criação de _Mocks_ para testes.\n\n## Exemplos de Teste de Integração\n\n> Configurações\n\nNo caso, usaremos a React Testing Library, a qual já vem com configurações pré-setadas, para isso, basta que criemos uma pasta com o nome \" ** tests ** \" dentro do nosso diretório \"src\" e então nomearemos nossos arquivos de testes com a seguinte extensão: .test.js .\n\nNo exemplo a seguir testaremos uma função pura de soma, então vamos nomeá-lo de: \"sum.test.js\"\n\n> Vamos pensar no caso de uma função de soma\n\nQueremos apenas testar a funcionalidade de uma função de soma certo? Nesse caso, um teste unitário será o mais adequado para ela.\n\n```js\nfunction sum(a, b) {\n return a + b;\n}\n\nit('Should sum 3,2 and return 5', () => {\n const sum = sum(3, 2);\n expect(sum).toBe(5);\n});\n```\n\nNesse teste, estamos usando os métodos \"it,expect e toBe\". As constatações, através do método it() devem informar o que o teste propôe, e no segundo parâmetro, através de uma _callback_ criar o teste. O expect() é o que guardará o objeto a ser validado, sendo que deverá ser ligado a um método de validação. No exemplo usamos o \"toBe\", ou seja, esperamos que sum seja 5. \"Expect sum toBe 5\". Então, teriamos nosso teste validado e ele passaria já que esperamos que ao somar 3 e 2 teriamos como resultado 5.\n\nSeguindo o ciclo de TDD.\n\n```js\nit('Should sum 3,2 and return 5', () => {\n const sum = sum(3, 3);\n expect(sum).toBe(5);\n});\n```\n\nNesse caso o teste não passaria, pois esperamos que o resultado seja 5, porém os números somados (3,3) tem como soma o valor 6 e não cinco. Com isso, sabemos que a nossa função de soma está correta e agora podemos refatorar nosso código de uma forma genérica.\n\n```js\nit('Should sum two numbers an return its correct sum', () => {\n const first_sum = sum(3, 3);\n const second_sum = sum(4, 5);\n\n expect(first_sum).toBe(6);\n expect(second_sum).toBe(9);\n});\n```\n\nNosso teste passaria pois as duas expectativas são cumpridas e logo a constatação é válida.\n\n## Testes Unitários no contexto do React\n\nAbstraindo mais um pouco, podemos chegar ao contexto dos componentes e do React, seguindo o mesmo princípio, veja o exemplo a seguir:\n\n```jsx\nimport React from 'react';\nimport {\n render,\n screen,\n getByLabelText,\n getByTestId,\n toHaveTextContent,\n toHaveAttribute,\n} from '@testing-library/react';\n\nexport const LabelInput = () => {\n return (\n
\n \n \n
\n );\n};\n\ndescribe('LabelInput testing', () => {\n it('Should render LabelInput correctly', () => {\n render();\n\n const labelText = screen.getByLabelText('Teste');\n const input = screen.findByTestId('input1');\n\n expect(labelText).toHaveTextContent('Teste');\n expect(input).not.toHaveAttribute('readonly');\n });\n});\n```\n\nRepare que nesse exemplo criamos um componente LabelInput o qual renderiza um Label e seu input. Para o teste, precisamos renderizar o componente primeiro e depois verificamos e ele possui o texto e se possui o atributo. Lembrando que nessa etapa estamos no ciclo de Refatoração do TDD.\n\nMais funcionalidades da React Library Testing podem ser vistas através desse [link](https://testing-library.com/docs/react-testing-library/api).\n\nO mundo dos testes é bem amplo e necesário, portanto compensa muito gastarmos um tempo amais estudante este assunto.\n\n[Ir para Próxima Seção](../Testes/2-testes-de-integracao.md)\n\n
\n\n## O que é teste de integração?\n\nTestes de integração são aqueles que testam os módulos da aplicação de forma conjunta. Eles garantem que módulos menores interajam entre si corretamente. Ao contrário dos testes unitários, os testes de integração evitam utilizar dados _mockados_ garantindo o comportamento real de módulos menores.\n\n## Escreva testes. Não muitos, mas a maioria de integração\n\nEssa é uma frase que foi _tweetada_ por [Guillermo Rauch](https://twitter.com/rauchg/status/807626710350839808) criador do [Vercel](https://vercel.com/) e [Socket.io](https://socket.io/).\n\nEle quer dizer que a grande maioria dos projetos devem ter testes automatizados, eles garantem que o produto faz o que tem que fazer, e nos dá confiança de que está fazendo da forma correta.\n\nEm relação a quantidade, escreva o necessário para que suas funcionalidades principais estejam cobertas e o usuário não tenha problemas em usá-las quando algo novo for lançado.\n\nSobre a maioria dos seus testes, eles devem ser de integração. **Kent C. Dodds** fala sobre o real retorno dos esforços com sua teoria do [Troféu de teste](https://twitter.com/kentcdodds/status/960723172591992832). Essa teoria diz que os testes de integração criam o equilíbrio real entre confiança e esforço.\n\n## Ferramentas utilizadas em testes de integração\n\nPara aplicações escritas em javascript, é muito comum o uso do _framework_ de teste chamado [Jest](https://jestjs.io/). Ele é responsável pela estrutura do arquivo de teste, e nos permite criar conjuntos e cenários para que possamos criar as asserções que queremos.\n\nJá para manipulação do DOM, podemos utilizar a biblioteca [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). Ela nos permite renderizar e fazer _queries_ no nosso DOM para criarmos nossas asserções.\n\n## Exemplo de um teste de integração\n\nImagine a seguinte jornada:\n\n> Eu como usuário desejo ver um alerta ao clicar em um botão escrito \"Exibir alerta\"\n\nPensando nos testes unitários, poderíamos testar se o botão está invocando a função passada e poderíamos verificar se o alerta está visível baseado em uma variável de controle de exibição.\n\n```js\n// Button.spec.js\ndescribe('Meu botão', () => {\n test('deve chamar a função onClick', () => {\n const onClickMock = jest.fn();\n\n render();\n\n userEvent.click(screen.getByRole('button', { name: 'Exibir alerta' }));\n\n expect(onClickMock).toHaveBeenCalled();\n });\n});\n```\n\n```js\n// Alert.spec.js\ndescribe('Meu Alerta', () => {\n test('deve exibir o alerta', () => {\n render(Aqui está seu alerta!);\n\n expect(screen.getByRole('alert')).toBeInDocument();\n });\n\n test('não deve exibir o alerta', () => {\n render(Aqui está seu alerta!);\n\n expect(\n screen.getByRole('alert', { name: 'Aqui está seu alerta!' })\n ).not.toBeInDocument();\n });\n});\n```\n\nOs testes a cima são executados com sucesso, eles recebem os dados que precisam para simular seu funcionamento.\n\nAgora vamos criar a integração entre esses componentes e o teste que garante que quando o botão for clicado, o alerta será exibido.\n\n```js\n// App,js\nconst App = () => (\n <>\n Aqui está seu alerta!\n \n \n);\n```\n\n```js\n// App.spec.js\ndescribe('Minha página inicial', () => {\n test('deve exibir o alerta quando clicar no botão \"Exibir alerta\"', () => {\n render();\n\n userEvent.click(screen.getByRole('button', { name: 'Exibir alerta' }));\n\n expect(\n screen.getByRole('alert', { name: 'Aqui está seu alerta!' })\n ).toBeInDocument();\n });\n});\n```\n\nNote que desta vez não renderizamos cada componente isolado, mas sim o componente no qual está utilizando cada um deles.\n\nCom isso, nós procuramos dentro do DOM a existência de um botão com o texto _Exibir alerta_ e clicamos nele, como consequência desta ação, esperamos ver um alerta com o texto _Aqui está seu alerta_.\n\nEsse é um exemplo bem simples, mas mostra como nosso teste garante o comportamento de um alerta e um botão quando eles estão juntos, dois módulos pequenos que criam um contexto quando juntam suas forças!\n\n
\n\nAviso:\n\nEsta documentação tem como intenção ser o seu pontapé inicial para começar o desenvolvimento de um projeto React dentro de um ambiente preparado para o Typescript.\n\nSe você quiser se aprofundar ainda mais sobre cada um desses temas e sobre o funcionamento do Typescript em si através de vários exemplos sinta-se livre para visitar o [Typescript4noobs!](https://github.com/Carolis/typescript4noobs)\n\n# O que é o Typescript?\n\nTypescript é considerado um **superset** da linguagem Javascript, dito isso, se você já sabe Javascript é muito fácil de começar a usá-lo já sabendo um pouco.\nEle tem como principal funcionalidade a capacidade de adicionar **tipagens estáticas** ao código.\nUm dos pontos positivos que vale a pena ser citado é a possibilidade de termos arquivos Typescript convivendo no mesmo projeto com arquivos Javascript já que no final das contas o Typescript é compilado para Javascript, ou seja, é uma ferramenta de **desenvolvimento**. Isso também permite que você adicione Typescript em qualquer momento do seu projeto, conforme necessidade e gosto pessoal.\n\n### Por que usar Typescript?\n\nO uso de Typescript traz segurança principalmente na detecção de **erros inesperados**. Um exemplo clássico seria o problema do operador `+` do Javascript que, dada uma soma com tipagens erradas poderia retornar erroneamente uma **concatenação** ao invés da soma propriamente dita.\n\n```ts\nfunction soma(x, y) {\n return x + y;\n}\n```\n\nChamando a função `soma(2,2)` o retorno seria `4`;\n\nChamando a função `soma('2','2')` o retorno seria `22`;\n\nEsse problema seria facilmente evitado ao tiparmos as variáveis corretamente como números.\n\n---\n\nOutra grande vantagem de usar o Typescript é o aumento da inteligência dentro do seu editor ou IDE, o famoso **[IntelliSense](https://code.visualstudio.com/docs/editor/intellisense)** e a possibilidade de usar **parâmetros opcionais**. Além disso, as tipagens podem funcionar como uma mini documentação dentro do seu arquivo, facilitando futuras manutenções e fazendo com que todos esses fatores tragam uma camada a mais de segurança para o código.\n\n# Instalando o Typescript ao lado do React\n\nÉ possível inicializar um projeto react com um template para typescript de várias formas, uma delas se utilizando do create-react-app específico para o typescript, usando os seguintes comandos:\n\nPS: antes de seguir com a instalação do typescript é importante ter o **node** previamente instalado.\n\n`yarn create react-app my-app --template typescript` ou `npx create-react-app my-app --template typescript`\n\nApós isso, toda a estrutura de arquivos virá inicializada em torno de um ambiente preparado para o Typescript.\n\nAinda vale lembrar que você não precisa necessariamente usar um template através do create-react-app, sendo possível inicializar toda sua estrutura de arquivos do zero conforme gosto e necessidade.\n\n# Tipos\n\nTipar variáveis é bem simples, como demonstrado no exemplo abaixo. Basta que você adicione `:tipo` depois de declarar uma variável.\n\nExemplos:\n\n```ts\nlet numero: number\nnumero = 3\n\nlet isTrue: boolean\nisTrue = true\n```\n\nO Typescript desfruta de alguns tipos primitivos mais comuns, sendo eles:\n\n`:number`\n\n`:string`\n\n`:boolean`\n\n`:bigInt`\n\n`:symbol`\n\n`:null`\n\n`:undefined`\n\nVocê pode conferir ainda mais tipos e conferir exemplos para cada um deles consultando o repositório [Typescript4noobs](https://github.com/Carolis/typescript4noobs).\n\nAbaixo seguem alguns exemplos de como ficaria a estrutura de um componente React num ambiente que faz uso de Typescript.\n\nComponente **funcional** com Typescript:\n\n```ts\nimport React, { FunctionComponent, useState } from 'react'\n\ninterface Props {\n message: string\n}\n\nconst App: FunctionComponent = props => {\n const [hasMessage, setHasMessage] = useState(false)\n return
{hasMessage ? props.message : 'Default Message'}
\n}\n\nexport default App\n```\n\nComponente de **classe** com o Typescript:\n\n```ts\nimport React, { Component } from 'react'\n\ninterface AppProps {\n text: string\n}\n\ninterface AppState {\n value: number\n}\n\nexport default class App extends Component {\n constructor(props: IAppProps) {\n super(props)\n\n this.state = {\n value: 0\n }\n }\n\n public render() {\n return (\n
\n
{this.props.text}
\n
{this.state.value}
\n
\n )\n }\n}\n```\n\n[Ir para Próxima Seção](../Roteamento/1-React-Router.md)\n\n
![\"Cabeçalho](\"./assets/global/header-4noobs.svg\")
\n \n![\"Logotipo](\"./assets/logo.png\"){kind=logo}
\n![\"Tipografia](\"./assets/global/footer-4noobs.svg\")
\n \n![](\"../../assets/global/header-4noobs.svg\")
\n \n![](\"../../assets/global/footer-4noobs.svg\")
\n \n![\"Flux1-Facebook\"](\"img/flux_exemplo_2.png\")
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/\n\nPerceba 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:\n\n![\"Flux2-Facebook\"](\"img/flux_exemplo_1.png\")
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/\n\nApenas 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\".\n\n## Como Funciona o Redux\n\nAgora 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.\n\nNo 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:\n\n![\"Redux-Facebook\"](\"img/redux-flux_exemplo.JPG\")
- créditos: https://facebook.github.io/flux/docs/in-depth-overview/\n\n## Como usar o Redux no React\n\nPrimeiramente para instalar os pacotes do Redux na sua aplicação React, use os seguintes comandos:\n - npm install redux\n - npm install react-redux\n - npm install --save-dev redux-devtools\n\n### Action\n\nAgora 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\".\n\nNesse 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\".\n\n```jsx\nexport const ActionsTypes = {\n SET_PRODUCTS: \"SET_PRODUCTS\",\n SELECTED_PRODUCTS: \"SELECTED_PRODUCTS\",\n REMOVE_SELECTED_PRODUCTS: \"REMOVE_SELECTED_PRODUCTS\",\n};\n```\n\nNesse 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.\n\n```jsx\nimport { ActionsTypes } from \"../contants/action-types\";\n\nexport const setProducts = (products) => {\n return {\n type: ActionsTypes.SET_PRODUCTS,\n payload: products,\n }\n}\n\nexport const selectedProducts = (products) => {\n return {\n type: ActionsTypes.SELECTED_PRODUCTS,\n payload: products,\n }\n}\n\nexport const removeSelectedProducts = () => {\n return {\n type: ActionsTypes.REMOVE_SELECTED_PRODUCTS,\n }\n}\n```\n\nAgora 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\".\n\n```JSX\nimport React, { useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport axios from 'axios';\nimport ProductComponent from './ProductComponent';\nimport { setProducts } from '../redux/actions/productActions';\n\nconst ProductListing = () => {\n\n const products = useSelector((state) => state);\n const dispatch = useDispatch();\n\n const fetchProducts = async () => {\n const response = await axios\n .get(\"https://fakestoreapi.com/products\")\n .catch((err) => {\n console.log(\"error: \", err);\n });\n dispatch(setProducts(response.data));\n };\n\n useEffect(() => {\n fetchProducts()\n }, []);\n\n return(\n ![\"resultado](\"../../assets/estilizacao/Tailwind-ex1.png\")
\n![\"imagem](\"../../assets/estilizacao/Tailwind-IntelliSense.png\")
\n![](\"../../assets/estilizacao/css-in-js-popularidade.png\")
\n \n![\"\"](\"/assets/npm-start-react.jpeg\")
\n\nQuando 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.\n\n![\"\"](\"/assets/error-npm.jpg\")
\n\nO **build** é utilizado para enviar a aplicação para \"produção\".\n\nComo 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.\n\nO **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*.\n\nPor 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.\n\n---\n\nVamos olhar agora um pouco sobre [dependências](./1.1-O-que-são-dependências.md).\n\n![](\"../../assets/webpack-babel.jpeg\")
\n![](\"../../assets/vite.png\")
\n![](\"/assets/tirinha-babel.jpg\")
\n\n[Ir para Próxima Seção](./4-Componentizacao.md)\n\n![\"Fulano\"](\"usuario.png\")
\n ![\"resultado](\"../../assets/lists/lists-examples-1.png\")
\n\n![\"resultado](\"../../assets/lists/lists-examples-2.png\")
\n![\"Resultado](\"../../assets/refs/refs_example_1.png\")
\n\n# Como utilizar uma ref para armazenar valores\n\nBem, como já vimos anteriormente, podemos atribuir uma `ref` a um elemento HTML. Além disso, podemos atribuir valores, sejam números, textos ou até mesmo objetos! A maior vantagem é que essas alterações não geram uma re-renderização em nossa aplicação.\n\n### Exemplo - Contador que não mostra em tela.\n\n```jsx\nimport { useRef } from 'react';\n\nfunction Componente() {\n const counter = useRef(0);\n\n const updateCounter = () => {\n counter.current += 1;\n console.log(counter.current);\n };\n\n return (\n ![\"Código](\"../../assets/refs/refs_example_2.png\")
\n\nBasicamente, não ocorre novas renderizações em tela, apenas os logs do valor sendo atualizado.\n\n### Exemplo - Contador que pode mostrar o valor em tela.\n\n```jsx\nimport { useRef, useState } from 'react';\n\nfunction Componente() {\n const [value, setValue] = useState(null);\n const [showValue, setShowValue] = useState(false);\n const counter = useRef(0);\n\n const updateCounter = () => {\n counter.current += 1;\n console.log(counter.current);\n };\n\n const toggleShowValue = () => setShowValue((prevState) => !prevState);\n\n return (\n ![\"Exemplo](\"../../assets/refs/refs_example_3.png\")
\n![\"Exemplo](\"../../assets/refs/refs_example_4.png\")
\n\nCerto, mas qual a diferença em relação ao exemplo anterior? Basicamente, como as `refs` não disparam novas renderizações, não podemos obter atualizações em tempo real na tela. Por isso, torna-se necessário utilizar estados para lidar com o mesmo.\n\nA partir desse ponto, a imaginação é o limite! É possível fazer muitas coisas. Inclusive, na própria documentação do React (link no final do artigo), existe um exemplo de um cronômetro que utiliza o `ref.current` como um `setInterval`.\n\n# Como passar uma ref para componentes customizados\n\nNormalmente, quando vamos usar em nossa aplicação algum componente, como o input ou qualquer outro, criamos um componente customizado para garantir que, em todos os locais de nossa aplicação, tenhamos o mesmo design e comportamento. No caso do input, talvez em algum momento você queira usá-lo sem nenhum controle, ou seja, como um `uncontrolled component`, e para isso usaríamos as `refs` que aprendemos anteriormente. No entanto, tenho uma má notícia: não conseguiríamos usá-lo da mesma forma que antes.\n\n```jsx\nconst CustomInput = ({value, label, onChange, ...rest}) => {\n return {\n \n }\n}\n\nconst App = () => {\n return (\n ![\"Cabeçalho](\"../assets/global/header-4noobs.svg\")
\n \n![\"Badge](\"https://img.shields.io/badge/-EM%20BREVE-red\"){kind=icon}
\n\n### Controle de estado\n\n- [API de Contexto](./Controle%20de%20estado/1-API-de-Contexto.md)\n- [Redux](./Controle%20de%20estado/2-Redux.md)\n- [Zustand]() ![\"Tipografia](\"../assets/global/footer-4noobs.svg\")
\n \n![\"Cabeçalho](\"../../../assets/global/header-4noobs.svg\")
\n \n![\"Tipografia](\"../../../assets/global/footer-4noobs.svg\")
\n \n![](\"../../assets/unittest_faucet.gif\")
\n![](\"../../assets/integration-test.gif\")
\n