Au 12 - Frornt-end - React - Criando estrutura e componentes de um formulário - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo ho a gente vai continuar aqui desenvolvendo as funcionalidades aí da nossa aplicação né na aula passada a gente criou lá um modal né o modal para a gente colocar conteúdos dentro dele e nessa aula aqui a gente vai iniciar a criação do formulário de de o formulário para adicionar um produto né para registrar para criar um produto eh nessa aula aqui eu planejo a gente criar basicamente a estrutura e as componentes desse formulário e fazer na próxima aula eh só estilização né pra gente personalizar todo esse formulário Tá certo então nessa aula aqui a gente vai estar fazendo algo eh nessa ideia aqui ó deixa eu olhar aqui no nosso XD nós temos aqui o o design de como seria esse formulário né que é um um formulário que vai est dentro da modal tá ele vai ter ali a gente vai poder poder preencher né categor a marca a loja de venda o nome do produto o preço do produto a descrição e a quantidade que a gente tem em estoque tá isso aqui tá alinhado com o backend né o backend que Leandro desenvolveu tá certo é pode pode até ter alguma diferenc inha e a gente compensa aqui no código mas a ideia é essa Tá certo então o que que nós vamos fazer vamos criar essa componente né esse adicionar produto é uma componente e E aí dentro dele a gente vai organizar em Componentes né Essa estrutura esses inputs do tipo select o input do tipo texto e o text area tá que são os três tipos de componentes que a gente tem aqui e aí na próxima aula a gente vem com a estilização Tá certo então vindo aqui no código né no código tá do mesmo jeito que a gente fez na aula passada né vamos ver aqui no Browser se eu atualizo aqui o browser tá aqui né o nosso o nosso modal com o quadrado vermelho dentro tá certo e aí é agora a gente vai criar a componente no o formulário para adicionar produto tá E esse formulário ele é um formulário específico da tela de produto né então a gente pode criar ele dentro de components aqui da página products beleza porque é uma componente que só vai ser usada aqui caso em o futuro ele seja usado em outros locais a gente simplesmente move ele para componentes aqui de cima né essa componente entre aspas aí Global Tá certo então vamos criar aqui a pasta eu vou chamar isso aqui de Ed product form tá dentro dele a gente cria aqui o arquivo index né index. tsx E aqui nós vamos criar componente né que é o react Arrow function component Export né rfce do snippet que a gente viu na aula passada ele vai criar aqui eu só vou trocar o nome né que é ADD ã product form certo já vou importar aqui também o arquivo de estilos né então Import Styles from eu não criei o arquivo ainda né então V criar aqui o arquivo Styles module. css e aqui no Ed product form eu vou importar Styles from barra Styles pm.

CSS beleza vamos salvar isso aqui e aqui na nossa tela de produto né no na raiz aqui da tela e eu tenho modal com o quadrado vermelho dentro né só que agora eu não vou ter mais esse quadrado vermelho vou passar aqui o nosso Ed product form certo a componente que a gente acabou de criar fazendo isso nós já temos aqui né o Ed product form o texto lá que é o nome da da componente né sendo exibido perfeito então agora dentro de AD product form a gente vai começar a estruturar isso aqui dessa forma que nós temos aqui no XD Beleza então já iniciando aqui a gente vê que a gente já tem um um Adicionar novo produto né que é um título tá então esse título eu vou manter essa div essa div eu já vou até passar o estilo para ela né o Class name que é Styles P container né a div mais externa é o container aqui dentro eu vou passar um H1 tá que é o texto aqui Adicionar novo produto novo produto certo olhar aqui no Browser tá aqui né Adicionar novo produto bem simples beleza olhando aqui no XD nós temos também o botão de fechar esse botão aqui vai ser um svg tá então já que é um svg a gente faz na aula na aula na próxima aula tá mas por enquanto eu vou fazer um botão tá um Button bem simples mesmo então aqui a gente o Button o o do html mesmo né sem estilo porque nós vamos usar o a gente vai passar esse VG né aqui um botãozinho e além disso nós temos se a gente olhar aqui no ex de novo né os selects os inputs e esse text area a gente tem um porém aqui no select Porque a gente já fez um select para essa aplicação né esse select se a gente fecha aqui o modal é esse select aqui né de todos os produtos e ele ele vai ter funcionalidade diferente né tipo porque quando eu mudar aqui a opção dele eu vou querer chamar uma callback eu vou querer por exemplo no caso aqui de todos os produtos e produtos excluídos né então eu vou trocar o conteúdo da minha lista né então querendo ou não esse select aqui ele não é o select que vai ser reutilizado lá no formulário né ele foi feito e Inclusive a gente fez um teve um erro ali porque nós fizemos ele é na pasta components geral né que como se esse select aqui fosse utilizado em outras telas né em outras páginas mas nesse caso não né nessa aplicação não da mesma forma é o nosso input aqui o Range Price o esse Range né porque ele foi criado no local correto se a gente vem olhar aqui no código o nosso Range Price Filter né Essa componente aqui foi criada dentro da components do nossa página de produtos mas o select ele tá aqui no component de cima né aqui o select que é o que a gente criou específico para aquela tela né inclusive as opções dele é específica né E quando a gente cria componentes aqui nessa pasta componentes externa a gente tem sempre que pensar em fazer algo aberto extensão né algo que vai poder ser o reutilizado em locais diferentes nesse caso aqui esse select não né então a gente pode mover ele daqui pra pasta components de produtos tá então vou só clicar aqui e arrastar ele já vai aparecer aqui para mim onde eu importava né porque o Import atualiza o vs code já substitui pra gente eu só tenho que salvar o arquivo né que ele altera só que não salva se a gente olar na aplicação tá com erro né porque o Import tá errado mas se eu venho aqui salvo no caso em product subheader que eu importo o select né E aí ele corrige tá falando que tá com erro aqui Ah tá é por causa do estilo né porque o no select aqui no na estilização eu pego ã aquela setinha roxa né o ícone que tá dentro do select e importo o Import relativo né então como Eu movi o arquivo de local esse PF aqui já não é mais o mesmo tá então vamos trocar aqui eu vou ter que voltar para assets eh Arrow Down né aqui ficou duas vezes a barra e fazendo isso aqui ele voltou o estilo também tá certo então só movendo aqui a componente de lugar para manter o padrão manter a organização né e agora a gente poderia trocar o nome né não é mais select seria um select Na verdade é um select só que o nome aqui ele tem que ser mais específico né relacionado ao nosso subheader Então vou colocar aqui um select subheader mesmo só para não confundir né porque select o próprio nome select em si já dá essa ideia de mais ser mais generalista né então vou trocar o nome da componente e trocar o nome da pasta também tá rename aqui para select subheader Dá um enter ele vai atualizar meus Import eu só salvo aqui o arquivo que ele atualizou vou ver aqui no app Tá tudo funcionando atualizar aqui né beleza tudo certo então vou fechar aqui essas esses arquivos que eu alterei deixar só o nosso formulário tá porque no formulário agora nós vamos criar algumas componentes que na verdade é o input eu já vou dar o nome aqui que eu quero né que é o input text tá que seria o um campo de input de texto nós teremos também o input só trocar aqui input text area tá que também é um text area né que é uma componente ela é um pouco diferente do input text né quando a gente usar lá vocês vão ver melhor essa diferença e a gente vai ter também o input select tá que vai ser um select só que agora esse select vai ser utilizado em formulários tá vai usar nesse formulário só que se eu tivesse outro formulário na aplicação eu usaria esse tá beleza então querendo ou não nesse caso aqui esses inputs Eles serão a ideia deles é ser reutilizado em outros formulários Tá certo então por conta disso a gente vai criar eles na pasta components externa né a components aqui entre aspas Global tá então eu vou criar aqui as pastas input select vou criar aqui também input text certo e vou criar aqui também o input text area Beleza então no input select criar componente né index test Agora não vou criar os arquivos de Styles né para economizar tempo então r c r c f ra fce tá criar componente input select input text também tá e input text area a extensão ficou errada né é index. tsx beleza e aqui vou ter o ra FC input text area beleza as três componentes criadas Vou importar elas aqui input select input text input text area importei salvei vamos olhar aqui no código no Browser né e elas estão aqui tá bem difícil de ver porque o nosso contêiner a nossa div ela tá sem cor de fundo né então eu vou só vir aqui no meu contêiner né do meu product form e vou adicionar aqui vou criar aqui a classe né contêiner botar um background color White né Branco certo então no nosso na nossa componente de formulário no contêiner né A div externa eu apliquei a cor de fundo Branca Tá e agora já tá ficou melhor de ver o que que tem aqui dentro tá vamos aplicar até um já que a gente tá só um pading tá um pading aqui de uns 20 pixels para dar um espaçamento ali Beleza então vamos continuar que tá aqui input select input Text e o input text area e outra coisa que é bom a gente já definir aqui nessa componente do formulário é a largura e a altura tá que eu quero que esses valores sejam fixos então aqui ó eu vou passar o í de aqui eu vou usar 70% do nosso vi wiit né 70 VW essa unidade de medida né a gente falou dela na aula passada né wiit e o também de 70 VH tá então 70% da largura e 70% da altura da tela eu vou aplicar nessa componente nesse contêiner aqui do meu formulário de adicionar produto tá então voltando aqui ele já ocupou um espaço bom né eu vou manter esse tamanho aqui por isso que eu passei fixo né e agora a gente vai continuar aqui adicionando esses esses elementos tá na verdade editando essas componentes né as componentes vai ter só essas três eu vou editar aqui o conteúdo delas tá e Começando aqui com a primeira é o select tá então no select ele é um componente eh ali um pouco diferente né porque o que que eu vou ter vou ter eu vou ter essa div que vai ser o contêiner né o cara que tá por fora e aqui dentro Eu vou ter um Label tá que seria meio que o título desse meu select tá e o que que eu vou ter mais eu vou ter o select em si tá beleza dessa forma aqui e como essa a ideia dessa componente é ser reutilizada a gente vai receber alguns parâmetros É porque ela tem que ser personalizável dependendo de onde ela vai ser utilizada Então vou criar aqui a interface para essa componente né quais propriedades que ela vai receber Ela vai ter um nome tá esse nome é importante por conta do formulário em si tá porque agora a gente tá montando a estrutura Mas a gente não tá falando muito de como forme funciona ainda né Então essa componente select ele tem um nome esse nome é um string tá ele tem um Label Opa que também é o string que esse Label seria esse título né esse título aqui e ele vai ter umas options também as opções que um Array de string né uma lista de string que quando eu clicar nesse select quais opções vão aparecer vai tá nesse Array aqui de options Beleza então vou falar aqui que ele recebe o objeto do tipo props e aqui dentro eu vou ter o name um Label e as options certo o o nome por enquanto a gente não vai usar eu vou deixar ele aqui sem utilizar a gente só vai usar o Label o Label vou dentro da tag Label e as opções né como ele é uma rei de opções ou seja quais opções eu vou ter pra marca vai ser Apple e Samsung tá então vai ter uma com essas duas opções então para m renderizar aqui dentro do select a gente tem aqui os options né a tag options com com na verdade option né com o texto que vai ter eó recebendo uma rede de opções aqui dentro Eu faço um map né então eu uso Chaves aqui para mim conseguir rodar uma função do JavaScript dentro do jsx e eu vou pegar options.