Programção - Mobile
Coding
Aula 2 – Funções/
Arrays / Forms
Prof. Dr. Diogo Rodrigues
010117368@[Link]
Funções Setas
• As funções de seta nos permitem escrever uma sintaxe de função mais curta:
//Antes
hello = function() {
return "Hello World!";
}
//Despois
hello = () => {
return "Hello World!";
}
Se a função tiver apenas uma instrução e a instrução retornar um valor, você
poderá remover os colchetes e a return.
hello = () => "Hello World!";
Função Seta
• Se você tiver parâmetros, passe-os entre parênteses:
hello = (val) => "Hello " + val;
se você tiver apenas um parâmetro, também poderá pular os
parênteses:
hello = val => "Hello " + val;
Existem muitos métodos de array
JavaScript. Um dos mais úteis no React é
o .map()
O método .map() permite executar uma
função em cada item do array, retornando
um novo array como resultado.
Métodos de No React, map() pode ser usado para gerar
listas.
Arrays
Exemplo de map
• Gere uma lista de itens de um array:
const myArray = ['apple',
'banana', 'orange'];
const myList =
[Link]((item) =>
<p>{item}</p>)
Desestruturando Arrays
//ATES
const vehicles = ['mustang', 'f-150',
'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];
Desestruturando Arrays
//NOVA FORMA
const vehicles = ['mustang', 'f-150',
'expedition'];
const [car, truck, suv] = vehicles;
Ao desestruturar arrays, a ordem em que as
variáveis são declaradas é importante
Desestruturando Arrays
• Se quisermos apenas o carro e o suv, podemos simplesmente deixar de fora o caminhão,
mas manter a vírgula:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;
Desestruturação de Array
• A desestruturação é útil quando uma função retorna um
array
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
}
const [add, subtract, multiply, divide] =
calculate(4, 7);
Desestruturando Objetos
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
// old way
function myVehicle(vehicle) {
const message = 'My ' + [Link] + ' is a ' +
[Link] + ' ' + [Link] + ' ' +
[Link] + '.';
}
Desestruturando Objetos
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
function myVehicle({type, color, brand, model}) {
const message = 'My ' + type + ' is a ' + color + '
' + brand + ' ' + model + '.';
}
Listas React
• No React, você renderizará listas com
algum tipo de loop.
• O método de array JavaScript map()é
geralmente o método preferido.
Vamos renderizar todos os carros da nossa
garagem:
Exemplo React List
function Car(props) {
return <li>I am a { [Link] }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{[Link]((car) => <Car brand={car} />)}
</ul>
</>
);
}
Chaves
• As chaves permitem que o React
acompanhe os elementos. Dessa forma, se
um item for atualizado ou removido,
apenas esse item será renderizado
novamente, em vez de toda a lista.
• As chaves precisam ser exclusivas para
cada lista. Mas eles podem ser duplicados
globalmente.
• Geralmente, a chave deve ser um ID
exclusivo atribuído a cada item. Como
último recurso, você pode usar o índice do
array como chave.
Exemplo de Lista de Carros com
Chave
function Car(props) {
return <li>I am a { [Link] }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{[Link]((car) => <Car key={[Link]} brand={[Link]} />)}
</ul>
</>
);
}
Formulários
• Assim como no HTML, o React usa
formulários para permitir que os
usuários interajam com a página web.
Adicionando formulários no
React
Você adiciona um formulário com React como qualquer outro elemento:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
O tratamento de formulários trata de
como você lida com os dados quando
eles mudam de valor ou são enviados.
Em HTML, os dados do formulário
geralmente são tratados pelo DOM.
Tratamento
No React, os dados do formulário
geralmente são manipulados pelos
de
componentes. formulários
Tratamento de formulários
Quando os dados são manipulados pelos componentes, todos os
dados são armazenados no estado do componente.
Você pode controlar as alterações adicionando manipuladores de
eventos no onChangeatributo.
Podemos usar o useStateHook para acompanhar o valor de cada
entrada e fornecer uma "fonte única de verdade" para todo o
aplicativo.
Envio de formulários
• Use o useStateHook para gerenciar a entrada:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName([Link])}
/>
</label>
</form>
)
}
Envio de formulários
• pode controlar a ação de envio adicionando um manipulador de
eventos onSubmit :
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
[Link]();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName([Link])}
/>
</label>
<input type="submit" />
</form>
Select
• Uma lista suspensa ou caixa de seleção no React também é um pouco diferente do HTML
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar([Link])
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}