Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo de hoje é um vídeo onde a gente vai falar aqui um pouco sobre a estrutura do projeto que foi criado né que a gente criou na aula passada usando Create react app a gente vai entender aqui um pouco melhor o que que ele trouxe aqui pra gente o que que ele gerou como que essas coisas funcionam para aí sim a partir daí a gente vai começar a editar essa estrutura alterar aqui e o código para est iniciando aí o desenvolvimento do nosso projeto Beleza então eu tô aqui né no vs code na pasta que ele gerou para mim né O que a gente abriu na aula passada e executou né aqui a gente executou abrindo no terminal terminal a gente pode eh pressionar control shift aspas né ou então aqui se eu sair do modo tela cheia na parte superior que a gente tem aqui terminal você pode clicar e clicar aqui umil terminal ele vai abrir esse terminal pra gente e aqui eu executei o comando eu vou criar outro aqui só para não parar que está executando npm start né dentro do diretório do projeto E aí ele vai executar esse projeto né pra gente no nosso caso né Eu não eu não falei de como parar esse servidor Mas é só a gente digitar aqui control c né Eu clico aqui no terminal se eu digitar aqui control c ele para né o meu servidor Ele pergunta aqui né se eu realmente quero terminar eu digito sim ou eu pressiono cont control c duas vezes e aí ele para o o meu servidor para exar de novo eu dou aqui o npm start ele vai rodar para mim certo então voltando aqui no projeto né o projeto ele tem aqui alguns arquivos olha até abriu aqui no Browser meu fechar aqui voltar aqui no código a gente tem aqui né dentro da pasta src alguns arquivos né um app tsx app. test. tsx app.

css index. css a gente vai explorar isso aqui melhor tá então a gente vai começar aqui primeiro por essa pasta Public né que ele criou para mim que se a gente olha dentro dela tem aqui um arquivo né um um fev icon um index P HTML algunas Logos né uns uns arquivos estáticos aqui png manifest. js e robots.

txt esse F ícone né É um ícone si aquele ícone Zinho que fica na parte superior do browser ou seja esse aqui que tá que indica né qual página que tá aberta Então a gente tem aqui o react app tem aqui o Icone Zinho do react esse aqui é o FV né a gente tem aqui também as Logos né os arquivos pngs né que são os logos do react aqui no meu index P HTML se a gente dar uma olhada nele a gente tem alguns comentários aqui algumas coisas que o próprio Create rect app trouxe pra gente né mas o de importante aqui a gente tem né no Head né no cabeçalho aqui desse nosso documento HTML a gente tem alguns arquivos algumas tags meta alguns links que linkam para alguns ícones né e definição de viport definição de tema alguma descrição do site né do aqui na tag meta a descrição desse Website porque basicamente né se a gente volta um pouco aqui no que que é o HTML a gente tem ele é né uma estrutura né ele vai declarar ali o Quais elementos essa minha página Web vai ter e a página ela tem um cabeçalho né E ela vai ter ali um corpo né abaixo desse cabeçalho Então esse cabeçalho é definido aqui pela tag head né Essa tag R aqui né é o cabeçalho e a gente tem aqui também a tag Body que é o corpo aqui do nosso HTML então no cabeçário a gente define essas coisas a gente define por exemplo é Fontes que serão usadas né caso eu queira importar alguma fonte externa ou Eu queiro importar algum script alguma coisa a gente faz tudo no cabeçalho né define que ess essa tag meta né vem de meta data ou seja dados sobre a página né dados sobre o o o nosso HTML em si e a gente tem eh o link também que é pra gente basicamente que a gente usa para importar eh arquivos importar é o estilo né as folhas de estilo enfim a gente pode usar para importar scripts enfim várias coisas e no B no B é onde a gente realmente cria a página né onde o que vai ser exibido então é onde a gente tem aí todo todos os elementos HTML n que são muitos para descrevendo e criando essa página aí pra gente certo então no que ele já gera para mim ele gera coloca aqui essa tag no Script esse no Script aqui é basicamente caso o usuário tenha desabilitado no navegador dele e pro navegador dele não executar não executar scripts né não executar o JavaScript el essa tag aqui vai ser exibida vai ser exibida essa mensagem aqui né Que o usuário tem que habilitar o JavaScript para executar no browser para conseguir Executar a nossa aplicação e a gente tem aqui outra div outra não né uma div com ID root essa DVA tá vazia mas ela é muito importante paraa Nossa aplicação react funcionar Beleza então saindo aqui do Index P HTML a gente tem o manifest. js e o robots. txt Esse manifest.

js é é um arquivo voltado para dispositivos móveis né ele descreve aqui algumas coisas e se o robot. txt é para os robôs de busca né dos navegadores aí do do do Google enfim os motores de busca ler esse arquivo Robot PST Mas a gente não vai entrar muito nisso aqui tá então saindo aqui da pasta públ a gente tem aqui o nosso src né o sce aqui que é o principal aqui da aplicação E dentro dele a gente tem aqui o o index. tsx aqui no JavaScript a gente tem muito disso um arquivo index né esse arquivo index seria a raiz daquele diretório né daquela pasta Então como a gente tem aqui a pasta src eh a raiz dela o arquivo Inicial dela é o arquivo index então a gente já vem direto aqui no index para dar uma olhada e quando a gente olha aqui né a gente tem as importações né no JavaScript a gente faz os importes no início né então a gente tem aqui algumas importações de alguns pacotes né do react react dom do index.

css tem um arquivo CSS CSS a gente tá importando aqui dentro do desse arquivo tsx e a gente vai falar melhor sobre o que que é esse tsx a gente importa aqui um app né que tá vindo aqui do nosso arquivo app. tsx web vitos e basicamente é só isso né que a gente importa e logo aqui embaixo a gente já faz aqui uma definição né de variável a gente chama isso aqui de Rot ele recebe o o react Don né que a gente importou o react Don na aula passada eu falei do react Don que ele é basicamente o responsável por pegar o nosso código react e renderizar na eh no nosso browser né no caso aqui do no no cliente no no na Don que é o document Object Model que é onde o código HTML é renderizado a gente vai falar um pouco mais dessa Dom daqui um tempo Então logo aqui embaixo né a gente faz aqui a definição da variável root a gente usa aqui o react Don e o react Don e eu vou est explicando aqui melhor o que que é esse dom né que quando a gente tá falando de html a gente fala muito da Don document Object Model que é basicamente o documento ali que gerencia que é responsável pela nossa página HTML né pelo nosso documento HTML então ele é um modelo né um Object Model ou seja ele é um modelo um objeto que modela o nosso documento e no react né como falando aqui mais de como react funciona por baixo dos panos o react cria pra gente uma virtual Dom né Então deixa eu só voltar a câmera aqui ele cria pra gente um virtual Dom que seria a gente tem a Don e do browser e o react cria uma Don virtual E aí toda alteração que a gente faz o nosso código o react compara com essa virtual Dom né ele verifica ali se ouve alguma alteração mas na Dom virtual e se houver alguma alteração se tem alguma diferença você tem que fazer alguma coisa o react aplica essas alterações na Dom virtual usando ali todos os seus scripts toda a lógica por trás daquilo e depois que ele processou que as alterações que já fez na virtual dom ele replica na Dom original e o ganho que a gente tem nisso é um ganho de muito de performance né e e e a a forma que o react tem de funcionar né porque o controle que a gente aplica sobre o react né A questão ali do uso dos hooks gerenciamento da página é tudo feito e aplicado de forma excelente na virtual Don porque o react tem controle sobre ela e depois ele passa pra Don original que é a Don do usuário e o usuário não tem tanto essa sensação de processamento porque processamento de verdade foi feito na Don virtual e ele só pega o resultado na Dom original né na Don do browser certo então o react dom a biblioteca react Dom é ela que faz esse gerenciamento e d virtual dom pra gente e replica essas alterações na don tá então a gente usa aqui o react dom. Create Rot eu vou criar aqui uma raiz e essa raiz ela vai partir de algum elemento né Que elemento é esse eu dou um document né pon get Element by ID Ou seja eu estou pegando um elemento pelo id e e esse elemento ele tá definido aqui no nosso index P HTML que é essa div aqui com ID boot certo então eu pego né esse elemento aqui a gente usa até um C aqui no typescript né Falando que isso que eu acabei de importar que eu fiz esse document né PG Element byd é um HTML Element né fazendo aqui a tipagem e esse root né depois disso eu dou um root pon render Ou seja eu vou renderizar algo e esse algo é o meu App né esse App a gente tá importando aqui do arquivo app.

tsx que é essa definição aqui com essa div né com esse que aquele ícone lá do react girando e os textos que eu mostrei na aula passada certo então voltando aqui no index né a gente tem aqui esse react P strict mode o que que é isso né esse react strict mode ele é basicamente um um modo que roda somente de desenvolvimento que ajuda a gente ajuda os desenvolvedor a encontrar problemas na aplicação então no react né Por padrão e na verdade no react existem padrões de código que devem ser seguidos né que eles julgam lá como um padrão que a gente tem que seguir E aí o strict mode ele fica verificando isso então se a gente fazer algo que é muito absurdo o strict mode vai reportar isso para mim e vai dar um conso log aqui no meu no meu browser que tá rodando aqui a aplicação eu tenho aqui esses erros que foi que eu pausei né No início aí que eu parei a aplicação iniciei de novo mas aqui ele já tá com ordem aqui né enfim ele vai fazer ir fazendo isso e vai guiando a gente em alguns problemas que a gente pode tá tendo e a gente vai tentando corrigir por causa do strict mode né então ele é muito importante certo então é aqui no index test x aqui abaixo ele tem esse report web vitals que isso aqui seria basicamente né não aprofundando muito nisso mas ele é basicamente uma forma da gente coletar dados de performance da nossa aplicação né da nosso do nossa página web então esse web vitos ele vai servir para isso a gente não vai entrar muito a fundo nisso mas é só deixando claro aqui o que que é Tá beleza então a gente tem né dentro de src a gente tem o index tsx que ele é eu gosto de falar que ele é a raiz aqui do da aplicação react né do onde a gente inicia esse documento HTML e eu falo que o app tsx é o é a raiz basicamente da aplicação em si que a gente tá desenvolvendo Então a gente tem sempre esses dois né o index tsx que pega tudo ali e coloca dentro dessa div né porque se a gente dar uma olhada é o que esse a gente dá a gente tá criando esse root tá pegando o elemento né aquela div com esse ID Rot aqui e basicamente o que esse a react don tá fazendo né é quando a gente dá aqui esse ponto render é pegando todo o meu App e colocando dentro daquela div né e esse app ele já vai tá né claro compilado ali no HTML puro então é a gente tem esse índex e vai ter sempre o app tsx que é a raiz da aplicação E então aqui quando a gente parte aqui para esse App né esse App ele já tem uma estrutura um pouco diferente né porque se a gente dar uma olhada ele é um arquivo pon tsx né a gente não sabe muito o que é isso e se a gente dá uma olhada ele é uma função né uma função app que retorna elementos HT ML né O que pode suar um pouco estranho mas essa é é a é o resultado né Isso aqui é o jsx né então quando a gente se a gente vem aqui no Browser né na documentação do react a gente tem aqui esse introduzindo jsx né aqui da parte de conceitos principais e o do número dois aqui já é introduzindo jsx que aqui ele vai falar um pouco mais do que é isso mas é basicamente é a junção do JavaScript IPT com nesse caso aqui com HTML então a gente juntou né o o que o que foi feito né quando foi criada essa extensão jsx é basicamente a gente tem essa ideia de usar funções né usar o JavaScript para retornar esses elementos né nesse caso aqui são os elementos HTML então o padrão né é o jx Né que é com JavaScript e aqui como a gente tá trabalhando com typescript a gente tem aqui a extensão TS x né que permite a gente fazer isso criar funções Essas funções Retornam elementos e isso é exatamente a definição de componentes tá então uma componente eh dentro do react é isso é uma função que retorna algo visual então entrando um pouco mais a fundo aqui no jsx né e por conta de ser eh o jsx tá mais próximo do JavaScript do que do HTML algumas coisas mudam né nesse HTML que a gente como por exemplo essa div é no HTML puro a gente falaria que ele tem só Class né Class app mas como a gente tá no no jsx a gente já define o Class name tá então isso vai se repetir em alguns casos onde o nome da do atributo aqui do HTML ele tem tipo é junção de palavras por isso que aqui a gente tá usando esse cel Case né Então tá o Class o o n tá maiúsculo e qu pra gente ter essa diferenciação nesses casos porque no JavaScript é muito comum a gente ter ali o cel Case nessa notação essa forma de escrever esses atributos então outro exemplo que a gente pode ter aqui por exemplo nessa div Na verdade eu teria isso um botão né Deixa eu só criar aqui um Button esse botão ele teria o atributo aqui né on on Click e aqui o on Click ele é escrito em chem Case né não é com c minúsculo igual seria lá no HTML por conta dessa diferenciação que o o jsx Né o tsx tem em comparação com o HTML certo então tem algumas mudanças semânticas né aqui na própria documentação do react eles falam um pouco sobre isso mas basicamente o que esse jsx faz no final né e ele tem até aqui uma comparação que basicamente o jsx é quando quando a gente quando ele compila né o o que ele é equivalente ou seja esse elemento aqui né isso aqui é um é um jsx né esse a criação desse elemento Ou seja é uma constante que recebe um elemento H1 isso aqui seria equivalente ao a gente usar né o react p Create Element que lembra também esse react P Create Element lembra do HTML quando a gente usa o document p Create Element ou seja ou seja a gente tá criando um elemento né aqui no Create Element do react a gente passa o elemento que é um H1 um atributo né o Class name e o o child aqui né que é esse hello world que é um string então ele tem ali suas semelhanças mas dentro do ambiente react a gente usa vai usar sempre o jsx né nesse caso aqui o tsx para tá aí essas interfaces essas componentes pra gente estar trabalhando com elas então Além disso né a gente vai ter aqui os arquivos CSS né porque CSS também aqui tá bem simples ou seja é um arquivo que a gente define nesse caso que a gente tá definindo classes né ou seja ponto app traço logo isso aqui é uma classe né e a gente referencia essa classe p.