Aula 05 - JavaScript e React

Fundamentos do JavaScript e como ele se integra com a

biblioteca React para criar interfaces de usuário dinâmicas e
interativas.
Introdução ao JavaScript
JavaScript é uma das linguagens de programação mais populares do mundo, sendo fundamental para o desenvolvimento web moderno.

O que é? Onde roda? Como usar?

JavaScript é uma linguagem de programação de JavaScript possui uma ampla gama de Exemplos básicos de código JavaScript:

alto nível, interpretada e orientada a objetos. É ambientes de execução:

// Variáveis e tipos
conhecida por sua versatilidade e facilidade de • Navegadores (Chrome, Firefox, Safari, etc.)
let nome = "Maria";
• Servidores (Node.js, Deno)
aprendizado, oferecendo: const idade = 25;
• Aplicativos mobile (React Native)
• Tipagem dinâmica e flexível
• Aplicações desktop (Electron)
• Suporte a programação funcional // Funções
Sua versatilidade permite desenvolver desde function saudacao(nome) {
• Rica biblioteca padrão
• Grande ecossistema de frameworks simples scripts até aplicações empresariais return `Olá, ${nome}!`;
}
• Compatibilidade com todos os navegadores complexas, APIs RESTful e jogos.
modernos
// Arrays e loops
const numeros = [1, 2, 3];
numeros.forEach(n =>
console.log(n));
Sintaxe Básica

1 Similaridades 2 Estrutura
A sintaxe do JavaScript é semelhante a C++ e Java, compartilhando elementos Comandos JavaScript são escritos entre as tags <script></script>. Cada
como operadores lógicos, estruturas de controle e funções. Isso facilita a comando termina com ponto e vírgula (;). Os scripts podem ser incorporados
transição para desenvolvedores vindos dessas linguagens. diretamente no HTML ou em arquivos externos com extensão .js.

3 Case Sensitivity 4 Indentação e Espaçamento

JavaScript é case-sensitive, significando que 'nome', 'Nome' e 'NOME' são Embora não seja obrigatório para o funcionamento do código, uma boa
variáveis diferentes. Usa chaves {} para delimitar blocos de código como indentação é essencial para legibilidade. Recomenda-se usar 2 ou 4 espaços
funções, loops e condicionais. para cada nível de indentação.

5 Comentários 6 Boas Práticas

Existem dois tipos de comentários: de linha única usando // e múltiplas linhas Use nomes descritivos para variáveis e funções, evite variáveis globais,
com /* */. São úteis para documentação e explicação do código. mantenha o código modular e siga um estilo consistente de codificação.
Ferramentas como ESLint podem ajudar a manter padrões de código.
Variáveis e Tipos de Dados
Em JavaScript, as variáveis são recipientes para armazenar valores de dados. A tipagem é dinâmica, o que significa que uma variável pode
armazenar diferentes tipos de dados ao longo do tempo.

Declaração
var: escopo de função, pode ser redeclarada
let: escopo de bloco, pode ser reatribuída
Tipos Complexos
const: escopo de bloco, não pode ser reatribuída
Object: coleção de pares chave-valor Array: lista ordenada de valores Function: bloco de código reutilizável
var x = 10;
let y = "texto"; let pessoa = {

const z = true; nome: "João",

idade: 25

Tipos Primitivos };
Number: inteiros e decimais (1, -5, 3.14) let frutas = ["maçã", "banana"];
String: texto ('texto', "texto", `texto`) function soma(a, b) {
Boolean: true ou false return a + b;
Undefined: valor não definido }
Null: ausência intencional de valor
Symbol: valor único e imutável

A compreensão adequada dos tipos de dados e declaração de variáveis é fundamental para o desenvolvimento em JavaScript, pois afeta
diretamente como os dados são armazenados na memória e manipulados durante a execução do programa.
Operadores
Em JavaScript, operadores são símbolos especiais que nos permitem realizar operações em valores e variáveis. Eles são fundamentais para criar lógica
e executar cálculos em nossos programas.

Operadores Aritméticos Operadores de Comparação Operadores Lógicos

Usados para operações matemáticas básicas: Usados para comparar valores: Usados para operações booleanas:

+ Adição (5 + 3 = 8) == Igualdade (5 == "5" é true) && AND lógico (true && true é true)
- Subtração (5 - 3 = 2) === Igualdade estrita (5 === "5" é false) || OR lógico (true || false é true)
* Multiplicação (5 * 3 = 15) != Diferença (5 != 3 é true) ! NOT lógico (!true é false)
/ Divisão (15 / 3 = 5) !== Diferença estrita (5 !== "5" é true)
Úteis para combinar condições em estruturas
% Módulo/Resto (7 % 3 = 1) >, < Maior/menor que
de controle como if/else e while.
** Exponenciação (2 ** 3 = 8) >=, <= Maior/menor ou igual

É importante notar que alguns operadores podem ter comportamentos diferentes dependendo dos tipos de dados envolvidos. Por exemplo, o
operador + pode realizar tanto adição numérica quanto concatenação de strings.
Estruturas de Controle de Fluxo (1 / 2 )

Tipos Básicos
if/else: Para decisões condicionais simples
switch: Para múltiplas condições
for: Para loops com contador
while: Para loops com condição
do while: Para loops que executam pelo menos uma vez

Condicional if/else

if (idade >= 18) {

console.log("Maior de idade");
} else {
console.log("Menor de idade");
}

Loop for

for (let i = 0; i < 5; i++) {

console.log(i);
}
Estruturas de Controle de Fluxo (2/2)

Switch Case
Tipos
switchBásicos
(fruta) {
if/else:case
Para"maçã":
decisões condicionais simples
console.log("R$ 2,00");
break;
case "banana":
console.log("R$ 3,00");
break;
default:
console.log("Fruta não encontrada");
}

While Loop

let contador = 0;
while (contador < 3) {
console.log(contador);
contador++;
}
Funções
O que são?
Funções são blocos de código reutilizáveis que encapsulam uma série de instruções. Elas
são fundamentais para a programação em JavaScript, permitindo organizar e modularizar
o código. Podem receber parâmetros como entrada e retornar valores como resultado de
sua execução.

Tipos de Funções
• Funções declaradas (function declaration)
• Arrow functions (=>)
• Expressões de função (function expression)
• Funções anônimas
• Métodos (funções dentro de objetos)

Parâmetros e Retorno
Funções podem receber parâmetros (argumentos) que são processados internamente. O retorno é
opcional e definido pela palavra-chave 'return'. Parâmetros podem ter valores padrão e podem ser
desestruturados.

Escopo
Funções criam seu próprio escopo. Variáveis declaradas dentro de uma função são locais e não
acessíveis externamente. Funções podem acessar variáveis de escopos externos (closure).
Funções

Exemplos Práticos

// Função declarada
function somar(a, b) {
return a + b;
}

// Arrow function
const multiplicar = (a, b) => a * b;

// Função com valor padrão

function cumprimentar(nome = "visitante") {
return `Olá, ${nome}!`;
}
Eventos
Definição de Eventos
Eventos são ações na página web, como cliques, movimentos do mouse, pressionamento de teclas ou carregamento da página. Eles funcionam como "gatilhos" que acionam a execução
de código JavaScript.

Tipos Comuns de Eventos

• click: Quando um elemento é clicado
• submit: Ao enviar um formulário
• keydown/keyup: Ao pressionar/soltar teclas
• mouseover/mouseout: Ao passar o mouse sobre elementos
• load: Quando a página ou recurso carrega

Manipulação no DOM

Manipulação de eventos no DOM é fundamental para interatividade. Existem três formas principais de adicionar eventos:

// 1. Inline HTML
<button onclick="funcao()">

// 2. Propriedade do elemento
elemento.onclick = funcao;

// 3. addEventListener (recomendado)
elemento.addEventListener("click", funcao);
React

O que é? Base Performance Comunidade

Biblioteca JavaScript para Baseado em componentes Utiliza Virtual DOM para Grande ecossistema de
construção de interfaces de reutilizáveis que permitem otimizar renderização e desenvolvedores, bibliotecas e
usuário modernas e dinâmicas, construir aplicações escaláveis garantir alta performance ferramentas de suporte
desenvolvida pelo Facebook e maintidas

React é uma das bibliotecas mais populares para desenvolvimento web moderno, permitindo criar interfaces dinâmicas e eficientes. Sua
arquitetura baseada em componentes facilita o desenvolvimento de aplicações complexas, enquanto sua curva de aprendizado gradual
permite que desenvolvedores iniciantes comecem a criar projetos rapidamente.

Com mais de 200 mil projetos no GitHub e usado por empresas como Facebook, Instagram, Netflix e Airbnb, o React se estabeleceu
como uma tecnologia fundamental no desenvolvimento web contemporâneo.
Componentes React

Definição Características Uso

React é uma biblioteca especializada em Permite criar componentes reutilizáveis Utilizado por grandes empresas como
construir interfaces de usuário modernas para construir aplicações complexas com Facebook, Instagram, Netflix e Airbnb.
e dinâmicas. Desenvolvida pelo Facebook, facilidade. Os componentes são Com mais de 200 mil projetos no GitHub,
oferece uma abordagem declarativa para o independentes e encapsulados, facilitando possui uma das maiores comunidades de
desenvolvimento web, permitindo criar a manutenção e o teste. Utiliza Virtual desenvolvedores do mundo. Seu
UIs complexas de forma simples e DOM para otimização de performance, ecossistema rico inclui ferramentas de
intuitiva. Sua arquitetura baseada em possui uma curva de aprendizado gradual desenvolvimento, bibliotecas de
componentes revolucionou a forma como e oferece excelente integração com outras componentes e recursos de aprendizado
construímos aplicações web. bibliotecas e frameworks. extensivos.
JSX
JSX é uma extensão de sintaxe para JavaScript que permite escrever HTML
dentro do JavaScript. Facilita a escrita e leitura do código React.

Readability Maintainability Efficiency

Torna o código mais Facilita a manutenção Permite
legível e intuitivo ao do código com desenvolvimento mais
combinar JavaScript estrutura clara e rápido e eficiente de
com HTML organizada componentes React
React Hooks

O que são Hooks? Principais Hooks Exemplo Prático

Hooks são funções especiais introduzidas no useState: gerencia estados locais do
// Contador com useState e useEffect
React 16.8 que permitem utilizar estado e componente
const [contador, setContador] =
outros recursos do React sem escrever useEffect: lida com efeitos colaterais
useState(0);
componentes de classe. Eles simplificam a useContext: compartilhamento de dados
useEffect(() => {
lógica dos componentes e permitem useRef: manipula referências
document.title = `Você clicou
reutilização de código. useCallback: memoriza funções
${contador} vezes`;
}, [contador]);
React Router

Definição Finalidade Aplicação

Biblioteca oficial de roteamento para Permite criar rotas declarativas que Essencial para Single Page Applications
React que gerencia a navegação entre mapeiam URLs para componentes profissionais, possibilitando
diferentes componentes, permitindo específicos, gerenciar parâmetros de navegação sem recarregamento,
criar uma estrutura de URLs rota e implementar navegação renderização condicional baseada em
organizada. programática com autenticação. rotas e integração com APIs RESTful.
Projeto de Classe

Objetivo Interface Navegação

Desenvolver uma aplicação web Criar interface responsiva com Implementar sistema de rotas com React
completa usando React e Google Project componentes React reutilizáveis, Router, incluindo navegação
IDX, implementando autenticação de gerenciamento de estado com useState . programática.
usuários.
Funcionalidades do Projeto

Gerenciamento de Estado Integração com API

Implementação eficiente de Desenvolvimento de integração
gerenciamento de estado robusta com API externa para
utilizando React Hooks para consumo e processamento de
controle dinâmico dos dados da dados.
aplicação.

Formato de Entrega:
Data de Entrega: Gravar um vídeo - máximo 2 minutos:
12/03/2025
- os itens 1 a 5 solicitados no código.
- a execução da aplicação.