CURSO: React,js e Next.js - Seção 2 React (o Básico)

[AndreBuitoni]

Seção 2 - React (o Básico)

• [x] 4. introdução à seção e ao curso de ReactJS ----- ----- ----- ----- ----- 28/07/2023
• [x] 5. Ambiente de desenvolvimento no Windows
• [x] 6. Ambiente de desenvolvimento no Ubuntu 20.04
• [x] 7. npx create-react-app - parte 1
• [x] 8. Atualizações sobre o react 18
• [x] 9. npx create-react-app - parte 2
• [x] 10. npm run build - Exemplo
• [x] 11. Me ajude a produzir conteúdo gratuito ----- ----- ----- ----- ----- 29/07/2023
• [x] 12. React não precisa estar na página toda
• [x] 13. Componentes funcionais e componentes de classe
• [x] 14. Componentes de classe com estado (statefull)
• [x] 15. Links para o projto no Github
• [x] 16. State com Arrays e Objetos
• [x] 17. Lifecycle Methods (métodos de ciclo de vida) - Parte 1
• [x] 18. Lifecycle Methods (métodos de ciclo de vida) - Parte 2 ----- ----- ----- ----- ----- 01/08/2023
• [x] 19. Buscando dados externos com Fetch (Data fetching)
• [x] 20. Props e organização dos componentes - parte 1
• [x] 21. Props e organização dos componentes - parte 2 ----- ----- ----- ----- ----- 07/08/2023
• [x] 22. Props e organização dos componentes - parte 3 ----- ----- ----- ----- ----- 08/08/2023
• [x] 23. Trabalhando com inputs de texto
• [x] 24. Fluxo de dados, componentes e state vs props ----- ----- ----- ----- ----- 11/08/2023
• [x] 25. Decidir onde o estado vive é importante (react Developer Tools)
• [x] 26. Eventos Sintéticos do React (SyntheticEvent) ----- ----- ----- ----- ----- ----- 14/08/2023
• [x] 27. Configurando o GIT e SSH Keys no Windows
• [x] 28. Configurando o GIT e SSH Keys no Ubuntu
• [x] 29. Deploy do nosso projeto na Netlify
• [x] 30. Aviso sobre a próxima aula e React Hooks (não se preocupe se não entender) - 16/08/2023
• [x] 31. Migrando para React Hooks
• [x] 32. Mais sobre this.setState em classes
• [x] 33. Introdução à testes com Jest e Testing Library - Parte 1
• [x] 34. Introdução à testes com Jest e Testing Library - Parte 2 ----- ----- ----- ----- 17/08/2023
• [x] 35. Introdução à testes com Jest e Testing Library - Parte 3 ----- ----- ----- ----- 18/08/2023
• [x] 36. Introdução à testes com Jest e Testing Library - Parte 4 ----- ----- ----- ----- 19/08/2023
• [x] 37. Eslint, prettier, editorconfig e prop-types ----- ----- ----- ----- 05/09/2023
• [x] 38. ERRATA: defaultProps e destructuring ----- ----- ----- ----- 05/09/2023
• [x] Resultado Prático?

[AndreBuitoni]

AULA 19 - Buscando dados externos com Fetch (Data fetching)

Aprendemos a buscar dados externos utilizando o fetch() (linhas 14 e 15) - trouxemos dados de posts de blog com um fetch e com o segundo trouxemos imagens.

Resultado no navegador

AULA FINALIZADA

[AndreBuitoni]

AULA 20 - Props e Organização dos Componentes - Parte 1

Nessa aula, aprendi a criar parte do código como um componente separado e como passar as props para esse componente.

Criação do Componente PostCard

Chamando o componente PostCard e passando as props

O Resultado no navegador é exatamente igual, só modificamos o código para componentizar.

Aula Finalizada

[AndreBuitoni]

AULA 21 - Props e organização dos componentes - parte 2

Nessa aula eu limpei um pouco o código do arquivo principal APP.js através da criação de componentes. Criei um componente POSTS e uma função loadposts. Essencialmente, o código é o mesmo da aula anterior, mas agora temos o código dividido em mais componentes para melhorar a organização do projeto.

[AndreBuitoni]

AULA 22 - Props e organização dos componentes - parte 3 e AULA 23 - Trabalhando com inputs de texto

Nestas aulas, basicamente reorganizamos mais os elementos existentes em componentes e também criamos dois novos componentes: um botão para carregar mais posts e uma barra com imput de texto para pesquisar texto no título dos posts.

A organização dos arquivos em componentes está assim:

Achei a barra de busca um componente muito interessante e inclusive penso em utilizar essa aula como referência para as barras de busca que teremos no APP Drinkifyme.

[AndreBuitoni]

Aula 24 - Fluxo de dados, componentes e state vs props

Aula teórica explicando a diferença entre STATE e PROPS. Sem nenhum código adicionado.

[AndreBuitoni]

Aula 25 - Decidir onde o estado vive é importante (react Developer Tools)

Mais uma aula teórica falando sobre states e mostrando a extensão para o Chrome chamada React Developer Tools)

[AndreBuitoni]

Aula 26 - Eventos Sintéticos do React (SyntheticEvent)

Aula teórica mostrando vários eventos sintéticos descritos na documentação do React.

[AndreBuitoni]

Aulas 27 e 28 foram desnecessárias pois eu já sabia levar o programa até o GitHub.

[AndreBuitoni]

Aula 29 - Deploy do nosso projeto na Netlify

Link do site que fiz hospedado no Netlify https://curso-luizotavio-site1.netlify.app/

Aprendi a usar o Netlify. Com esse serviço, podemos hospedar nossos exercícios de programação para outras pessoas poderem acessar.

[AndreBuitoni]

Aula 31 - Migrando para React Hooks

Modificamos o código, trocando as classes por funções com os React Hooks (useState, useEffect, useCallback)

Função Home parte 1

Função Home parte 2 - return

[AndreBuitoni]

Aula 34 - Teste parte 2

Começamos a testar nosso programa utilizando jest.

• No terminal, o comando para ver o resultado dos testes foi npm test.

• Os testes são escritos em arquivos com o seguinte padrão de nomenclatura: NomeDoComponente.test.jsx OU NomeDoComponente.spec.jsx

• Iremos utilizar spec.jsx quando formos realizar testes unitários

A estrutura do teste em si consiste em uma declaração "Describe" e uma ou mais declarações "test" ou "it". A primeira ("describe") descreve qual funcionalidade está sendo testada e os testes dentro dela devem abranger todos os aspectos daquela funcionalidade. Como referência:

[AndreBuitoni]

Aula 35 - Introdução à testes com Jest e Testing Library - Parte 3

Criamos um teste para o componente PostCard e criamos um snapshot para referência nos testes.

SNAPSHOT

[AndreBuitoni]

Aula 36 - Introdução à testes com Jest e Testing Library - Parte 4

Fizemos mais testes em nossos componentes e aprendi a usar um comando que verifica como nosso projeto está em relação à cobertura de testes

npm test -- --watchAll="false" --coverage

[piantino]

Aula 36 - Introdução à testes com Jest e Testing Library - Parte 4

Fizemos mais testes em nossos componentes e aprendi a usar um comando que verifica como nosso projeto está em relação à cobertura de testes

npm test -- --watchAll="false" --coverage

Testes e cobertura de testes são uma das melhores métricas de qualidade de software. Sem falar que pensar em como testar um componente ajuda a programa-lo melhor.

[AndreBuitoni]

Aulas 37 e 38 - Eslint, prettier, editorconfig e prop-types

Basicamente, fizemos configurações para padronizar o código utilizando padrões do

• ESLINT
• Prettier
• Editorconfig
• Prop-types -> Para o prop-types, passamos em vários arquivos realizando a descrição dos tipos

Aulas finalizadas

[AndreBuitoni]

O Resultado Prático desta seção foi a criação desta página: https://curso-luizotavio-site1.netlify.app/

O Repositório está sendo atualizado aqui: https://github.com/AndreBuitoni/curso-luiz-otavio

Seção Finalizada

[piantino]

Muito bom André!