React

Aula 10
React

📒 Formulários e campos
O comportamento padrão de um form é submeter informações
para um servidor.

Porém, em uma aplicação SPA, o formulário não deve acionar o

backend diretamente, pois isso resultaria no recarregamento da
página.
React

Para evitar o comportamento padrão de formulário - o envio, o

evento onSubmit deve conter uma instrução para prevenir o
padrão.

const handleEnvio = (evento) => {

evento.preventDefault();
};
React

O objeto do evento possui informações importantes sobre o

formulário, como o target - o elemento alvo do evento.

const handleEnvio = (evento) => {

const form = evento.target;
console.log(form.name);
};

<form name="filmes" onSubmit={handleEnvio}></form>

React
Em React podemos tratar campos de entrada de duas formas:

1. Componentes controlados
O valor do campo é armazenado em states
2. Componentes não controlados
O valor do campo é obtido através de referências
React
1⃣ Componentes controlados
Controlar um componente é fazer o campo ser conhecido pelo
React. Através de states, cada alteração no valor do campo será
monitorada e armazenada.

As mudanças no valor do campo geram um novo estado, e,

portanto, uma nova renderização do componente.
React
Para campos texto, useState inicia com string, e o valor do state é
passado para o input. Temos acesso ao valor do campo a todo
momento.

const state = React.useState("");

<input type="text" value={state[0]} />
React
Para reconhecer as alterações no campo, vamos usar o evento
onChange.

const [nome, setNome] = React.useState("");

const handleChange = (evento) => setNome(evento.target.value);
<input type="text" value={nome} onChange={handleChange} />
React

✏ Praticando juntos
Quadro de anotações

Vamos criar um quadro com notas autoadesivas tipo post-it,

utilizando flexbox. Um campo texto e um botão permitem criar
novas notas.
React
Os campos de rádio ou checkbox usam o valor da prop checked.

const [marcado, setMarcado] = React.useState(true);

<input type="checkbox" checked={marcado} onChange={(evento) =>
setMarcado(evento.target.checked)} />
React

✏ Praticando juntos
Quadro de anotações

No quadro com notas autoadesivas, vamos criar uma caixa de

seleção que permite escolher a cor e um checkbox para saber se a
cor é da fonte ou do fundo.
React
2⃣ Componentes não controlados
Em componentes não controlados, os dados de formulário são
controlados pelo próprio DOM.

Ao invés de usar manipuladores de eventos e atualização de states,

são usadas referências para obter os valores do formulário do DOM.
React
A recuperação do valor em um campo não controlado não é
imediata dentro do componente. Ocorre uma única vez, por
exemplo, no onSubmit ou algum outro evento.

O mesmo ocorre para a validação, que não pode ser instantânea,

mas pode ser feita no envio.
React

✏ Praticando juntos
Agenda de telefones

Vamos criar uma agenda de nomes e telefones, utilizando campos

não controlados e uma lista não ordenada.
React
💡 Dica: Existem bibliotecas prontas para lidar com formulários e
validação de campos em React:

● react-hook-forms
● formik
● yup
React

📒 Renderização condicional
Também chamada de React conditionals, são abordagens para criar
componentes com condições de renderização.

Usamos condicionais para mostrar ou ocultar componentes em

nossos aplicativos.
React

🧠 Relembrando:

● O resultado da renderização é o retorno do componente

● O retorno de uma função é uma expressão

Lembre-se sempre da diferença entre o que podemos fazer dentro

de uma expressão e o que pode ser feito em declaração.
React

1⃣ Retornos da função

Sabemos que uma função pode ter apenas um retorno. Contudo, se

usarmos seletores, podemos ter a instrução return controlando
diferentes condições do componente.

Esse conceito é conhecido como saída antecipada.

React

Em JS não são executadas outras instruções após o retorno. Por

isso, não é necessário usar else.

function ExibirCarros(props) {
if (props.usado) return <h1>Carros Usados</h1>;

return <CarrosNovos />;

}
React

2⃣ Componente intermediário

Podemos criar um componente roteador, que será dedicado a

tomar as decisões e direcionar o conteúdo a outro componente.

Uma sugestão é fazer as escolhas com o seletor switch.

React

No componente roteador não existem renderizações, apenas

redirecionamento.
function Categorias(props) {
switch (props.tipo) {
case "doces": return <Doces />;
case "biscoitos": return <Biscoitos />;
}
}
<Categorias tipo="biscoitos" />
React

3⃣ Operador ternário

Essa técnica é aplicada diretamente no render. Podemos criar uma

expressão React com um operador ternário para controlar
componentes internos.

Será montado apenas o componente que atende à condição.

React

Essa técnica é ideal para duas condições, pois não é uma boa
prática encadear operadores ternários diretamente.

function Categorias(props) {
return <div>
{props.tipo == "doces" ? <Doces /> : <Biscoitos />}
</div>;
}
React

4⃣ Operadores lógicos

São expressões aplicadas também ao render, semelhante ao

condicional com ternário. Mas, usando operações binárias, podemos
adicionar quantos casos forem necessários.

Em JS, os operadores E e OU podem ser utilizados com quaisquer

valores, não apenas com lógicos.
React

Os valores true e false são aceitos em expressões, mas não são

renderizados.
return (
<div>
{props.tipo == "doces" && <Doces />}
{props.tipo == "biscoitos" && <Biscoitos />}
{props.tipo == "salgadinhos" && <Salgadinhos />}
</div>
);
React

✏ Praticando juntos
Feira de orgânicos

Vamos criar componentes para as categorias frutas, verduras e

legumes da feira. Um componente intermediário irá exibir as
informações usando uma seleção em campos de rádio.
JavaScript

📒 Atribuição por desestruturação

Desestruturar significa tirar de uma estrutura. A extração por
destructuring não modifica o objeto original, apenas copia suas
informações para novas variáveis.

Usamos a atribuição por desestruturação quando precisamos

declarar uma variável e inicializá-la copiando valores de um objeto.
JavaScript

📌 Desestruturação de arrays
Vamos rever a forma tradicional de obter itens de um array:

const frutas = ["🍊", "🍌", "🍉", "🍍"];

const laranja = frutas[0];
const banana = frutas[1];
JavaScript

Na declaração, são incluídos colchetes entre o identificador da nova

variável, antes do sinal recebe, indicando que o valor a ser
desestruturado vem de um array.

const frutas = ["🍊", "🍌", "🍉", "🍍"];

const [laranja] = frutas;
JavaScript

A desestruturação de arrays ocorre por posição. O valor do primeiro

item é copiado para a primeira variável, e assim em diante.

Ao usar vírgulas sem identificadores, podemos saltar elementos.

const frutas = ["🍊", "🍌", "🍉", "🍍"];

const [laranja, banana] = frutas;
const [ , , melancia] = frutas;
JavaScript

Os demais itens podem ser atribuídos para um novo array usando a

sintaxe de rest parameters.

const frutas = ["🍊", "🍌", "🍉", "🍍"];

const [cítrica, ...outras] = frutas;
React

✏ Praticando juntos
Nome e sobrenomes

Em um campo texto, o usuário irá digitar o seu nome completo.

Vamos criar um array de nomes e mostrar na tela, em separado, o
primeiro nome e o total de sobrenomes da pessoa.
📝 Atividade
Produtos em estoque

Na exibição de produtos da loja virtual, crie campos para a

quantidade desejada e o botão comprar.

✅ O campo não aceita negativos, e o botão é desativado para zero.

✅ Ao exceder o total em estoque, o botão é desativado e uma
mensagem aparece abaixo do produto.
📘 Para estudar mais
● Atribuição via desestruturação
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_ass
ignment