Semana 16, senhoras! Dá pra acreditar o quanto nosso tempo juntas passou voando?
A fase de se aventurar no mundão lá fora e conquistar a vaga dos sonhos está chegando. Por isso, vamos fazer alguns projetinhos e de quebra rever conceitos mega importantes com muita mão no código.
Nossa aula de hoje tem 3 objetivos principais:
1- Te fazer relembrar os pilares do React (state, componentes, props e uso de React Hooks)
2- Ter certeza de que você já consegue criar uma aplicação em React do zero (Create React app)❤️
3- Partiu codar muitão! 🚀
E como sempre, após esse momento de treino e de tira-dúvidas irei passar nossa tarefinha de casa!
Trouxe um materialzinho extra pra te ajudar a evoluir com React.
Uma lib para resolver o problema de navegação entre as páginas no React.
Você lembra que com React nós criamos Single-Page Application, certo? Esse super poder de não atualizar o DOM inteiro ao atualizar pequenas partes do conteúdo na tela, de acordo com a interação do usuário.
Pois bem, para lidar com o browser e navegar entre diferentes telas com SPA. É preciso usar uma biblioteca de navegação que já vem com alguns componentes prontos.
Vamos conhecer hoje os principais:
- BrowserRouter: é um tipo de roteador
- Switch e Route: combinadores de rotas
- Link, NavLink e Redirect:navegação
Aqui a documentação do react-router-dom!
- CSS inline
- CSS na arquitetura de pastas
- Libs de componentes: Bootstrap, Ant desing, Material Ui
A tríade do react:
- Visual: o retorno dos elementos nos componentes
- Funcional: as funções de javascript que dão vida aos componentes
- Estado: Cria o poder de memória nos componentes
Dicionário react:
- npx create-react-app: boilerplate que cria um novo projeto react
- JSX: XML + Javascript, uma sintaxe que você vai estranhar no início, mas que facilita muito nossa vida. É html dentro do javascript.
- Elemento: tags html que retornam de um componente
- Componente: códigos isolados, independentes e reutilizáveis, podem ser funcões ou classes.
- SPA: Single page application que esse conceito de gerar experiência para os usuários, atualizando partes do código em vez da página inteira.
- Props: propriedades que passamos para componentes
- Estado: memória para manipular dados em componentes
- Eventos: Adciona ações a partir de interações dos usuários, assim como no javascript
- hooks: gancho, funções internas e customizadas para ajudar a resolver ciclo de vida e estado de componentes
- state: memória para manipular dados em componentes
- react-router-dom: cria navegação entre as páginas
Exemplos:
| Recurso | Descrição |
|---|---|
rotas |
Treinar criação de navegação de menu |
| Recurso | Descrição |
|---|---|
busca-repos |
Uma aplicação em react que consome a api do github e mostra os repositórios a partir do input com o nome de usuário! |
| Recurso | Descrição |
|---|---|
filmes-séries |
Uma aplicação em react com navegação entre duas páginas: a home e a página de filmes que consome dados internos para montar cards com filmes e séries favoritas! |
Para revisão de quarta-feira:
Veremos o exemplo do TodoList e deixarei muitas diquinhas de vídeos e artigos para estudar.
Desafio:
Calma! É só mais uma TAREFINHA DE CASA pra chamar de sua! Já treinamos bastante com nossos exemplos na aula!
Vamos criar um projetinho react do zero com direito a componetização, consumo de dados internos, uso de props e hooks internas(state e efeito), react-router-dom e css.
No projeto de filmes e séries que começamos a fazer em sala de aula:
- Trocar os dados para a estrutura de dados que vocês construíram no desafio da semana II de react.
- Inserir uma página de apresentação pessoal contendo uma foto, minibio, links para redes sociais e github
- Inserir na home e na página de filmes uma navegação para a página de apresentação
- Inserir na página de filmes uma busca que filtra o card pelo nome do filme
Todo o projeto deve estar com estilo e funcionando