Resumo do Projeto de Componentes

Então vamos lá, voltando aqui ao nosso projeto, vamos criar uma pasta chamada, sei lá, normalmente eu tenho pasta chamada de componentes e se for coisa relacionada a formulário eu gosto de chamar a forma ou qualquer coisa ou common por exemplo, vamos botar common, eu também gosto de fazer pasta comam que vai ser usada, componentes vão ser reutilizados várias vezes, o que a gente vai fazer é pegar toda a checkbox e põe na pasta comam, pego a checkbox list põe na pasta comam, põe o hard, pasta comam, hard list, pasta comam, input text, you select agora vamos aqui criar outra pasta, uma das componentes, vamos um pouco falar um lado e lá, normalmente eu gosto de deixar só o app aqui dentro da src e todos os outros componentes dentro de componentes, se for, os componentes foram usados várias vezes eu ponho common, nesse caso vamos aqui pegar o comam e põe dentro da component, certo, então vamos ter pasta chamada de componentes e dentro de componentes tem o formulário e tem o comam aqui, entendeu, se você quiser também pegar esses constants, pode põe dentro de componentes, pode deixar fora, depende de você acho que deixa fora melhor, certo, agora vamos ajeitar os imports porque a gente mudou a estrutura, primeira coisa vamos lá no app, formulário não, está na mesma pasta, agora o formulário está dentro da pasta chamada component, diretórica component aqui, mude esse, salvar, tem um erro ainda, senote, porque a gente tem que mudar o formulário aqui, próximo é o formulário, lá em cima, esses caras aqui tem que ter, tem que ser precedido de comam, salvar, que mais, vamos no checkbox list, ver se deu tudo ok, o que é o erro agora, ah, não encontrou as constantes, voltando aqui no qual era mesmo o formulário, esse cara aqui a gente esqueceu, tem que ser, em vez de ponto barra, tem que ser um diretório acima, então vamos pôr dois pontos, em vez de só um, entendeu, então voltando ao browser, navegador, teste aí, manualmente, tudo certo, ok, agora a gente quer fazer esse cara aqui, a gente quer só dar um import para todos esses componentes, maneira de fazer isso vai no common, criam um arquivo chamado index, dentro do index você vai fazer assim, vai dar um export, star, estrela, from, primeiro tem que ser cada um export para cada componente, vamos fazer o checkbox certo, o que é esse significado, exportar tudo, todas as propriedades do checkbox, certo, então no checkbox, em vez de default agora, você vai exportar um objeto de propriedade do checkbox, cujo valor é o checkbox, entendeu, então esse checkbox, o valor é esse cara, e essa propriedade pode ser qualquer coisa, mas a gente escolhe checkbox por conveniência, e devido a propriedade ter o mesmo nome que o valor, usamos a shortcut do isx, esse atalho, não precisa digitar isso, se propriedade tiver o mesmo nome é o valor, então salva, da mesma maneira que a gente fez aqui, vamos fazer todos os outros, então vamos lá no index, como é esse, vou esperar você fazer para o checkbox list, ele deu certo, então vamos lá, checkbox list, input text, o que a gente vai usar no Atom, o atalho para mim, eu uso Mac, é comando shift D para duplicar a linha, talvez,