WEB CAP16 2025 VA03 REACT MANIPULACAO DE COMPONENTES

Para o projeto React
ser mais organizado,

precisamos fazer uma limpeza
em sua estrutura para manipularmos.

Vamos ver na tela como funciona?

Com a estrutura do projeto,
vamos fazer uma limpeza

e verificar aqui no navegador
como que ele vai ficar.

Primeiro vamos
limpando a pasta "public",

apagando esta imagem.

Em seguida, dentro da pasta "src",
dentro da pasta "assets"

vamos apagar a outra imagem.

E aqui vocês já vão perceber
que ele vai apresentar um erro.

Depois vamos apagar este arquivo "css".

Vamos apagar o arquivo "index.css".

Dentro do arquivo "main.jsx"

vamos apagar o "import"
do css do index

e no "app.jsx"
nosso componente principal

Vamos limpar tudo acima
do "function",

a linha abaixo do "function"

e tudo que estiver dentro
desse "fragments" ficando desse jeito.

Observem que agora no navegador
ficou tudo branco,

o seu projeto está limpo.

Com o projeto limpo,
já estamos prontos para manipular.

Veja como funciona na tela.

Coloquei um código
para poder exemplificar

como funciona a manipulação
de um componente.

Primeiro no componente 'App.jsx"
temos a seguinte estrutura

o "import" de uma imagem
que já baixei

e coloquei dentro do "assets",
uma imagem jpg,

a função do app que inicia aqui
e termina no "export"

e dentro dessa função
temos aqui o "return",

aonde vai ser apresentado na tela,
que é o que vocês estão vendo aqui.

E em cima do "return"
são as nossas funções.

Ou seja, o nosso JavaScript.

Vamos entender um pouco.

Primeiro são as declarações
de variáveis.

Então declarei uma variável "nome",
"FIAP",

uma variável "let",
"apelido" recebendo "fiapinho"

uma variável "novoNome"
e nesse novo nome

vocês percebem
que eu estou chamando o nome

e um método "toUpperCase".

Isso significa que nome
vai ficar em maiúsculo.

Se vocês olharem aqui no resultado,

observe que só o FIAP
ficou em maiúsculo,

porque eu estou usando um método

que está sendo passado um nome
e está sendo executado aqui

para que só ele fique
maiúsculo.

O "Fiapinho" está recebendo normal
como recebeu o apelido

e vocês vão perceber que apareceu
aqui "seja bem vindo",

o "seja bem vindo!" está aqui ó.

"Seja bem vindo!"

e eu estou chamando "novoNome"
e o "apelido"

"NovoNome" está recebendo o nome
e é o maiúsculo

e o apelido está recebendo
"Fiapinho"

e com isso,
você vê a seguinte frase:

Seja bem vindo ao React FIAP, Fiapinho.

Na segunda linha
nós temos a função soma

e criei uma função aonde recebe
dois parâmetros "v1" e "v2"

e retorna o "v1" + "v2".

Ao executar essa
função que é feita aqui embaixo,

eu estou passando as chaves,
"soma" que é o nome da minha função

e dentro das somas os parâmetros
"(20, 9)"

o resultado a soma é 29.

Se eu mudar aqui 15,
agora 24.

Se eu alterar aqui para 8,
23.

Então a soma está sendo executada
com essa função

aqui na linha do retorno.

Na terceira linha

nós estamos usando uma outra função,
mas nós chamamos isso

de era um function.

E a mesma forma

como é executada aqui de cima, mas

ela tem uma característica

de poder fazer em uma linha só e

não escrevemos a palavra function.

Nós usamos esse símbolo, o igual

e a setinha
que nós chamamos de hierofante.

Ela fala o tipo
que representa uma flecha.

E aí,

usando esse exemplo,
nós temos aqui a subtração dela

function
e da mesma forma recebe dois valores

e retorna o retorno
e está sendo uma subtração.

E ao chamar aqui no seu retorno,

subtrair o nome da função
e aqui os parâmetros 50 e o 30.

E aí ele vai fazer 50 -30 20.

Vocês perceberam que a função
foi executada aqui com sucesso

e a última
é a representação da imagem.

Eu já baixei a imagem como mostrei

e estou importando a imagem aqui.

Importe o nome de uma imagem aqui,

um nome qualquer que você passa from
da onde está essa imagem?

O caminho aonde está a imagem
que é exatamente aqui dentro do West

e aqui no Return
estou passando um mg.

O nome

da imagem, o alt.

Caso a imagem não exista
ele vai aparecer.

Esse texto e uma largura
só para ficar visível aqui.

E com isso
nós temos uma manipulação em

um componente React
de uma forma bem rápida e dinâmica.

Com isso temos uma manipulação
e um componente.

O é de uma forma rápida e dinâmica.