Análise e Desenvolvimento de Sistemas

• Desenvolvimento de sistemas front end

Aula 2 (parte 1)
• SPA → Aplicação de página única
 • Conceitos sobre SPA

O que você
vai aprender
nessa aula
 • Nenhum recurso específico

O que você vai • Atenção

precisar para
acompanhar
essa aula
 Dinâmica

• Exploração de conceitos

• Exemplificações
Contexto
• Como as páginas web eram elaboradas
• Originalmente eram puramente HTML
• Objetivo era o compartilhamento de documentos entre pesquisadores
• Com a popularização
• Páginas foram estilizadas para melhorar a comunicação, empregando CSS
• Animação
• Com a entrada da Netscape propôs um recurso para dinamização das páginas, JS
• Apesar da evolução
• As páginas era naturalmente estáticas
• Ao acessar uma URL, um documento era retornado (literalmente um arquivo)
Contexto
• Como as páginas web eram elaboradas
• A sofisticação das páginas web levaram a exploração de novas propostas
• Uma proposta inicial foi CGI (Common Gateway Interface)

• Basicamente uma primeira versão de SSR (Server Side Rendering)

• As requisições dos clientes eram tratadas pelo servidor

• Ao invés de devolver um arquivo armazenado, um documento era gerado e devolvido
• Documento era gerado baseado em parâmetros passados e lógica associada

• Proposta contribuiu para a dinamização das páginas, mas....

• Na prática os navegadores continuavam recebendo um arquivo HTML completo
Contexto
• Outra proposta de front end
• Aplicativo nativo (desktop ou mobile)
• Todo aplicativo é baixado/instalado no dispositivo alvo
• Todos recursos que precisam ser renderizados na tela já estão no dispositivo
• O servidor, quando consultado, retorna tão somente os dados
• Dá a aparência de solução mais rápida/responsiva comparada a soluções web
Contexto
• SPA - Single Page Applications
• Uma SPA ou Single Page Application é uma aplicação web que se baseia
em uma única página

• Página inicial a ser renderizada funciona como uma “casca”, um pedaço

de HTML que irá conter as diferentes views parciais

• Uma SPA se utiliza dos mecanismos de renderização parcial de páginas

de forma assíncrona sem a necessidade de uma nova requisição
completa a um servidor
Single Page Application
• Modelo web de página única
• Conteúdo é atualizado dinamicamente
• Não requer recarga completa da página

Nenhuma
Atualização de
atualização de
página inteira no
página no pedido
pedido ao servidor
ao servidor
(Request)
(Request)
Single Page Application
• Modelo web de página única
• Interação do usuário ocorre principalmente no lado do cliente
• A aplicação é executada no navegador
• Utiliza tecnologias como HTML, CSS e JavaScript

Nenhuma
Atualização de
atualização de
página inteira no
página no pedido
pedido ao servidor
ao servidor
(Request)
(Request)
Single Page Application
• SPA vs aplicação web tradicional
• Navegação entre partes da aplicação é feita de
forma assíncrona

• Não necessita recarregar uma página completa

• Apenas as partes que mudam na página são atualizadas

• Experiência de usuário é mais fluída e responsiva

• Similar àquela com aplicativo nativo.
Single Page Applications
Single Page Applications
Single Page Applications
Single Page Application
• As SPAs são populares por uma série de razões

• Permitem melhoria na experiência do usuário

• Solução potencialmente mais rápida quando comparada a soluções web convencionais

• Contribuem para simplificar a lógica de negócios e o gerenciamento do estado

• Parte da lógica de processamento pode ser transferida para o cliente
• Como consequência reduzindo a carga no servidor
Single Page Application
• As SPAs são populares por uma série de razões

• Podem ser desenvolvidas de forma modular

• Diferentes partes da aplicação são encapsuladas em componentes reutilizáveis
• Facilitar a manutenção e o desenvolvimento ágil

• Amplamente utilizadas em uma variedade de contextos

• redes sociais, aplicativos de e-commerce, ferramentas de produtividade e etc.
Single Page Application
• Pontos de atenção no uso de SPA
• Visibilidade da solução em mecanismos de busca buscadores
• Sites convencionais exploram SEO para isto
• SEO (Search Engine Optimization / otimização de mecanismos de busca)
• Processo de melhoria de desempenho e experiência do site
• Contribui o site ganhar mais visibilidade em resultados orgânicos em mecanismos de busca
• Problemas se forem desenvolvidas com frameworks SPA, mas...
• SEO precisa conhecer o conteúdo do site, mas ele é elaborado de forma dinâmica e parcial
• A maioria dos indexadores hoje conseguem entender aplicações SPA.
Single Page Application
• Pontos de atenção no uso de SPA
• Lentidão inicial

• Aplicações SPA podem ser um pouco mais lentas, na inicialização.

• Isso ocorre porque todo o conteúdo precisa ser baixado de uma vez para o cliente no
primeiro acesso

• Arquivos iniciais requeridos:

• Template HTML, arquivos JS e CSS, imagens, etc

• Cargas posteriores tendem a ter menor volume de dados transferidos

Single Page Application
• Pontos de atenção no uso de SPA
• Segurança da solução
• Aplicações SPA menos seguras que aplicações multi-page renderizadas no servidor

• Exemplo de ataques XSS (Cross-site Scripting)

• Inserção de código malicioso
• Inserem recursos visíveis ou não que capturam dados sensíveis do usuário

• Qual a diferença se SPA ou multipágina renderizada no servidor

• Código Malicioso é mantido na página em aplicações SPA
• Podem ser “sanitizadas” uma vez que as páginas são completamente renderizadas
Single Page Applications
• Recursos frequentemente utilizados por frameworks para SPAs:
• Roteamento entre views (Router)

• Requisições assíncronas para o backend (HTTP lib)

• Views baseadas em template (UI layer)

• Gerenciamento de estado (State)

• Lógica de negócio (Business logic)

Single Page Applications
• Algumas características do ROUTER

• Tratar as demandas do usuário dentro da aplicação

• O roteador monitora a url da página

• Sempre que ela muda, executa uma lógica personalizada
• Geralmente renderiza uma visualização de componente/aplicativo
• Fornece uma maneira de criar links dentro do seu aplicativo
Single Page Applications
• Algumas características do HTTP lib

• Tratar as demandas do aplicativo para o back end

• Normalmente visa obter algum dado ou realizar outra ação específica

• Quase todo aplicativo

• Possui dados que persistem em um banco de dados

• Aplicativos de página única

• São compostos por uma única página que carrega o aplicativo via Javascript
• Toda vez que você mudar de página devem ser solicitados novos dados
• Ação realizada de forma assíncrona por meio de chamadas de API.
Single Page Applications
• Algumas características do UI layer

• Qualquer coisa renderizável no navegador

• Layouts, texto, botões, qualquer coisa.
• É uma interação bidirecional com o usuário
• Inclui eventos acionados com a interação do usuário

• Relação muito próxima para as ferramentas que tratam

• Gerência de estado (State)
• Lógica da interface com o usuário (Business logic)
Single Page Applications
• Algumas características do State

• Gerenciamento de estados
• Muito utilizados para a criação/adequação da interface com o usuário
• Tudo não estético mostrado em seu aplicativo é, na verdade, dado.

• Cada tecnologia implementa uma forma de gerenciamento de estado

• React
• Permite criar componentes com estado
• Fornece uma API útil para gerenciamento de estado
Single Page Applications
• Algumas características do Business logic

• É a ponte entre o front-end e o back-end

• Qualquer lógica necessária a ser aplicada aos dados e interações.

• Extremamente ligadas ao estado/modelo

• Uma calculadora tem sua proposta de lógica associada aos estados e modelos
• Um loja virtual tem sua proposta de lógica associada aos estados e modelos
• Um jogo online tem sua proposta de lógica associada aos estados e modelos
Tecnologias habilitadoras
• Algumas tecnologias e frameworks
• Angular:
• https://angular.io/tutorial

• Single Page Apps for GitHub Pages:

• https://github.com/rafrex/spa-github-pages

• Vue.js:
• https://vuejs.org/v2/examples/index.html

• React:
• https://pt-br.reactjs.org/docs/create-a-new-react-app.html
Tecnologias habilitadoras
• Algumas tecnologias e frameworks
• Angular
• É um framework de JavaScript mantido pelo Google
• Framework é
• Recurso elaborado para abstrair várias etapas de construção de uma solução
• Normalmente apoiado em biblioteca de funções

• Frequentemente usado para criar SPAs

• O site oficial do Angular inclui um tutorial passo a passo chamado Tour of Heroes
• Demonstra como criar uma aplicação SPA completa
Tecnologias habilitadoras
• Algumas tecnologias e frameworks
• Single Page Apps for GitHub Pages
• É um repositório no GitHub
• Inclui um exemplo de aplicação SPA
• Usa o React para criar uma interface de usuário para exibir dados do GitHub.
Tecnologias habilitadoras
• Algumas tecnologias e frameworks
• Vue.js
• É um framework popular para criar SPAs.

• O site oficial do Vue.js inclui um exemplo de aplicação SPA

• Demonstra como usar o Vue.js para criar uma interface de usuário dinâmica e responsiva.
Tecnologias habilitadoras
• Algumas tecnologias e frameworks
• React
• É uma biblioteca popular para criar interfaces de usuário em JavaScript

• É frequentemente usado para criar SPAs.

• A documentação oficial do React inclui

• Exemplos práticos de como criar uma SPA usando o React
• Aplicação de lista de tarefas (ToDo)
• Aplicação de busca de filmes
 SPA
aplicações web que operam em uma única
página, onde o conteúdo é atualizado
Resumo do dinamicamente sem que haja uma recarga
que vimos completa da página.
até agora
criar uma experiência de usuário mais rápida e
responsiva, carregando todo o conteúdo necessário
em uma única página, em vez de recarregar a
página inteira a cada interação do usuário.
Análise e Desenvolvimento de Sistemas
• Desenvolvimento de sistemas front end
Aula 2 (parte 2)
• Fundamentação da tecnologia React
 • Fundamentos da tecnologia React

O que você
vai aprender
nessa aula
 • Entendimento sobre a SPA

Resumo do
que vimos
até agora
 • Nenhum recurso específico

O que você vai • Atenção

precisar para
acompanhar
essa aula
 Dinâmica

• Exploração de conceitos

• Exemplificações
Conceitos
• React
• É uma biblioteca JavaScript
• Usada para criar interfaces com usuários
• Baseada em blocos reutilizáveis (componentes) vindas de partes menores e mais
simples.

• Desafio da biblioteca
• Melhorar atualização dos sites em resposta a eventos
• Eventos normalmente requerem atualizações no site
• Eventos que normalmente causam alguma atualização
• Entrada de um usuário
• Um novo dado vindo de outro fonte de dado
• Um site, base de dados ou sensor (e.g. GPS)

• React propõem a atualização a partir de “programação reativa”

Conceitos
• Interface com o usuário
• Aplicações web são normalmente construídas a partir do padrão MVC
• Elementos MVC
• Model → Camada de dados
• Controller → Organiza/regra/facilita a comunicação com a camada de dados
• View → o que é o usuário vê e interage
• Fluxo usual
• View envia inputs para o controller
• Controller repassa dados entre a view e a camada de dados

• Foco da tecnologia React

• View
• Capturar dados de entrada
• Apresentar dados de alguma forma ao usuário
Conceitos
• React
• Biblioteca responsável pela renderização do componente
• Independente do dispositivo alvo (mobile, tablet, web, etc)
• Renderizar é diferente de apresentar algo
• No contexto de React renderizar significa prepara para apresentar, para ser visualizado
• ReactDOM
• Biblioteca responsável pela apresentação de componentes renderizados
• Voltada para navegadores
• Disponibiliza várias funções para interfacear React e navegadores
• Principal função é ReactDOM.render
• Opera sobre o Virtual DOM
Conceitos
• DOM
• Document Object Model
• Representação interna de um documento web
• Converte HTML, estilos e conteúdo em nodos
• Nodos podem ser manipulados usando uma
linguagem de programação
• JavaScript é a linguagem adotada em projetos web
• Exemplo funções para operação
• getElementById
• innerHTML
• Modificar o DOM modifica a página
• Modificações na página modificam o DOM
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Conceitos
• DOM
• Manipulação do DOM com JS é lento e ineficiente
• Sempre que o DOM for modificado, o navegador precisará
• Investigar se a página precisará ser redesenhada
• Em seguida redesenhar a página
• Uso de algumas funções possuem nomenclaturas muito longas
• e.g. Document.getElementsByClassName
• Daí o surgimento de várias bibliotecas, tal como jQuery
• Proposta facilitou o trabalho do programadores web mas....
• Lhes entregou a responsabilidade de definir quando e como o DOM aconteceriam
• Resultado levou a UI lentas para baixar ou mesmo reagir a interações com o usuário
• React assumiu a responsabilidade de quando e como realizar tais modificações
Conceitos
• Virtual DOM
• Proposta de funcionamento
• (1) O programador elabora um código React para renderizar uma UI
• Isto resulta em um elemento React sendo retornado

• (2) O método de renderização do ReactDOM entra em ação

• Cria uma representação simples e leve do elemento em memória (um virtualDOM - VDa)

• (3) ReactDOM “escuta” a eventos que requerem atualização da página

• Quando ocorre um evento
• O método ReactDOM.render cria uma no representação da página em memória (VDb)
• Compara a nova Virtual DOM (VDb) com a antiga (VDa) e calcula a diferença
• Sistema chamado de reconciliação
• Se forem diferentes, aplica no DOM da forma mais eficiente o possível
Conceitos
• Filosofia da tecnologia
• Focado em componentes

• Composição vs Herança

• React é declarativo

• React é Idiomático
Conceitos
• Filosofia da tecnologia
• Focado em componentes
• Biblioteca propicia a criação e composição de componentes para construir a UI
• Componentes elaborados como peças independentes
• Podem ser reusadas
• Podem passar dados entre eles

• Um componente
• Um simples botão
• Uma barra de navegação construída a partir de coleção de botões e dropdown

• Decisões do desenvolvedor
• Avaliar questões de estilização na elaboração do componente
• Deve explorar o princípio de responsabilidade única (SOLID)
• Sua existência deve ter uma tarefa específica a executar
Conceitos
• Filosofia da tecnologia function Button(props){
return(
• Composição vs Herança );
<button onClick={props.handleClick}>{props.label}</button>

• Herança é usada em POO para criar }

variações de classes function Dialog(props){

return(
• Uma subclasse herada as propriedades <div className="dialogStyle">{props.message}</div>
)
definidas em uma superclasse }

function WelcomeDialog(props){
• Composição tem maior foco no reuso de return(
<Dialog message="Welcome to our app!" />
um componente sem especializá-lo )
}
• Sua funcionalidade pode ser ajustada a
partir da passagem de parâmetros
Conceitos
• Filosofia da tecnologia
• React é declarativo
• Abordagem Imperativa
• Maioria das linguagens é Imperativa • Pegue duas fatias de pão
• Coloque as fatias de pão lado a lado
• Escolha uma das fatias de pão
• Paradigma Imperativo • Sobre a fatia escolhida
• Descreve como algo tem de ser feito • Passe manteiga nela
• Coloque uma fatia de presunto nela
• Coloque uma fatia de queijo
• Paradigma Declarativo • Coloque a outra fatia de pão
• Coloque o resultado em um prato
• Descreve o que quer que seja feito
• Abordagem declarativa
• Um sanduíche de presunto e queijo num prato
Conceitos
• Filosofia da tecnologia
• React é Idiomático

• É uma biblioteca pequena

• Possui funcionalidades limitadas quando comparada a outras bibliotecas JS

• Possui vários conceitos e métodos intrinsecos a biblioteca

• Apesar disto, components React são javaScript
• O lado bom é que
• Quanto mais souber JavaScript, melhor será sua habilidade com React
• Quanto mais souber React, mais facilmente absorerá os conceitos de JavaScript
Casos de uso da tecnologia
• Facebook - Desenvolveu o React para uso interno e agora o usa
em seus aplicativos, incluindo o Facebook, Instagram e WhatsApp.

• Netflix - Usa React para construir sua plataforma de streaming e

melhorar a experiência do usuário.

• Airbnb - Usa React em sua plataforma de reserva de viagens para

fornecer uma experiência de usuário intuitiva e responsiva.

• Uber - Usa React em seus aplicativos de motorista e passageiro

para fornecer uma experiência de usuário rápida e confiável.
Recursos mínimos de um projeto React
• Arquivos de projeto
• Arquivos React (JSX)
• Arquivo HTML de entrada

• Ferramenta de transpilação
• Ferramenta de tradução entre linguagens

• Ferramenta de empacotamento
• Ferramenta de compactação de arquivos de projeto
Arquivo JSX
• Tipo de arquivo explorado em projetos React
• São opcionais, mas muito empregados import React from "react";

• Origem do nome
function Login(){
const handleSubmit = (e)=>{
e.preventDefault();
• Java XML console.log(`logging in ${e.target[0].value}`);

• Agrupam recursos essenciais

}
return (
<form id="login-form" onSubmit={handleSubmit}>
• lógica de marcação <input
• Tags HTML type="email"
id="email"
• lógica de renderização placeholder="E-Mail Address"/>
<input
• Comandos JavaScript like type="password"
id="password"/>
• Objetivo <button>Login</button>
</form>
• Criação de interfaces com o Usuário );
}
export default Login;
O Babel
• Características
• É um tipo de compilador
• Tradutor de código fonte ou "transcompiler"
• Converte o código fonte entre linguagens de programação

• Transpilador vs Compilador
• Transpilador
• Converte entre linguagens
“semelhantes”
• Compilador tradicional
• De código fonte
• Para linguagem de baixo nível
O Webpack
• Empacotador de módulos estáticos
• Processa os recursos do projeto
• Arquivos texto (html, css, js)
• Imagens
• Cria um gráfico de dependência
• Mapeia os módulos necessários
• Gera um ou mais pacotes (bundle)
Relação entre os recursos
 React uma biblioteca JavaScript para criação de
interfaces de usuário (UI).

O React foi projetado para ser declarativo

Resumo do
que vimos O Virtual DOM do React é usado para fazer essa
atualização de forma mais eficiente.
até agora
Grandes corporações fazem uso do React:
Facebook, Netflix, Airbnb, Uber, entre outras.
Análise e Desenvolvimento de Sistemas
• Desenvolvimento de sistemas front end
Aula 2 (parte 3)
• Explorando JSX
 • Sintaxe básica de JSX

O que você
vai aprender
nessa aula
 • Conceitos sobre SPA

Resumo do • Como funciona a tecnologia React

que vimos
até agora
 • Ferramental de desenvolvimento
• IDE
• Node.JS
O que você vai
precisar para
acompanhar • Atenção
essa aula
 Dinâmica

• Prática com exemplos

Arquivos JSX
• O JSX (JavaScript XML)
• É uma extensão de sintaxe usada no React
• Descreve a estrutura e a aparência dos componentes de interface do usuário

• Permite escrever código semelhante a HTML dentro do JavaScript

• Tornando a construção de interfaces de usuário mais intuitiva e fácil de ler.

• Parte fundamental do React

• Permite que você defina
• A estrutura dos componentes
• Os elementos visuais que compõem a interface do usuário
 import React from "react";
function Login(){
const handleSubmit = (e)=>{
e.preventDefault();

Conceitos }
console.log(`logging in ${e.target[0].value}`);
// do something else here

return (
<form id="login-form" onSubmit={handleSubmit}>
<input
• JSX não é HTML type="email"
id="email"
• Vendo o código placeholder="E-Mail Address"/>
<input
type="password"
id="password"/>
• Conhecedores de HTML <button>Login</button>
</form>
• Reconherão a estrutura a ser entregue );
}
export default Login;

• Conhecedores de JavaScript
• Entenderão que o função resultara em é um erro

• O que temos é um JSX

• Um componente React bem elaborado
• Os Markups internos não são HTML
• São uma extensão de JavaScript
Conceitos
• React tem componentes embutidos
• Como dito, JSX não é primordial para a elaboração de componentes
Código HTML
<label class="inputLabel">Search:
<input type="text" id="searchInput">
</label>

Código React sem o uso de JSX

using React.createElement:
React.createElement("label", {className: "inputLabel"}, "Search:",
React.createElement("input", {type: "text", id: "searchInput"}));
Conceitos
• React tem componentes embutidos
• Elementos em HTML5
• Pode-se usar qualquer nome de elemento HTML5
• React produzirá esse elemento HTML5
• Por exemplo
• Componente React resultando na renderização da seguinte parte da marcação HTML

Código HTML Código JSX

<label class="inputLabel">Search: <label className="inputLabel">Search:
<input type="text" id="searchInput"> <input type="text" id="searchInput">
</label> </label>
Sintaxe básica de JSX
• JSX é XML para JavaScript
• Regras JSX são equivalentes a XML
• Todos elementos devem ser fechados

• Elementos que não podem ter nodos filhos

• Chamados elementos fechados
• Devem ser fechados com slash
• Exemplo: <br />, <img />, <input />, <link />

• Atributos que são strings devem vir entre aspas

• Elementos HTML usados no JSX

• Devem ser escritos em letras minúsculas
• <input /> é um elemento HTML
• <Input /> deve ter sido elaborado como um componente
Sintaxe básica de JSX
• Palavras reservadas
• Ao traduzir de JSX para JavaScript
• Pode haver sobreposição na linguagem alvo
• Casos comum
• nome de elemento
• nome de atributo usado
• Resulta em erro do programa compilado

• Para evitar o erro

• Certos nomes de atributos HTML conflitantes são renomeados:
• Exemplo
• O atributo class torna-se className.
• O atributo for torna-se htmlFor.
Sintaxe básica de JSX
• Uso de chaves {}
• Utilizado quando se deseja
• Incluir uma variável
• Incluir um trecho de código JavaScript no JSX que não deve ser interpretado
Sintaxe básica de JSX
• Inserção de comentários
• Comentários HTML não funcionam no JSX
• Deve-se usar a sintaxe de comentário de bloco JavaScript (/* e */)
• Comentário só funciona se estiver entre chaves

function App(){
return (
<h1>
{/* Todo: Make this header dynamic */}
Welcome to My Website
</h1>
)
}
export default App;
Sintaxe básica de JSX
• Retornando um resultado
• Componentes devem retornar uma única estrutura
Sintaxe básica de JSX
• Retornando um resultado
• Mais de um resultado não é válido na linguagem
Sintaxe básica de JSX
• Retornando um resultado
• Tags HTML são um bom mecanismo para unificar os elementos
• Pode-se usar o conceito de fragment do React
• Produz resultado equivalente
Sintaxe básica de JSX
• Resumindo
• Todo elemento descrito em JSX deve ser fechado
• Elaboração respeitas as regras de XML

• Elementos JSX devem ter uma única raiz

• Ao retornar, deve haver apenas um elemento raiz envolvendo todos os outros elementos.

• Comentários em JSX
• São escritos dentro de chaves
• Exemplo: {/* Comentário JSX aqui */}

• Use chaves {} para incorporar expressões JavaScript

• Permite incorporar expressões JavaScript, como variáveis, expressões ou chamadas de função.
• Dentro das chaves, você pode escrever qualquer código JavaScript válido.
Explorando conceitos na prática
• Vamos criar novamente um projeto
• Faremos isso com o padrão create-react-app
• Para criar o projeto use o comando npx create-react-app nomedoprojeto
• Modificaremos o arquivo App.js
• Para rodar, basta o comando npm start

• Exploraremos algumas alternativas de codificação

• Uso de variáveis simples
• Uso de lista de valores
• Uso de funções de agregação
Explorando casos
• Caso 1 – Uso de variáveis simples
• Explorando o uso de variáveis
Explorando casos
• Caso 2 – Uso de variáveis simples
• Explorando o uso de mais de uma variável
Explorando casos
• Caso 3 – Uso de tags em variáveis
• Explorando o uso de mais de uma variável
Explorando casos
• Caso 4 – Uso de tags em variáveis
• Explorando o uso de mais de uma variável
Explorando casos
• Caso 5 – Uso de valores inteiros
• Manipulando inteiros no contexto de React
Explorando casos
• Caso 6 – Uso de objetos para a construção da página
• Declarando um objeto javaScript com campos
• Criado arquivo a parte para armazenar o dado (abordagem opcional)
Explorando casos
• Caso 7 – Uso de coleções com
tipos simples (string)
Explorando casos
• Caso 8 – Uso de
coleções com tipos
simples (inteiros)
 • Entendimento sobre JSX
• O que são
• Ferramentas adicionais
Resumo do • Sintaxe básica
que vimos
até agora
Análise e Desenvolvimento de Sistemas
• Desenvolvimento de sistemas front end
Aula 2 (parte 4)
• Renderização condicional
 • Renderização condicional

O que você
vai aprender
nessa aula
 • Conceitos sobre SPA

Resumo do • Como funciona a tecnologia React

que vimos
até agora • Sintaxe básica de JSX
 • Ferramental de desenvolvimento
• IDE
• Node.JS
O que você vai
precisar para
acompanhar • O mesmo projeto base criado anteriormente
essa aula
• Atenção
 Dinâmica

• Exploração de conceitos

• Exemplificações com códigos

Conceitos
• Motivação
• Por vezes um código precisa decidir sobre alguns detalhes
• Apresentar um subconjunto de dados
• Ocultar algum elemento

• No JSX, existe forma especial de escrever JavaScript

• Permite incorporar código JavaScript dentro dele usando chaves
• Pode-se declarar uma variável e incorporá-la em uma tag < > HTML
Conceitos
• Renderização Condicional
• A decisão é tomada baseada em resultado de expressões
• São as chamadas Renderizações Condicionais

• Existem três formas de elaborar declarações condicionais

• Operador if/else
• Operador &&
• Operador ternário ?:
Renderização Condicional
• Uso de if/else e variáveis
• Elementos JSX podem ser atribuídos a
variáveis
• Variáveis podem ser substituídas pelos elementos
dentro da instrução return
Renderização Condicional
• Uso de if/else e variáveis
• Elementos JSX podem ser atribuídos a
variáveis
• Fluxo de execução pode ser modificado
Renderização Condicional
• Uso de if/else e variáveis
• Mas....
• Incluir no meio das tags não funciona
Renderização Condicional
• Uso do operador &&
• O operador && considera
• Uma condição a esquerda
• Uma expressão a direita

• Se a condição for verdadeira

• A expressão é executada
• O elemento é incluído

• Se a condição for falsa

• A expressão não é executada
• O elemento não é incluído
Renderização Condicional
• Uso do operador ternário
• O operador ternário _?_:_
• condicao ? valor_se_verdadeiro : valor_se_falso

• Condição
• Equivalente àquele usado com if

• Valor_se_verdade
• Entregue se a condição for verdadeira

• Valor_se_falso
• Entregue se a condição for falsa
Coleções
• Assunto recorrente em disciplinas de programação
• Define uma estrutura de dados
• Voltada para conjunto de dados
• Muitas vezes de tipos equivalentes (mas não necessariamente)
• Armazenar, manipular e organizar

• Em JavaScript
• Existem tipos nativos para tratar coleções
• Arrays
• Objetos
• Dicionários (mapas)
Coleções
• Em JavaScript
• Existem tipos nativos para tratar coleções
• Arrays
• Coleção ordenada de elementos
• Pode armazenar
• Qualquer tipo de dado, outros arrays, objetos
• Elementos acessados por índice numérico
• Podem ser adicionados ou removidos dinamicamente
• Alguns métodos disponíveis
• push e pop: Adiciona o remove elemento
• forEach: Percorre cada elemento
• Map: Transforma o elemento armazenado
• Filter: retorna nova lista com o resultado da filtragem
• Reduce: Usado para contagem, média, etc
Coleções
• Em JavaScript
• Existem tipos nativos para tratar coleções
• Objetos
• coleção não ordenada de pares chave-valor
• Para cada valor
• É associado a uma chave exclusiva
• Permite acessar e manipular o valor.
• São usados para representar
• Entidades com propriedades e comportamentos
• As propriedades
• podem ser adicionadas, modificadas ou removidas
dinamicamente
• O acesso a propriedades feito usando a notação de
ponto objeto.propriedade
Coleções
• Em JavaScript
• Existem tipos nativos para tratar coleções
• Dicionários (mapas)
• Coleção de elementos que permite armazenar pares chave-valor
• Tanto as chaves quanto os valores podem ser de qualquer tipo
• Ao contrário dos objetos
• Mapas mantêm a ordem de inserção dos elementos
• Permitem usar qualquer tipo de valor como chave
• Alguns métodos disponíveis
• set, get: Permite modificar e capturar dados
• Delete: Permite eliminar uma entrada
• Has: Permite avaliar se um recurso está na coleção
• forEach: Permite iterar sobre a coleção
Exploração de coleções com React
• Caso 1 – Explorando Array de strings com renderização condicional
Exploração de coleções com React
• Caso 2 – Explorando Array de inteiros com renderização condicional

Map
Exploração de coleções com React
• Caso 3 – Explorando Array de inteiros com renderização condicional
• Implementação equivalente a anterior, mas encadeando funções filter e map

Filter

Map
Exploração de coleções com React
• Caso 3 – Explorando Array de objetos com renderização condicional
• Explorando o comando &&
• Inclusão da flor só em caso de gênero feminino
 O uso de diferentes comandos para renderização
condicional

O uso de coleções
Resumo do
que vimos
até agora
Análise e Desenvolvimento de Sistemas
• Desenvolvimento de sistemas front end
Aula 2 (parte 5)
• Exemplos de solução explorando recursos vistos
 • Criação de projetos React

• Elaboração de código exemplo

O que você
vai aprender
nessa aula
 • O ambiente de desenvolvimento
funcionando
• IDE
O que você vai
• Node JS
precisar para
acompanhar
essa aula
 Dinâmica

• Construção de código
 Case

• Condução do caso 1
• Criando um sistema para apresentação de um card de uma pessoa

• Passos
• Elaboração de um objeto
• Elaboração da solução
• Estilização
 Case

• Condução do caso 2
• Criando um sistema para apresentação de um card de pessoas
• Estender cada objeto para conter peso e altura

• Passos
• Elaboração de um array de objetos
• Elaboração da solução
• Indicar se a pessoa tem um risco dado pelo IMC
• Apresentar ícone de alerta
 • Exemplos básicos de manipulação de
recursos em React JS

Resumo do
que vimos
até agora