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