Aula 02 - State, novas páginas e

navegação SPA vs a Tradicional |

Imersão React 4
Detalhes desta aula
Nesta aula aprenderemos a lidar com o state do React e entender melhor o que é uma
SPA (Single Page Application).

Conteúdo detalhado desta aula

Olha só:

Entender melhor o que é um SPA;

Conhecer o useState do React;

Como trabalhar com eventos no React  onSubmit ,  onClick ;

E sempre após cada push na sua branch principal do GitHub faremos deploy do
seu Aluracord na Vercel.

Lembre de postar o resultado final do seu Aluracord com as

hashtags #ImersaoReact e #Aluracord marcando o Mario e o Paulo!
Também entre no nosso server do Discord para compartilhar seus resultados e tirar
suas dúvidas com a comunidade e professores. Lembre-se que a melhor forma de
aprender é ensinando, então ajude a comunidade respondendo as dúvidas e
compartilhando seu conhecimento.

Desafios desta aula!

Pratique mais com o useRouter!

Validação do campo: Só mostrar a imagem se tiver mais de 2 caracteres

Desafio Master: Pegar outras informações do usuário batendo na API do GitHub

Dica: você vai usar a função fetch do JavaScript

Aula 02 - State, novas páginas e navegação SPA vs a Tradicional | Imersão React 4 1

 Colocar algo divertido na página  404.js  da sua pasta pages e compartilhar com a
gente no twitter!

Repositório do Aluracord
Confira nossa vitrine e deixe seu  fork  e  star  em nosso projeto! Vamos fazer o
mundo todo ver o Aluracord Matrix: https://github.com/alura-challenges/aluracord-
matrix/

Aqui você consegue ver com detalhes as alterações de arquivos que

fizemos: https://github.com/alura-challenges/aluracord-matrix/pull/3/files

Links importantes para você acompanhar a aula

Aprender forEach e map - Mario Souto

Links citados nesta aula

Mario Souto - Validando Formulários com React

Como fazer AJAX? E pegar os dados da API do GitHub

Mario Souto - Github Pro + Eslint

Criando Flappy Bird com JavaScript - Mario Souto

Como compartilhar seu próprio Aluracord

Você pode, depois do deploy, simplesmente marcar a gente e usar as hashtags
#ImersaoReact e #Aluracord. Mas quer fazer melhor? Você pode usar este plugin do
Chrome para gravar o seu site em ação, scrollar, mostrar efeitos especiais e ainda
passear pelo seu código quando ele estiver interessante.

Poste no seu Instagram, Linkedin, Twitter ou Facebook e marque #ImersaoReact,

@aluraonline e seus professores para que a gente deixe um comentário e, quem sabe,
você apareça nos extras das aulas!

Acessibilidade - Transcrição da aula

Acesse a transcrição desta aula clicando aqui.

Aula 02 - State, novas páginas e navegação SPA vs a Tradicional | Imersão React 4 2