-
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.
