Resumo da Transcrição

Uma das razões para se aprimorar o componente, além de melhorar o código, é também você pode definir o próprio estilo do componente. Nesse caso, se eu for para input text, a gente pode definir o estilo aqui, por exemplo, level, não está negrito, pode adicionar o style aqui. Qual é? Fundweight? Nem lembro mais. CSS. Fundweight para bold, e fica negrito assim por diante. Você pode definir também seu CSS, eu defini o inline. Você pode definir o objeto com style sheet, ou próprio CSS, importar aqui no componente mesmo, mesmo o jeito que é feito aqui no app. Se lembra, tem esse app.css, que foi importado aqui, é só CSS que é importado ao arquivo assim por diante. Então, vou deixar esse fontweight aqui, você também pode extrair esse cara para um objeto, por exemplo, chama de styles, e que antes do return, tá bom? Antes do return, não é dentro do return, mas antes pode definir o styles, como objeto. E assim, deve funcionar da mesma maneira. Tá bom? E assim por diante, pode mudar o estilo do caixa de text e outras coisas, mas eu só queria deixar isso claro, que você pode definir o estilo também, uma das razões para dar o refactoring no próprio input, componente próprio. Agora vamos prosseguir para o próximo refactoring, aqui no app, voltando no app, a gente fez input text, vamos agora fazer o checkbox, né? Esse que agora aqui, vamos copiar um deles, vou recortar. Vamos lá, recortar. Aqui, vamos criar um arquivo, vamos chamar checkbox, motjs. Primeira coisa, a gente faz input react, from react. Você tem que fazer decisão, componente de classe ou funcional, se o componente não manter estado, então você pode deixar como componente funcional. Entretanto, se o componente tiver que manter o estado, tiver que se lembrar de certas propriedades, você tem que usar o componente de classe. Nesse caso, vamos começar com o componente funcional, stateless function component. Vamos lá const, chamar de checkbox, vai ser a função de flash, note o argumento vai ser props e retorna o template que eu recortei e colei. Eu vou dar, quebrar tudo, com uma propriedade por linha, que está muito longa aqui. E volto esse cara para lá. Primeira coisa, checkbox está ok. O nome, vamos pegar no props, está bom frutas, não sei o que. Então, antes disso, vou mostrar como a gente quer usar esse cara. A gente quer usar checkbox, se quiser dar o nome, pode dar. Sim, props name, ah desculpa, não é isso, propa ser frutas. Oop, value vai ser banana. Os mesmos aqui, you change, you check. Certo, vamos usar assim. Se eu quebrar. Do app, a gente vai usar componente dessa maneira, dessa maneira aqui. Mas dentro do componente, se esses caras vão aparecer como props, então ser incluídos nessa variável, chamada props. Então, checkbox, name frutas, não vai ser frutas, vai ser props.name. Value vai ser props.value, entendeu? You won't change, vai ser props.onChange. Checked, vai ser props.checked. Bom, agora vamos recortar esse cara e colar no app. Não se esqueça de exportar export default checkbox. Eu gosto de deixar no final, se pode também dar um export aqui na mesma linha. Salvar, vou para o app. E no primeiro aqui, que eu recortei, se lembra, antes da banana, vou colar checkbox. Certo? Se eu não acho que o highlight checkbox não é define, peraí, vamos lá importar, import checkbox from.barre checkbox. Tudo certo, voltando aqui a esse cara. Se não acho que o highlight está assim, é porque eu não tenho suporte ao GSX. Eu posso adicionar, se quiser, eu acho que eu não tenho instalado nesse atoma aqui, se pode, nas settings. Depende do seu editor de texto, meu caso, atoma, eu posso procurar para GSX, highlight, ou alguma coisa assim. Acho que é language.jsX, não me engano. Cadê um? Cadê? Tem muitos. Language.jsX, talvez esse, mas não tem muito downloads. Eu acho que é language.jsX, que eu tenho na minha outra conta instalado já, então não me lembro, acho que esse aqui é o melhor, vou dar uma instalada. Language.jsX. Cadê? Está fazendo download baixando aí, eu estou dando upload de vídeos, por isso que está demorando pouco. Depois de já lá, vai aparecer o highlight para o GSX. Quanto isso, vou voltar aqui, vamos continuar. Checkbox, não sei o que, vamos ver se está funcionando ainda. Foi da banana, esse cara aqui, essa checkbox. Banana True, banana False, ainda está funcionando. Então, não teve problema e você pode também dar o effecto para cada um deles da mesma maneira. É só reescrever. Mas tem um detalhe, você note que a banana aqui, esse label está fora do componente. Da mesma maneira que a gente fez o label dentro do input text, a gente pode pegar essa banana, esse label e pôr dentro do checkbox. Então, vamos extrair a banana aqui, depois do name, vou mudar a label e vou para o banana. Volta no checkbox, vamos pegar e adicionar o label aqui, depois do name, props.label. Porque o label foi dado como props ao checkbox. Então props.label. Desculpa, não é aqui, é fora do input. Props.label. Do lado do checkbox input, type checkbox, ponho label. Você note vai dar erro. Se lembra? Qual o problema aqui? Então, clã botão de, sim. Deu, agora está tudo ok. Porque tem duas coisas sendo retornadas e não pode, tem que ser somente um elemento, um componente ser retornado da função render do react. Normalmente, eu acho que você pode botar um label aqui, dessa maneira, para poder, quando clicar em um desse cara, vai clicar no checkbox. Vamos testar. Será que vai funcionar? Quebra a linha aqui. Funcionou, então agora você note que nesses outros aqui, aparece, quando clica, não acontece nada, mas quando clica na palavra banana, já checa, já marca. Então, assim. Se quiser fazer style para o label ou outra coisa, só adicionar como um style, um objeto. Sei lá, botar negrito. Vou botar em line, se você quiser extrair para um objeto, ou fazer a sua própria foda de styles, por favor. Pode até mudar a cor. Acho que é color, né? Vou botar o que? Blue. Faz certo? Deixa eu dar um soft wrap, você vê. Agora, voltando ao app. E eu quero que você faça da mesma maneira para as outras checkbox. Vou esperar você dar o refactoring nesses outros aqui, da mesma maneira. Até a próxima.