Nosso dontpad: http://dontpad.com/on13-react
- Usar as reações do zoom e levantar a mão para sinalizar que gostaria de falar
- Enviar as dúvidas no chat
- Manter microfone desligado quando outras pessoas estiverem falando
- Manter câmera ligada o máximo possível
- Momento mão no código, momento de olho na tela
Conteúdo da aula:
vamos avançar no aprendizado de react. Vamos conhecer um pouco mais do universo dessa ferramenta incrível, os conceitos fundamentais de hooks e criar mais alguns projetinhos. 🚀
- Introdução aos Hooks e eventos (onChange e onClick)
- State - useState
- UseEffect - Consumindo API em react
- Criando Rotas (react router dom)
Em 2018, os hooks chegaram como uma solução para que não precisassemos escrever componentes usando classes. Nós temos hooks internos, que são algumas funções prontas que podemos usar em nossos projetos de react. E temos também a possibilidade de criar nossos próprios hooks costumizados.
Quando você se deparar por aí com alguma função dentro do react escrita assim, esses são os hooks: useState, useEffect, useMemo, useCallback entre outros.
Hoje, vamos aprender useState e useEffect. Já tô ansiosa para as coisas incríveis que vamos construir juntas.
Agora, sabe os eventos de interação das usuárias que a gente usa no javascript? Com react também podemos usar. :) Vamos aprender como usar o onChange e o onClick.
Mas por quê a gente não vai ver tudo de evento e hooks? São muitas possibilidades e não teríamos tempo suficiente. Mas essa aula aqui é uma introdução para que você saiba que tudo isso existe e que você pode e deve continuar estudando. Belezinha? <3
Recurso | Descrição |
---|---|
onClick |
Mostrando no console o evento de click funcionando! |
Recurso | Descrição |
---|---|
OnChange |
Mostrando no console o valor digitado num formulário!! |
Lembra o exemplo do perfil do instagram? Eu disse que uma das soluções para se fazer isso é usando props. Um complemento seria usando state, que é o super poder passado para o componente para que ele possa lidar com dados e atualizar a tela toda vez que um evento acontecer (com uma pessoa usuária interagindo ou alguma configuração que a gente tenha criado).
Vamos aprender praticando:
- Antes de tudo você precisa importar de dentro do react o hook useState
import { useState } from 'react'
- Dentro do seu componente antes do retorno você destrutura um array que recebe duas informações
uma variável onde vamos guardar nosso valor inicial e suas futuras atualizações uma função que vai receber a lógica para atualizar a variável
const [contador, setContador] = useState(0)
dentro do seu estado inicial podemos passar valores de qualquer tipo de dados em javacript, nesse caso aqui começamos com o número zero, mas poderia ser um array, um objeto, uma string entr outros.
- Podemos declarar a lógica da nossa função que irá atualizar nossa variável
setContador(contador += 1)
- Podemos dizer quando queremos que nossa função atualizadora seja chamada a partir de uma configuração ou de um evento
setInterval(
setContador(contador += 1),
1000
)
ou
function handleClick() {
setContador(contador += 1)
}
- Usar nosso evento no html do componente
<button onClick= {handleClick}>click me</button>
- Chamar o estado no html do
<p>{contador}</>
Exemplos:
Recurso | Descrição |
---|---|
Contador de clicks |
Agora vamos treinar criar componentes, guardar memória no componente e atualizar na tela a quantidade de vezes que um botão está sendo clicado. |
Recurso | Descrição |
---|---|
Contador |
Agora vamos treinar criar componentes, guardar memória no componente e atualizar na tela um contador que soma 1 ou diminui 1 toda vez que o botão for clicado. |
Recurso | Descrição |
---|---|
Relógio |
Vamos criar um componente que retorna nosso horário local e atualiza automaticamente na tela |
O useEffect é o hook que nos possibilita gerar efeitos colaterais na tela quando alguma variável modifica.
Ciclo de Vida?
- Quando a página carrega -> se parece com didMount -> o segundo parametro é um Array vazio.
- Quando uma ou mais variáveis atualizam -> se parece com didUpdate -> o segundo parametro é um Array com as variaveis.
- Quando um componente é destruído -> se parece com willUnMount - dentro do corpo da função retorna uma outra função que vai ser executada quando o componente desmontar.
Com um exemplo vai ficar bem melhor de entender. Vamos lá!
- Antes de tudo você precisa importar de dentro do react o hook useEffect
import { useEffect } from 'react'
- Dentro do seu componente antes do retorno chama a função useEffect que recebe dois parametros.
uma arrow function que vai determinar a ação do efeito colateral um array que recebe as dependências, ou seja as variáveis que determinam quando essas mudanças devem acontecer
useEffect(() => {
setLista()
}, [])
quando esse array aparece vazio, significa que a interface irá receber os efeitos colaterais quando a tela for carregada
geralmente utilizamos useEffect com useState
Exemplos:
Recurso | Descrição |
---|---|
API |
Chegou o grande momento de consumir uma api externa e renderizar os dados na tela, vamos usar o useEffect e useState para isso. |
Recurso | Descrição |
---|---|
Busca |
Vamos consumir uma api externa, mostrar lista na tela e através de uma busca, vamos mudar o estado apenas mostrando na tela o item digitado. |
Lembra que com react estamos construindo SPA(single page application)? O que significa dizer que na real a gente só construiu uma única página. E quando a gente precisa criar um menu e algumas páginas diferentes. Precisamos usar uma biblioteca que nos ajude com isso, a construir rotas no react.
Para que no fim das contas, quando clicarmos no menu ou alterarmos na URL a gente consiga visualizar o conteúdo correto. Vamos aprender a usar a biblioteca react-router-dom.
- Vamos instalar com o yarn
yarn add react-router-dom@5.2.0
- Vamos criar o arquivo que irá gerenciar nossos endereços
import { BrowserRouter, Switch, Route} from 'react-router-dom';
import Home from '../Pages/Home'
import Sobre from '../Pages/Sobre'
import Portfolio from '../Pages/Portfolio'
import Contato from '../Pages/Contato'
function Routes(){
return(
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/sobre" component={Sobre}/>
<Route path="/portfolio" component={Portfolio}/>
<Route path="/contato" component={Contato}/>
</Switch>
</BrowserRouter>
)
}
export default Routes
- Vamos criar o menu
import { Link } from 'react-router-dom'
const Menu = () =>{
return(
<ul className="menu">
<li>
<Link className="link" to="/">Home</Link>
</li>
<li>
<Link className="link" to="/sobre">Sobre</Link>
</li>
<li>
<Link className="link" to="/portfolio">Portfólio</Link>
</li>
<li>
<Link className="link" to="/contato">Contato</Link>
</li>
</ul>
)
}
export default Menu
-
Podemos usar o menu nas páginas
-
No app em vez de chamar cada página, iremos usar as Rotas
import './Styles/global.css'
import Routes from './Routes/Routes'
function App() {
return (
<div>
<Routes/>
</div>
)
}
export default App;
Tarefinha de sala:
Nome | Descrição |
---|---|
Meu portfólio |
Vamos criar um site básico com 4 páginas estilizadas e criar seu roteamento com react router dom. |
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 externos de uma API pública, uso de props e hooks internas(state e effect).
O projeto deverá ter esse comportamento:
Passo a passo:
- Crie um projeto react
- Apague as informações default
- Consuma uma API externa
- Crie um componente título que recebe o texto: "Meu Segundo Projeto React do Zero", a ser renderizado por props ou children
- Crie 1 componente que mapeia os dados da lista da API e retorna uma lista, ele também tem um input que pega o texto digitado para atualizar o estado do componente, mostrando na tela somente o valor digitado.
- Import no App.js os componentes criados, perceba os erros/warnings que o terminal/console mostra, resolva e faça o projeto funcionar.
- Suba esse projeto no github, atualize o read me contando tudo o que você aprendeu e usou.
- Entregue o link do seu github pelo classroom.
- Arraseee!