Curso React: Entendendo o JSX - #03

e Fala galera beleza sejam bem-vindos a mais uma nosso curso derrete eu sou Matheus Batista Esse é o canal hora de colar e hoje eu faço jsx recurso utilizado que vai precisar simples tiver lidando com o iett em vai entender ele e ver o que pode ser feito para gente trabalhar da melhor forma possível ou o jsx antes disso eu pedi para tu se inscrever se não é inscrito deixa atuar e também no vídeo que me ajuda muito que eu passei fico mais pessoas esse conteúdo aqui na descrição você vai encontrar vários livros importantes repositório

do curso para baixar o código fazer o forte que tu quiser nossos cursos também o blog e as redes sociais beleza dito isso Bora para o outro que o X é como HTML tá a gente vai ter aí é tags fechamento abertura poder colocar atributos classes AIDS e tem tudo que a gente faz O que é que faz de outras x como leves diferenças né a gente tem a possibilidade de executar código JavaScript nesse cara gente pode pensar como uma serpente em Jaime ainda o bar Se você já viram que abre famoso né quando está

programando em nude e bota aqui porém é dentro do James Phillips então ele vai ter capsulado Tiago escrito seu template aí ele tem ali dentro do JF né eu boto que a principal Bandeira a gente escrever HTML comfiest Então a gente vai estar sempre criando novas tags novos elementos conjunto existe isso para poder mostrar usuário na pasta Eu boto ele para interpolar variáveis Então isso é parte da execução JavaScript né a gente tem o valor dinâmico por exemplo nome de uma pessoa a idade do salário dela e consegue julgar na tela Isso e falou muito

simples envolvendo Não nessa Vale água gente pode chamar assim entre chave está onde potente Chaves não trabalhava E aí Cole o interpretado e tem o valor ali impresso nos a bota também é possível executar algumas funções e JavaScript RJX né então a gente vai ter Quase que o Léo script completo em todas as funções dentro de uma tristes mas tem algumas limitações então é não é que está a fazer porque é uma função dentro de um tecido faz sentir Então o que dá para fazer é o suficiente e a gente precisa te mostrar um HTML

dinâmico usuário Ok eu boto ele para poder esquecer de valores e atributos de tags você é muito importante para dizer que eu quero botar uma classe dinâmica baseada em uma variável minha então é possível fazer isso por meio jx eu quero mais dinâmico eu quero botar a chance de imagem de não dá fazer também então eu bastante gente precisa para poder mostrar das diferentes para usuários diferentes para o mesmo usuário Depende de quem quer fazer com sistema Beleza bora então continuar o nosso projetinho lá derrete é trabalhar com J x Então galera tô aqui com

o projeto aberto da última aula se tu fechou ele Neto eu falei isso mas tu pode parar o servidor do RS neste inicializou que o emprego start dando contra você e respondendo o viés aqui aí volta para o terminal tá e a gente pode reinicializada no-ip estar se novamente então tu parou na última aula e voltou hoje por exemplo pode retomar o projeto desempenho Stark Lembrando que o terminal tem que ela passa projeto Onde está aqui o código-fonte dele como vocês podem ver né tentar dentro aqui vai ter executa ele entende o que tu quer

e a vi no navegador no novamente Beleza então tá tu presta aberto aqui na porta 3 mil a gente fala navegador ou sigo ver aqui meu projeto agora que eu vou fazer para alterar o jsy haste anterior jx na última aula a gente fez aqui esse olho harriet esse primeiro ep e tudo que ele tá fazendo aqui né se eu coloco uma nova tag agora H2 alterando jsx eu estou mexendo nele né então eu atendo html e eu já estou atendendo o x também é a mesma coisa né que vai fazer essa diferenciação a gente

até pode falar que tá mexendo já tecido aqui mas de fato a gente tá escrevendo HTML tanto que nós regras normais né te dou HTML não daria Eu por exemplo se eu tem duas tags aqui de abertura ele já vai incomodar aqui vai dizer ah não tem uma tag de fechamento correto Então tudo vai ser validado né para ideia do Vert pode ter isso mas a gente é esse cara de propósito por exemplo só para gente estar aqui agora e vai lá navegador então eu receber esse erro porque esse cara aqui por mais que a

gente HTML ele tá processando um JavaScript por trás dos panos então ele quer que o HTML esteja correta tá então a gente tem que respeitar mais já testes o que a gente respeita as terras they were común tá gente pode falar isso eu comentei com vocês que a gente pode interpolar variáveis aqui então e somente né quando a gente cria uma variável no rack vai tá trabalhando dentro dessa função aqui depois a ver com porém se tal mas pensa em como se essa função aqui fosse o nosso elemento completo né então a gente nunca vai

trabalhar aqui fora a gente vai precisar essas áreas externas parte de cima para importar coisas trazer coisas para esse componente e vou chamar ele assim tá aí depois ele vai ter aula de companhia e não se preocupa e aqui embaixo na externa também para transportando mandando ele para frente tá E aqui dentro da função a gente vai estar aí tirando nosso código Nossa lógica inclusive variável se a gente precisava eu vou botar aqui por exemplo a const e nem me Mateus eu queria uma variável tchau constante né com o ombro e olha só que legal

já tem algo que não uso o nosso winrep também já evidencia ele não me dá um erro aqui um ordem aviso tá dizendo que eu tenho uma variável definida como nem mas eu tô usando em um lugar então essa questão de utilização do código é levada bem a sério e é que a gente pode ver aqui que a gente está levando vantagem por tá utilizando esse aplicativo que eu vou sentar não tá como é que eu vou colocar o meu nome é embaixo como foi para vocês gente não ter podem ter Chaves Então vou lá,

abre e fecha Chaves e bota aqui nem na aí deu tudo certo ele salvou não deu erro nenhum a gente falar ele no primo normalmente a gente tem acesso ao nosso nome então gente pode pensar que esse nome aqui viria de usuário foi carregado do banco de dados em tá imprimindo aqui no front Desk essa ideia que a gente a loja de utilizar isso mas não serviria para nada que só botar um monte de valor aí para olhava imprimir HTML e depois tava em algum lugar geralmente o outro a felicidade projeto conste New name igual

a name Pesquise por colocado em letras maiúsculas e vou botar meu nome processado aqui né que eu fiz alguma modificação ele vai lá e imprimir agora o novo tudo mais tá então ou tá vindo de algum lugar outro processando da Então beleza aqui para fazer mais aqui com o jsx eu posso executar algumas funcionalidades do próximo próprio JavaScript perguntar aqui soma dois mais dois aqui ele vai interpretar com a soma e vai me ajudar em quatro tá então ela que eu posso fazer também a gente não vai estar criando só umas Mas tem sim a

gente pode aqui colocar estruturas condicionais e fiel sentar para isso que a gente vai trazer para dar um script lógica digamos aqui né a ideia tem que mora colocar a lógica pesado aqui dentro então O Infiel se já tá de bom tamanho beleza outra coisa interessante é que eu posso tirar uma função aqui dentro da minha função é interessante também não precisamos agora aquele resultado ali eu não quero que Tá vendo aquela maneira né Eu quero interpretar o vídeo a função eu vou retornar esse ar mais bebê então agora em vez de executar dois mais

dois aqui a lógica aqui executa uma função no bloco de código reutilizável só botar aqui um dois e eu vou ter o resultado de três porque ele vai te emprestar aquela função - retornar o resultado antes de imprimir HTML na tela tá então você que também é válido ficando muito feio né então aqui eu processivo dado uma forma se reaproveitar ele né utilizando aqui já uma nova parava para entregar ele é e aqui eu te dizer uma abordagem mais interessante porque eu vou poder aproveitar esse são em várias partes aqui do meu corpo se eu

tivesse que colocar outras coisas eu peguei isso aqui miséria uma repetição maior Então eu tenho preferir as funções né geralmente Mas tudo vai de casa sua casa né Vai vendo isso ou do curso as melhores práticas também não se preocupa aí galera outra coisa eu posso fazer que eu vou para vocês é um traço de atributo a própria SX Então vamos ver que eu tenho uma embalagem tá ela vem de outro site então a parte de uma url Pois é então eu vou pegar uma rede que eu tenho aqui de um site que gerem mais

eu via ponto que esse uber.com e que coloco tamanho dela 150 pixels por 150 pesos mas mais quadrado e agora eu quero colocar essa imagem aqui no código como é que vou fazer vou criar até demais hein tá E essa daí aqui vocês lembram a gravemente básico é uma selfie inclusive tag né então ela se feche automaticamente e o sou obrigado a fechar harriet era só se eu não coloco fechamento ele vai reparar isso aqui não teria problema nenhum para Gabriele né então tem que tomar cuidado tá então vou botar aqui o áudio de mim

a imagem ó e aqui e Sr eu quero botar a minha URL dinâmica como é que eu vou fazer eu vou tirar essas "abrir e fechar a Chaves e colocar o nome da minha variar Agora eu tenho uma imagem dinâmica sendo carregada no meu código Beleza então essas são algumas das utilizações de JavaScript gente vai mais fazer ao longo do nosso curso de Jet aqui e também ao longo da vida de vocês como desenvolvedores recte OK outra coisa legal do JF x aqui eu preciso tá entregando apenas um elemento o pai eu não posso ter

diversos elementos no mesmo nível no retorno tá o que quer dizer isso que se eu tirar essa dica aqui vai dar eu olha só tô entregando aqui quatro elementos então ele dá um erro ele disse aqui todos os elementos jx precisa estar no repente em algum elemento então eu vou te é obrigado a colocar eles por exemplo uma dfi não que eu seja Obrigado colocar uma diz mas eu tenho que dar um rap aqui entregar um só e aí ele para de me dar erro tá E aí eu tirei aquela classe DIAP né que tá

aqui no meu rsss e já colocar ela agora para vocês entenderem como é que funciona eu colocar uma creche James clip-on eu nunca tivesse Deixa eu botar clash Pepe vai funcionar né não vai ter mais normal aqui galera também funciona mas tem um pequeno detalhe sem te ver aqui com os óleo ele vai me dar um erro tá dizendo que a propriedade don't crash em vasos Você quis dizer qual é Sininho sim eu quis dizer quase nem mas eu errei de propósito para você entender aqui clash uma palavra reservada do Rio este e JavaScript usa

eu não posso utilizar esse cara aqui tá E algumas palavrinhas que a gente vai ver também ao longo do curso mas clash é que mais Pega no pé porque a gente vai tá botando mais classe aqui no isolamento para utilizar então ele tem que sempre lembrar que a classe nem paga então a urina correta de declarar o atributo Claire do Rio e Quest name não cresce procura e não cresce e não clash puramente a palavra craques tá eu tenho cuidado com isso tá é 11 o iniciantes ou agora você vai carregar aqui e não me

dá mais erro nenhum Beleza então acho que morre tá olhando lá o console também porque ele dá um zoom homens aqui como é que silenciosos e a gente consegue tá melhorando nosso projeto né então vocês viram aí que eu tô pela nenhuma decisão normal mas hoje é que prefere que a gente dioclécio nem Ok então galera sobre JS se eu quero falar para vocês é isso Por enquanto ainda tem muita gente vai tá mexendo já jsx algum do curso todo vai aprender muito mais coisas mas esse é o básico assim o fundamental Não é o

Buzz é fundamental que precisa para poder tá programando tá Não esquece aí de novo para se inscrever no canal galera deixa seu like tá se me ajuda demais compartilhar também esse vídeo com outras pessoas e aqui na descrição links importantes repositório do curso de rack para fazer o foco para baixar os nossos cursos ali naquele precinho camarada e também nosso blog e redes sociais B bom então sobre o DJ esses era isca vou ficando por aqui e te espero na próxima alça explorar mais o rack juntos Fábio