Plano de Aula

Tecnologias de desenvolvimento
FrontEnd para Web
APOIO PLANO DE AULA

WASHINGTON VAZ
DOCENTE
1º Encontro
 APRESENTAÇÃO DOS OBJETIVOS
Nesta disciplina, o estudante irá:

- Conhecer os fundamentos do desenvolvimento WEB.

- Utilizar tecnologias essenciais, como HTML, CSS, JavaScript,
Bootstrap e React.JS.
-Desenvolver suas próprias aplicações web.

FONTE: encr.pw/cw1uU
 OBJETIVOS POR UNIDADE DE ESTUDO

o Unidade 1 – Introdução ao desenvolvimento Front End para Web.

o Unidade 2 – JavaScript Moderno.
o Unidade 3 - Introdução ao React.
Introdução às
tecnologias de
desenvolvimento front-
front-end
Este guia oferece uma visão abrangente das tecnologias de desenvolvimento front-
desenvolvimento front-end, que desempenham um papel crucial na criação de
criação de interfaces de usuário eficientes e atraentes para a web. A jornada
jornada começará com a história e evolução das tecnologias de desenvolvimento
desenvolvimento web, passando pelos componentes básicos da web, HTML,
HTML, formulários, CSS, Framework Bootstrap 5 e as vantagens de usar o
Bootstrap.

by Washington Luiz Vaz

 UNIDADE 1

● Tema de Aprendizagem 1: Introdução à Internet: Conceitos fundamentais e

componentes básicos.
● Tema de Aprendizagem 2: HTML, formulários e CSS: Fundamentos e estilização.
● Tema de Aprendizagem 3: Estilização com framework Bootstrap.

FONTE:https://www.freepik.com/free-vector/video-conference-
remote-working-flat-illustration-screen-laptop-with-group-
colleagues-people-
 INTRODUÇÃO À INTERNET: CONCEITOS
FUNDAMENTAIS E COMPONENTES BÁSICOS

● Definição de Internet.
● Importância.
● Conceitos de endereço IP(Internet Protocol),
protocolos de Internet e URLs (Uniform Resource
Locators).
 INTRODUÇÃO À INTERNET: CONCEITOS
FUNDAMENTAIS E COMPONENTES BÁSICOS

Exemplos ::

fonte: https://www.homehost.com.br/blog/internet/meu-ip/
 INTRODUÇÃO À INTERNET: CONCEITOS
FUNDAMENTAIS E COMPONENTES BÁSICOS

Exemplos:

fonte: Autora
História e a evolução das tecnologias de
de desenvolvimento web
1 Origens das tecnologias web
O surgimento das tecnologias de desenvolvimento web remonta ao início da World Wide Web
Wide Web nos anos 90. Marcado pela simplicidade, o HTML era o principal meio de criação de
criação de páginas estáticas.

2 Evolução para web dinâmica

Com o tempo, surgiram linguagens e tecnologias como CSS, JavaScript e frameworks que
frameworks que possibilitaram a criação de sites dinâmicos e interativos, transformando a
transformando a experiência do usuário na web.

3 Padrões e práticas atuais

Hoje, as tecnologias front-end evoluíram para incluir padrões avançados de design responsivo,
acessibilidade, e otimização de performance - garantindo uma experiência de alta qualidade em
diversos dispositivos e condições.
 INTRODUÇÃO À INTERNET: CONCEITOS
FUNDAMENTAIS E COMPONENTES BÁSICOS

● Servidores: Computadores dedicados que armazenam

e fornecem recursos na Internet.
● Clientes: Dispositivos que solicitam e recebem recursos
dos servidores.
● Navegadores: Aplicativos que permitem que os clientes
visualizem e interajam com recursos na web.
● Comunicação: Os clientes enviam solicitações aos
servidores, que respondem com os dados solicitados.
● Fluxo de dados: Os dados são divididos em pacotes e
roteados pela Internet usando protocolos como o HTTP.

fonte: https://www.freepik.com/free-vector/server-concept-
illustration_5357389.htm#query=servidor&position=15&from_view=search&t
 HTML, formulários e CSS: fundamentos e
estilização

HTML, CSS e JavaScript são as tecnologias

fundamentais para o desenvolvimento de interfaces
web. Vamos explorar separadamente cada uma delas:

FONTE: https://www.freepik.com/free-vector/developer-activity-
Componentes básicos da web
HTML CSS JavaScript

HTML, HyperText Markup CSS, Cascading Style Sheets, é JavaScript é a linguagem de

Language, é a espinha dorsal de responsável por estilizar e dar programação que permite
dorsal de qualquer conteúdo estilo ao conteúdo HTML. Ele tornar as páginas web dinâmicas
conteúdo web. Ele define a define as cores, fontes, layouts e dinâmicas e interativas. Ele
estrutura e o significado do outros elementos visuais de adiciona comportamento aos
conteúdo, permitindo a criação uma página web. aos elementos da página,
criação de páginas e aplicativos permitindo a criação de
aplicativos web. aplicativos web mais avançados.
avançados.
 HTML, formulários e CSS: fundamentos e
estilização

O HTML é uma linguagem de marcação utilizada para

criar a estrutura básica de uma página web. Através do
uso de tags, podemos definir o conteúdo da página e
como ele deve ser exibido no navegador.

FONTE: https://www.freepik.com/free-photo/html-system-
 HTML, formulários e CSS: fundamentos e
estilização

Para criar um arquivo HTML, é necessário usar um

editor de texto, como o Bloco de Notas ou o Sublime
Text, e salvá-lo com a extensão ".html". Para publicar a
página, é possível usar o GitHub Pages, uma plataforma
gratuita que permite hospedar um site diretamente do
repositório do GitHub.

FONTE: https://www.freepik.com/free-vector/dashboard-service-
HTML

1 Estrutura de Página 2 Tags e Atributos 3 Formulários e Inputs

Página
As tags HTML são
HTML fornece a estrutura marcadores que indicam HTML não apenas fornece
estrutura básica para o indicam ao navegador a estrutura para
conteúdo de uma página como exibir o conteúdo. formulários, mas também
página web, incluindo conteúdo. Os atributos suporta uma variedade de
cabeçalhos, parágrafos, fornecem informações tipos de inputs, como
listas e outros elementos adicionais sobre os texto, seleção, checkbox,
elementos estruturais. elementos. entre outros.
 HTML, formulários e CSS: fundamentos e
estilização

A estrutura básica do documento HTML é composta pôr

três elementos: <!DOCTYPE>: <html> e <head> e
<body>. O primeiro elemento indica a versão do HTML
utilizada no documento, enquanto as tags <html>,
<head> e <body> delimitam o conteúdo da página e
fornecem informações sobre ela.

FONTE: https://www.freepik.com/free-vector/website-designer-
 HTML, formulários e CSS: fundamentos e
estilização

Exemplos de tags básicas:

● <h1>, <h2>, <h3>, ... <h6>: Define títulos de diferentes
níveis de importância, sendo <h1> o mais importante e
<h6> o menos importante.
● <p>: Define um parágrafo de texto.
● <a>: Cria um link para outra página ou recurso na web.
Pode ser usado com o atributo href para especificar o
destino do link.
● <div>: Cria uma divisão ou seção genérica na página,
geralmente usada para agrupar outros elementos e
aplicar estilos CSS.

FONTE: https://www.freepik.com/free-
Formulários
Elementos de Formulário Validação de Dados
Os elementos de formulário HTML incluem HTML5 introduziu novos atributos e
incluem inputs, caixas de seleção, botões, recursos para tornar a validação de
botões, entre outros, que concedem formulários mais fácil e eficiente,
interatividade aos usuários. oferecendo uma melhor experiência de
usuário.

Interatividade Avançada
Além de simples coleta de dados, os formulários modernos permitem interações avançadas
avançadas como envio assíncrono e validação em tempo real.
 HTML, formulários e CSS: fundamentos e
estilização

Um formulário web é uma ferramenta essencial para

coletar informações dos usuários de um site. Ele
pode ser usado para diversos propósitos, como criar
uma conta, fazer uma compra ou enviar uma
mensagem. Um formulário bem projetado deve ser
fácil de usar e intuitivo, com campos claros e
instruções simples.

FONTE: https://www.freepik.com/free-vector/web-development-
 HTML, formulários e CSS: fundamentos e
estilização

Exemplo:

FONTE: Autora
CSS

Estilização Design Responsivo Animations

CSS permite uma ampla variedade O CSS moderno oferece suporte a Com o CSS, é possível adicionar
variedade de opções de layouts responsivos que se adicionar animações e transições
estilização, como cores, fontes, adaptam a diferentes tamanhos transições elegantes, tornando a
fontes, espaçamento e layout, de tela, garantindo uma tornando a experiência do usuário
proporcionando uma experiência consistente em vários usuário mais interativa e
apresentação visual atraente. dispositivos. dinâmica.
 HTML, formulários e CSS: fundamentos e
estilização

O CSS é uma das tecnologias mais importantes e usadas

no desenvolvimento frontend. Ele permite que os
desenvolvedores criem estilos visuais para suas páginas
web, como cores, fontes, tamanhos e posicionamento de
elementos. Além disso, o CSS também é responsável por
tornar as páginas web responsivas, permitindo que elas se
adaptem a diferentes tamanhos de tela.

FONTE: https://www.freepik.com/free-vector/hand-coding-concept-
 HTML, formulários e CSS: fundamentos e
estilização

A sintaxe básica de uma regra CSS é composta por um

seletor, chaves e declarações que especificam a
propriedade e o valor desejados. O seletor identifica o
elemento HTML a ser estilizado, enquanto a declaração
contém a propriedade a ser modificada e seu valor.

FONTE: https://www.freepik.com/free-vector/low-code-
 HTML, formulários e CSS: fundamentos e
estilização

Exemplo:

FONTE: Autora
Framework Bootstrap 5

Fácil de Usar Componentes Design Responsivo

Personalizáveis
O Bootstrap oferece uma O framework é construído com
sintaxe simples e elementos Com a vasta gama de com um foco especial em
elementos pré-construídos que componentes e estilos design responsivo, garantindo
que agilizam o disponíveis, o Bootstrap garantindo que os layouts se
desenvolvimento web, permite personalizar e estilizar se adaptem perfeitamente a
economizando tempo e elementos para atender às a diferentes dispositivos e
esforço. necessidades de qualquer tamanhos de tela.
projeto.
 Estilização com o framework Bootstrap

O Bootstrap é um framework de desenvolvimento frontend que permite a criação

rápida e fácil de interfaces web responsivas. Ele inclui uma série de
componentes pré-fabricados, como botões, formulários, menus e tabelas, que
podem ser facilmente personalizados para atender às necessidades do projeto.

FONTE: https://www.freepik.com/free-
 Estilização com o framework Bootstrap

Exemplo:

Fonte: Autora
Vantagens de usar o Bootstrap
Fácil Implementação Agilidade no Desenvolvimento Consistência Visual
Desenvolvimento

O Bootstrap simplifica a criação Com componentes e estilos Através de um conjunto de

de interfaces web, oferecendo estilos predefinidos, o diretrizes e estilos
classes prontas para uso. Bootstrap agiliza o padronizados, o Bootstrap
desenvolvimento de páginas garante uma consistência visual
páginas web. visual em todo o projeto.

preencoded.png
2º Encontro
Introdução ao
JavaScript
JavaScript é uma linguagem de programação poderosa e versátil que ganhou
destaque no desenvolvimento web moderno. Ela permite criar interatividade,
animations e efeitos dinâmicos em páginas da web, transformando a
experiência do usuário.

by Washington Luiz Vaz

Programando em Javascript
O JavaScript é uma linguagem de programação amplamente utilizada na construção de aplicações web interativas.
Com ele, é possível adicionar funcionalidades dinâmicas às páginas, desde simples efeitos visuais até complexos
sistemas de interação do usuário. Através da manipulação do Document Object Model (DOM), os
desenvolvedores podem controlar o comportamento dos elementos da página, respondendo a eventos e
realizando cálculos e lógica em tempo real.

Além disso, o JavaScript permite a comunicação entre o cliente e o servidor, possibilitando a atualização parcial
da página sem a necessidade de recarregar todo o conteúdo. Essa característica é essencial para a criação de
aplicações web responsivas e interativas.
 PROGRAMANDO EM JAVASCRIPT

O JavaScript é uma linguagem de programação de alto nível, interpretada e orientada a

objetos. Foi criada por Brendan Eich em 1995 e inicialmente foi concebida para ser
executada nos navegadores web, é uma das principais linguagens utilizadas no
desenvolvimento front-end e, cada vez mais, no desenvolvimento back-end.

Além disso, o JavaScript também é utilizado em outras áreas, como aplicativos móveis,
Internet das Coisas (IoT) e desenvolvimento de jogos. Sua popularidade e importância
continuam crescendo, impulsionadas pelo avanço das tecnologias web e a demanda por
experiências interativas na internet.

FONTE: https://www.freepik.com/free-icon/js-rounded-
 PROGRAMANDO EM JAVASCRIPT

Os conceitos básicos de programação em JavaScript incluem variáveis, funções,

estruturas de controle de fluxo e manipulação de eventos. Os desenvolvedores
também usam bibliotecas e frameworks populares, como jQuery e React, para
simplificar o processo de desenvolvimento e melhorar a eficiência.

FONTE: https://www.freepik.com/free-vector/javascript-
 PROGRAMANDO EM JAVASCRIPT

Algumas características:

Declaramos variáveis e atribuímos valores a elas.

Usamos a função console.log() para exibir mensagens no console do navegador ou do

ambiente de desenvolvimento.

FONTE: https://www.freepik.com/free-photo/html-system-
Funções

Criação de Funções Passagem de Parâmetros Depuração de Funções

Parâmetros
As funções são blocos de código Durante o desenvolvimento, é
código reutilizáveis que realizam As funções em JavaScript podem é comum enfrentar problemas
realizam tarefas específicas. Elas receber parâmetros, que são problemas com o funcionamento
Elas permitem que os valores passados para a função funcionamento correto das
desenvolvedores escrevam quando ela é chamada. Esses funções. A depuração de funções,
código modular e organizado, parâmetros permitem que a funções, ou seja, a identificação e
organizado, melhorando a função realize operações identificação e resolução de
manutenção e a legibilidade do personalizadas com base nos erros, é uma habilidade essencial
do programa. A criação de dados fornecidos, aumentando essencial para os programadores
funções é um dos conceitos sua flexibilidade e utilidade. programadores JavaScript. Isso
fundamentais da programação Isso envolve o uso de
programação em JavaScript. ferramentas de desenvolvimento,
desenvolvimento, como o
console, para examinar o fluxo de
fluxo de execução e os valores
valores das variáveis.
Escopo e Shadowing
Escopo de Variáveis Shadowing Resolução de Escopo
O escopo de uma variável em O shadowing ocorre quando
JavaScript determina onde uma variável local com o O JavaScript segue um
essa variável pode ser mesmo nome de uma conjunto de regras para
acessada e modificada no variável global é declarada, resolver o escopo de uma
código. Existem três tipos fazendo com que a variável variável, começando com o
principais de escopo: global, global seja "sombreada" e escopo mais próximo (local) e
local (dentro de funções) e de não possa ser acessada subindo até o escopo global.
bloco (dentro de chaves). dentro do escopo local. Isso ajuda a evitar conflitos e
garante o acesso correto às
variáveis.
Retorno de Funções
Uma característica fundamental das funções em JavaScript é a capacidade de
retornar valores. Quando uma função é chamada, ela pode calcular um
resultado e enviar de volta esse valor para o código que a invocou. Isso permite
que as funções sejam reutilizadas em diferentes partes do programa, tratando o
resultado como um insumo para outras operações.

O valor de retorno é especificado pela palavra-chave return. Essa declaração

encerra a execução da função e envia o valor especificado de volta para quem a
chamou. Caso nenhum valor seja declarado, a função retornará undefined por
padrão.
Função Anônima e Função Flecha
Função Anônima Função Flecha Comparação Contextual "this"

As funções flecha, Tanto as funções

As funções anônimas também conhecidas anônimas quanto as Uma das principais
são funções sem como arrow funções flecha são diferenças entre as
nome, definidas functions, são uma úteis para escrever funções anônimas e
diretamente em uma sintaxe mais curta e código mais as funções flecha é o
expressão ou como concisa para definir compacto e comportamento do
argumento de outra funções. Elas mantêm expressivo. A escolha contexto "this". Nas
função. Elas são úteis a mesma entre elas depende funções anônimas, o
quando precisamos funcionalidade das do estilo pessoal e da valor de "this" é
de uma função funções anônimas, necessidade determinado pelo
apenas uma vez, sem mas com uma sintaxe específica, mas, de contexto de chamada,
a necessidade de mais enxuta e legível, maneira geral, as enquanto nas funções
nomeá-la. Essa especialmente em funções flecha flecha, o "this" é
abordagem torna o casos de funções de tendem a ser mais lexicamente
código mais conciso e uma única linha. adotadas pela vinculado, ou seja, é
legível. comunidade determinado pelo
JavaScript devido à contexto em que a
sua sintaxe mais função é definida.
limpa e concisa.
Modelo de Objetos de
documentos
O Modelo de Objeto de Documento (DOM) é uma representação estruturada e
orientada a objetos de uma página web. Ele permite que os programas e scripts
acessem e atualizem dinamicamente o conteúdo, a estrutura e o estilo de um
documento HTML ou XML. O DOM é fundamental para a criação de aplicações
web interativas e responsivas, pois possibilita a manipulação do documento por
meio de linguagens de programação, como o JavaScript.

O DOM organiza os elementos de um documento em uma hierarquia de nós,

onde cada nó representa um elemento, um atributo ou o texto. Essa estrutura
em árvore permite que os desenvolvedores naveguem, selecionem e
modifiquem esses nós de acordo com as necessidades da aplicação.
Hierarquia de Nós
A hierarquia de nós é uma estrutura fundamental no modelo de objetos de
documento (DOM) do JavaScript. Cada elemento HTML na página é
representado como um nó na árvore hierárquica do DOM, com nós pais, filhos e
irmãos. Essa estrutura permite que o JavaScript acesse e manipule os elementos
da página de forma programática.

Os principais tipos de nós incluem o nó do documento, nós de elemento, nós de

texto e nós de atributo. Entender a relação entre esses nós e como eles se
conectam é essencial para navegar e modificar efetivamente a estrutura da
página usando JavaScript.
Selecionando e manipulando elementos do
objeto dom
Selecionar Elementos
O JavaScript permite que você selecione e interaja com elementos específicos da página da web.
Você pode usar métodos como getElementById(), getElementsByTagName() e querySelector()
para encontrar e manipular elementos de forma precisa.

Acessar Propriedades
Uma vez selecionados, você pode acessar e modificar as propriedades desses elementos, como
textContent, innerHTML, style e muito mais. Isso permite que você altere o conteúdo, o layout e o
comportamento dos elementos na página.

Manipular Classes
Você pode adicionar, remover e alternar classes CSS em elementos selecionados usando métodos
como classList.add(), classList.remove() e classList.toggle(). Isso permite que você altere o visual
dos elementos de uma maneira dinâmica e eficiente.
Gerenciando atributos

1 Acessando atributos 2 Criando novos atributos

O JavaScript permite acessar e manipular Além de acessar atributos padrão, o JavaScript
facilmente os atributos de elementos HTML também permite criar novos atributos
usando propriedades como element.attribute. personalizados usando a sintaxe data-*. Esses
Isso possibilita a leitura, alteração e remoção atributos podem ser usados para armazenar
dinâmica de atributos, oferecendo muito dados adicionais relacionados aos elementos,
controle sobre a estrutura da página. expandindo suas funcionalidades.

3 Verificando e validando atributos 4 Boas práticas

Ao gerenciar atributos, é recomendado seguir
É importante verificar a existência e o valor de boas práticas, como evitar a sobrescrita de
atributos antes de manipulá-los, evitando atributos padrão e manter a consistência na
erros. O JavaScript oferece métodos como nomenclatura de atributos personalizados.
hasAttribute() e getAttribute() para realizar Isso torna o código mais legível e fácil de
essas verificações de forma segura e eficiente. manter.
 PROGRAMANDO EM JAVASCRIPT

FONTE: Autora
Estrutura
A estrutura básica de um formulário web em JavaScript envolve a criação de
elementos HTML, como campos de entrada, botões e rótulos, e a manipulação
desses elementos usando JavaScript. Isso permite que o usuário interaja com o
formulário e envie os dados para o servidor.

by Washington Luiz Vaz

Campos de entrada
Tipos de Entrada Atributos Importantes
Os formulários da web oferecem uma Propriedades como "name", "type" e
variedade de campos de entrada, como "value" são essenciais para configurar e
caixas de texto, caixas de seleção, botões manipular os campos de entrada. Esses
de rádio e outros. Cada tipo é projetado atributos permitem que os
para coletar informações específicas dos desenvolvedores definam o
usuários de maneira intuitiva e eficiente. comportamento e a aparência dos
elementos do formulário.

Validação de Entradas
Os campos de entrada podem ser validados tanto no lado do cliente quanto no lado do
servidor, garantindo que os dados fornecidos pelos usuários sejam consistentes e relevantes
para a aplicação. Essa etapa é crucial para melhorar a experiência do usuário e a integridade
dos dados.
Atributos globais e controle de texto
Atributos Globais Controle de Texto Validação com Boas Práticas
JavaScript
Ao trabalhar com
Os atributos globais O controle de texto é Além dos atributos formulários web, é
são propriedades que crucial para a criação HTML, o JavaScript importante seguir
podem ser aplicadas a de formulários web. também desempenha boas práticas, como
qualquer elemento Através de atributos um papel importante no fornecer feedback
HTML, como required, controle e validação dos claro aos usuários,
independentemente minlength e dados inseridos em validar os dados no
do seu tipo. Eles maxlength, você pode formulários web. lado do cliente e do
permitem que você garantir que os Usando funções de servidor, e garantir a
adicione usuários forneçam validação acessibilidade para
características como informações válidas e personalizadas, você todos os usuários.
estilos, eventos e dentro dos limites pode garantir a
acessibilidade aos desejados. integridade e segurança
seus elementos web. dos dados enviados
pelos usuários.
Criando Formulários Web
Criar formulários web com JavaScript envolve diversos aspectos, desde a
estruturação do HTML até a validação e manipulação dos dados. É importante
compreender os elementos básicos de um formulário, como os campos de
entrada, botões de envio e rótulos, bem como a forma de acessá-los e controlá-
los através do JavaScript.

Ao construir um formulário web, é fundamental definir sua estrutura, adicionar

os campos necessários, configurar suas propriedades e definir a lógica de envio
e processamento dos dados. O JavaScript desempenha um papel crucial nesse
processo, permitindo a interação dinâmica com o usuário, a validação em tempo
real e o envio dos dados para o servidor.
Introdução aos
Formulários WEB
Os formulários web são recursos essenciais em aplicativos e sites modernos,
permitindo aos usuários interagir e enviar informações. Nesta seção,
exploraremos os fundamentos dos formulários web, abordando sua estrutura,
campos de entrada e validação de dados.
Estrutura dos Formulários
Os formulários web são compostos por diversos elementos, cada um com sua
função específica. Esses elementos incluem campos de entrada, botões, listas
suspensas e muito mais. A estrutura do formulário é definida usando a tag
<form>, que contém todos os elementos do formulário. Dentro dessa tag, é
possível organizar os campos usando outras tags HTML, como <div>, <label> e
<input>.

Além disso, é importante definir atributos-chave no elemento <form>, como o

action, que especifica para onde os dados do formulário serão enviados, e o
method, que define o método HTTP a ser usado (geralmente POST). Dessa
forma, a estrutura do formulário fornece a base para a interação do usuário
com a aplicação web.
Criando Formulário de Login
Estrutura Básica
Comece definindo a estrutura básica do seu formulário de login, incluindo as tags form,
label, input e button. Organize o layout de forma clara e intuitiva para melhorar a
experiência do usuário.

Campos de Entrada
Adicione campos de entrada para o usuário inserir o nome de usuário e a senha. Utilize os
atributos type, name e placeholder para deixar os campos claros e acessíveis.

Validação de Dados
Implemente validações dos dados de entrada usando JavaScript, como verificar se os
campos foram preenchidos corretamente. Forneça feedback adequado ao usuário, como
mensagens de erro, para melhorar a interação.
Validação dos dados do Formulário
Validação de Campos
1
Verificar se todos os campos obrigatórios foram preenchidos.

Validação de Formato
2
Garantir que os dados inseridos estejam no formato esperado.

Validação de Regras
3 Aplicar regras de negócio específicas para cada
campo.

A validação dos dados do formulário é crucial para garantir que as informações inseridas pelos usuários sejam
consistentes e adequadas. Isso envolve verificar se todos os campos obrigatórios foram preenchidos
corretamente, se os dados estão no formato esperado (como e-mail, CPF, número de telefone) e se eles atendem
a regras de negócio específicas do sistema.

A validação deve ser feita tanto no lado do cliente, usando JavaScript, quanto no lado do servidor, para uma
segurança adicional. Isso permite uma experiência mais fluida para o usuário, evitando erros e retornos
desnecessários ao formulário.
 CRIANDO UM FORMULÁRIO WEB

Introdução ao Bootstrap 5:

● Framework popular para estilização e desenvolvimento responsivo de

interfaces web.
● Oferece um conjunto de classes e componentes prontos para uso, facilitando a
criação de formulários elegantes.

Principais conceitos do Bootstrap 5 para criação de formulários incluem:

Containers: Breakpoints: Classes de estilização: Grupo de inputs: União de

objetos independentes: Validação de formulário web: Funções para validação
de campo: Envio de dados:

FONTE: https://www.freepik.com/free-photo/html-system-
 CRIANDO UM FORMULÁRIO WEB

FONTE: Autora
 OBJETOS EM JAVASCRIPT

Os objetos são uma parte fundamental da linguagem e

permitem armazenar e organizar dados em pares chave-
valor, eles oferecem flexibilidade e podem conter
propriedades e métodos para manipular e interagir com os
dados.

FONTE: https://www.freepik.com/free-vector/hand-drawn-flat-
 OBJETOS EM JAVASCRIPT

FONTE: Autora
 OBJETOS EM JAVASCRIPT

Introdução aos diferentes tipos de dados em JavaScript:

● Array: Uma estrutura de dados que permite armazenar e organizar múltiplos valores em
uma única variável.
● Map: Uma estrutura de dados que mapeia chaves para valores, permitindo o acesso
eficiente aos dados.
● Objetos: Estruturas de dados complexas que podem conter propriedades e métodos
para manipulação e interação com os dados.

FONTE: https://www.freepik.com/free-vector/abstract-technology-
 OBJETOS EM JAVASCRIPT

FONTE: Autora
 OBJETOS EM JAVASCRIPT

Introdução ao Visual Studio Code (VS Code):

O Visual Studio Code é um editor de código-fonte gratuito e de código aberto

desenvolvido pela Microsoft. Ele oferece uma ampla gama de recursos para
desenvolvedores de JavaScript, incluindo depuração integrada, realce de sintaxe,
sugestões de código e muito mais.

FONTE: https://code.visualstudio.com/
Introdução à
Estilização
A estilização é um dos aspectos mais importantes do desenvolvimento web,
desenvolvimento web, permitindo que os designers e desenvolvedores criem
desenvolvedores criem layouts visualmente atraentes, interativos e responsivos.
responsivos. Através da linguagem de estilo CSS (Cascading Style Sheets), os
Sheets), os profissionais de web design podem transformar páginas HTML
HTML simples em experiências online memoráveis, personalizando a aparência
aparência e o comportamento dos elementos da página de acordo com as
com as necessidades do projeto.

by Washington Luiz Vaz

preencoded.png
Sintaxe das regras de estilo CSS

A sintaxe das regras de estilo CSS é composta por um seletor, que determina
determina quais elementos HTML serão estilizados, seguido por um bloco de
bloco de declaração, que contém as propriedades e seus valores. Cada
Cada propriedade é separada por um ponto-e-vírgula, e o bloco de declaração é
declaração é delimitado por chaves. Por exemplo, h1 { font-size: 24px; color:
24px; color: blue; } irá aplicar um tamanho de fonte de 24 pixels e uma cor azul
uma cor azul a todos os elementos h1 na página.

Além disso, as regras CSS também podem utilizar seletores combinados, que
combinados, que permitem selecionar elementos com base em sua posição ou
posição ou relação com outros elementos. Isso torna a estilização mais flexível e
mais flexível e poderosa, permitindo que você crie layouts e estilos mais
mais complexos e personalizados.
Sintaxe das regras de estilo CSS
Seletor Propriedade Valor

O seletor identifica os As propriedades CSS Cada propriedade CSS requer

elementos HTML que serão determinam os aspectos visuais um valor específico que define o
afetados pelas regras de estilo. dos elementos selecionados, estilo aplicado ao elemento. Os
Isso pode ser feito usando como cor, tamanho, fonte, valores podem ser palavras-
nomes de tags, IDs, classes ou posicionamento, etc. Existem chave, números, unidades de
outros tipos de seletores mais centenas de propriedades CSS medida ou até mesmo outras
complexos. disponíveis para personalizar o propriedades CSS.
design.
Seletores de elementos HTML em CSS

1 Seletores de Tipo 2 Seletores de Classe

Usados para selecionar elementos HTML com Permitem selecionar elementos com base em
base em seu nome da tag, como "p" para seus valores de atributo de classe, como
parágrafos ou "h1" para títulos. ".meu-titulo" ou ".meu-paragrafo".

3 Seletores de ID 4 Seletores Avançados

Usados para selecionar um único elemento Incluem seletores de atributo, seletores de
com base em seu valor de atributo de ID, como filhos e seletores de irmãos, permitindo uma
"#meu-elemento". seleção mais precisa de elementos.
Valores de propriedades do CSS

Cores Unidades Fontes Layout

As cores em CSS podem As unidades de medida Propriedades de fonte Propriedades de layout,
ser especificadas de CSS incluem pixels (px), CSS permitem controlar como posicionamento,
várias formas, como porcentagens (%), o tipo, tamanho, dimensões e exibição,
nomes de cores, valores pontos (pt), ems (em) e espessura e estilo da determinam o
hexadecimais, RGB e rems (rem), entre fonte dos elementos. posicionamento e o
HSL. outras. comportamento dos
elementos na página.
3º Encontro
 3° ENCONTRO – UNIDADE 3

Tema de Aprendizagem 1: Começando com React JavaScript.

Tema de Aprendizagem 2: Dados e status.
Tema de Aprendizagem 3: Navegação e ativos React
Introdução ao React

O React.js é uma das bibliotecas de JavaScript mais populares e poderosas para

o desenvolvimento de aplicações web e móveis. Criado e mantido pelo
Facebook, o React revolucionou a maneira como construímos interfaces de
usuário, permitindo que desenvolvedores criem componentes reutilizáveis e
escaláveis. Nesta introdução, exploraremos os fundamentos do React, desde sua
arquitetura baseada em componentes até as ferramentas e práticas essenciais
para criar aplicações incríveis.

by Washington Vaz
 3° ENCONTRO – UNIDADE 3

O React é uma das tecnologias mais populares no desenvolvimento frontend

atualmente, é conhecido por sua flexibilidade e alto desempenho, tornando-o
ideal para projetos grandes e complexos.
Classificamos como uma biblioteca JavaScript de código aberto para criação de
interfaces de usuário, uma curiosidade foi desenvolvido pelo Facebook e é
amplamente utilizado na indústria de desenvolvimento web.
Conceitos básicos do React
1 Componentes 2 JSX
O React é baseado na construção de JSX é uma extensão da sintaxe do
interfaces de usuário através de JavaScript que permite escrever código
componentes reutilizáveis. Esses código HTML diretamente no código
componentes encapsulam a lógica, o código JavaScript. Isso facilita a criação
estilo e o comportamento de uma parte criação e a organização dos
da interface, tornando o código mais componentes React.
modular e fácil de manter.

3 State e Props
State é o estado interno de um componente, que representa seus dados e comportamentos.
Props são as propriedades passadas de um componente pai para um componente filho,
permitindo a comunicação entre eles.
 3° ENCONTRO – UNIDADE 3

JSX é uma extensão de sintaxe para o JavaScript que permite escrever HTML
dentro do próprio código. Isso torna a criação de interfaces mais intuitiva e
eficiente, pois elimina a necessidade de alternar entre diferentes arquivos e
linguagens.
Para incorporar JSX ao seu código JavaScript, é necessário utilizar uma biblioteca
como o React. Essa biblioteca permite que você crie componentes reutilizáveis
que encapsulam tanto a lógica quanto a interface gráfica da sua aplicação.

FONTE: https://www.freepik.com/free-
 3° ENCONTRO – UNIDADE 3

Exemplo de código JSX:

const elemento = <h1>Olá, Mundo!</h1>;
 3° ENCONTRO – UNIDADE 2

Exemplo de configuração básica do Babel:

Instale o Babel usando o gerenciador de pacotes npm: npm install @babel/core @babel/preset-react.

Crie um arquivo .babelrc na raiz do projeto e configure-o com o seguinte conteúdo:

"presets": ["@babel/preset-react"]

}
Componentes React
Componentes Funcionais Componentes de Classe Higher-Order
Funcionais Components (HOCs)

Componentes funcionais são Componentes de classe são HOCs são funções que recebem
são funções JavaScript que definidos como extensões da recebem um componente como
retornam elementos React. Eles da classe React.Component. Eles como entrada e retornam um
Eles são simples, fáceis de Eles oferecem acesso ao ciclo de um novo componente com
entender e se tornam cada vez ciclo de vida dos componentes e funcionalidades adicionais. Eles
vez mais poderosos com a componentes e outras Eles permitem a reutilização de
introdução dos Hooks. funcionalidades avançadas, de lógica entre componentes de
como estado local e métodos de componentes de uma maneira
métodos de ciclo de vida. maneira elegante.
Estado e props em React
1 Estado
O estado de um componente representa seus dados e comportamentos internos. Ele é
gerenciado localmente dentro do componente e pode ser atualizado através de métodos
específicos, como setState().

2 Props
Props são as propriedades passadas de um componente pai para um componente filho.
Elas permitem a comunicação entre componentes e a reutilização de lógica entre eles.

3 Fluxo de Dados
O fluxo de dados no React é unidirecional: os dados fluem do pai para o filho através das
props. Isso torna o gerenciamento de estado mais previsível e fácil de rastrear.
Ciclo de vida dos componentes
Montagem
Quando um componente é criado e inserido no DOM, ele passa por uma sequência
de métodos de ciclo de vida, como constructor(), render() e componentDidMount().

Atualização
Quando as props ou o estado de um componente mudam, ele é atualizado e passa
por métodos de ciclo de vida como shouldComponentUpdate() e
componentDidUpdate().

Desmontagem
Quando um componente é removido do DOM, ele passa pelo método
componentWillUnmount(), onde você pode limpar quaisquer recursos alocados.
Roteamento em React
React Router Rotas e Componentes
O React Router é uma biblioteca essencial O React Router mapeia URLs da sua
para o gerenciamento de rotas em aplicação para diferentes componentes
aplicações React. Ele permite que você crie React. Isso permite que você crie uma
uma navegação entre diferentes páginas estrutura de navegação complexa,
da sua aplicação de maneira eficiente e mantendo o código organizado e fácil de
escalável. manter.

Navegação e Parâmetros
O React Router também fornece ferramentas para a navegação entre rotas, como o Link e o
useHistory. Você pode até passar parâmetros pelas URLs, tornando a navegação mais dinâmica.
Gerenciamento de estado com React

Redux Context API MobX

O Redux é uma biblioteca popular A Context API é uma solução O MobX é uma alternativa reativa
para gerenciamento de estado nativa do React para compartilhar ao Redux, que simplifica o
global em aplicações React. Ele estado entre componentes sem a gerenciamento de estado em
fornece uma abordagem necessidade de passar props por aplicações React através de
previsível e escalável para o toda a árvore de componentes. observáveis e ações.
gerenciamento de estado.
 3° ENCONTRO – UNIDADE 3

Em React, o estado (state) é utilizado para armazenar dados que podem

mudar durante a execução do aplicativo. O estado é atualizado usando a
função setState(). Quando o estado é atualizado, o componente é
renderizado novamente com base no novo estado. É importante lembrar
que o estado deve ser imutável. Isso significa que você não deve alterar o
estado diretamente, mas sim criar uma cópia do estado existente e
modificá-la.
 3° ENCONTRO – UNIDADE 3

Além do estado, outro conceito importante em React é as props. As props são

passadas para um componente como argumentos e são usadas para fornecer dados
ou configurações para o componente. As props são imutáveis e não devem ser
modificadas dentro do componente. Em vez disso, se você precisar modificar as
props, deve fazê-lo no componente pai.
 3° ENCONTRO – UNIDADE 3

FONTE: Autora
 3° ENCONTRO – UNIDADE 2

A navegação em React é gerenciada por meio de rotas. As rotas são definidas na

aplicação e correspondem a diferentes URLs que o usuário pode acessar. Ao clicar em
um link ou digitar uma URL, a rota correspondente é carregada e renderizada na tela.
Isso permite que o usuário navegue pela aplicação sem precisar recarregar a página
toda vez.

FONTE: https://www.freepik.com/free-
 3° ENCONTRO – UNIDADE 3

Os ativos em React referem-se a arquivos estáticos, como imagens,

fontes e arquivos CSS. Esses arquivos são carregados na aplicação
por meio de importações. É importante otimizar o tamanho dos ativos
para garantir que a aplicação seja carregada rapidamente. Além
disso, é possível utilizar técnicas de pré-carregamento para melhorar
ainda mais o desempenho da aplicação.

FONTE: https://www.freepik.com/free-
 3° ENCONTRO – UNIDADE 3

FONTE: Autora
 3° ENCONTRO – UNIDADE 3

Imagens:

FONTE: Autora
 3° ENCONTRO – UNIDADE 3

Estilo:

FONTE: Autora
 3° ENCONTRO – UNIDADE 3

Audio:

FONTE: Autora
Conclusão e próximos passos
passos
Nesta introdução, você aprendeu os fundamentos do React, desde sua
sua arquitetura baseada em componentes até conceitos essenciais como
como estado, props e ciclo de vida. Também exploramos algumas das
bibliotecas e ferramentas mais populares para o gerenciamento de estado e
estado e roteamento em aplicações React.

Agora é hora de colocar esses conhecimentos em prática. Explore projetos

projetos pessoais, participe de comunidades online e mantenha-se atualizado
atualizado sobre as últimas novidades e melhores práticas do React. Com
Com dedicação e persistência, você se tornará um desenvolvedor React cada vez
React cada vez mais habilidoso.