-
Para o
projeto Gente 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 S.
-
Aí você dentro da pasta.
-
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
-
ponto CSS.
-
Dentro do arquivo main.
-
Vamos apagar o import
do CSS do index.
-
E não é pior.
-
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
-
ou 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
uma 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 esporte
-
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 pouquinho.
-
Primeiro
são as declarações de variáveis.
-
Então declarei uma variável
nome de app, uma variável let
-
apelido recebendo fiapinho
-
uma variável, novo nome.
-
E nesse novo nome
-
vocês percebem que eu estou chamando
o nome e um método chupa case.
-
Isso significa que nome
-
vai ficar em maiúsculo?
-
Se vocês olharem aqui no resultado,
observe que só o Phillip
-
ficou em maiúsculo,
porque eu estou usando um método
-
que está sendo passado em nome
e está sendo executado aqui
-
para que ele, só ele, fique
maiúsculo.
-
O Fiapinho está exibindo normal
Como recebeu o apelido
-
e vocês vão perceber que aparecer
aqui seja bem vindo,
-
ou seja bem vindo! Está aqui o.
-
Seja bem vindo!
-
E eu estou chamando novo nome
-
e o apelido Novo nome
está recebendo o nome
-
e o maiúsculo e o apelido
está recebendo VIP e com isso
-
você vê a seguinte frase Seja bem
vindo ao Wiec e a app é assim.
-
Na segunda linha
-
nós temos a função soma e
-
criei uma função
-
aonde recebe dois parâmetros valor
um e valor dois
-
e retorna o valor mais valor dois.
-
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 dos parâmetros
-
20 mais nove
o resultado a soma é 29.
-
Se eu mudar aqui 15.
-
Agora 24
-
Se eu alterar aqui para oito 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.
