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 ele vai ficar.

Primeiro,
vamos limpando a pasta "public",

apagando essa 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",

onde 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, neste novo nome,

vocês percebem
que eu estou chamando o nome

e o "method" "toUpperCase".

Isso significa que nome
vai ficar 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 em nome
e está sendo executado aqui

para que só ele fique
em 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, olha.

"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 que 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 "arrow function".

É 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 "=>",

que nós chamamos de "arrow function"
porque representa uma flecha.

E aí,
usando esse exemplo,

nós temos aqui a subtração
do "arrow function",

é da mesma forma,
recebe dois valores e retorna.

O retorno está sendo uma subtração.

E ao chamar aqui o 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.

"Import" o nome de uma imagem,

aqui é um nome qualquer
que você passa.

"From" de onde está essa imagem
e o caminho onde está a imagem,

que é exatamente aqui dentro
do "assets".

E aqui no "return",
estou passando um "img",

o nome da minha imagem,
o alt, né?

Caso a imagem não exista,
vai aparecer esse texto.

E uma largura
só para ficar visível aqui.

Com isso, temos uma manipulação
em um componente React

de uma forma rápida e dinâmica.