Resumo do Código das Radios

Agora vamos aprimorar o código das radios. Vamos fazer nosso próprio rádio, componente chamado rádio. Então vamos lá. SE e C, vamos criar um arquivo chamado radio, o rádio.js. Como sempre, import react, um react define o componente funcional com os radio, das props, como parâmetro retorna alguma coisa. E exporta default radio. Tá bom? E agora vamos voltar o app.js. Vamos pegar esses caras e pensar um pouco como vai ser o node aqui. O input é tipo rádio. Eles têm como o mesmo nome, mas o valor é diferente para cada. Então, a primeira coisa, vamos pegar esse cara aqui. Vamos pegar logo com um label, tá bom? Vou incluir o label já. Volta o rádio da mesma maneira que a gente fez os outros. Só colar aqui. Linha muito longa. Deixa eu quebrar. Dividir aqui para cada linha e tal. Node que tem duas coisas sendo retornadas, então vamos adicionar o andive. Esse cara fecha aqui e o masculino volta um pouco. Node que é rádio, então talvez esse cara seja o label. Então normalmente a gente põe um label como se fosse tudo. A gente fez um checkbox, se você ver, voltar o checkbox. A gente tinha um label também. Na verdade nem precisava dessa diva aqui, porque já tem um label. Mas a diva deixa cada display block. Então é um block, então cada checkbox vai aparecer na sua própria linha. Talvez se não tivesse o diva não apareceria, então a gente pode deixar isso também. É uma escolha que você pode fazer no design se quiser adicionar diva ou não. Eu não vou adicionar ainda, vou ver só como parece para você demonstrar. Vai aparecer o checkbox na mesma linha. Então um label, eu tenho um masculino aqui. Então o que a gente vai fazer? O type é radio, mas o nome tem que ser do props. Então esse cara vai ser o que? Props, ponto name. O valor também tem que ser fornecido pelas props. Então props.value. O checked também. Props for checked. You won't change. Certo? Só olhando checkbox, mesma maneira. Tá bom? Os casos masculinos vai ser props.level, chamados de level. A etiqueta lá. Agora voltando para o app. Certo? Esse cara tem que ser o que agora? Radio. Não precisa mais do tipo, já é. Está lá, name, general, value, masculino. Checkbox, mesma coisa. Won't change. Não precisa mais de masculino aqui, tem que ser um label. BR, talvez precise, porque a gente não pôs um div. Vou remover só para você ver o que acontece. Voltando aqui a gente exportou, mas não importou do app. Vamos lá e importar. Import. Radio from radio. Ok. Então está lá, masculino. Clicar no feminino para ver. Masculino, feminino. E assim por diante, senote que está na mesma linha, que eu tirei o BR e eu não estou usando o 1DVE dentro desse cara. Se você quiser incluir, depende de você. A gente pode botar um DVE aqui para ficar no bloco e não precisar de BR. Está certo? Voltando ao app, vamos dar o refactoring. A primeira é usar o mesmo componente de rádio que a gente... que nós criamos agora. Cadê? Vou esperar você fazer para o feminino. E aí, deu tudo certo? Vamos lá. Esses caras aqui se tornam radio. Só para ficar melhor de ler, eu vou deixar uma propriedade por linha e pego o label, inclui como prop do rádio. Certo? Testando. 1, 2, 3, tudo ok. Terminamos o aprimoramento, o refactoring. Chama... do rádio. Se quiser mudar o estilo também. Ou adicionar esse... Vamos ver aqui... Label. Vamos adicionar o estilo só para demonstrar que isso é possível. E normalmente cada componente... Você pode definir seu próprio estilo para que seja... para reutilizar o mesmo componente em vários locais e vai ter o mesmo estilo. Sei lá, cola... vermelho aqui. Certo? Voltando aqui. O cenote foi bem rapidinho, o que a gente fez esse componente, porque é muito parecido com o que a gente já tinha feito com checkbox. Não é? Certo? Só uma coisa aqui, de aprimoramento de código que eu não fiz no checkbox que você pode fazer aqui. Por exemplo, eu estou usando props todo o tempo, não é? Se você usar props ou qualquer outro objeto, você está usando todo o tempo, você pode dar o chamado de estruturamento. Por exemplo, aqui você pode definir esses caras, extrair o nome, o value, check, you won't change, extrai essas propriedades de dentro do objeto chamado props. Desta maneira, você não precisa mais dizer props.name, props.value, assim por diante, pode só remover. Fica mais simples, né? Chamado de estruturamento ou de structuring do ES6, né? Versão JavaScript ES6. Para extrair propriedades de um objeto. Certo? Ah, esqueci do lebo também, né? Esse cara aqui. Salvar para ver se não deu problema. Vamos testar. Certo, tudo certo. Você pode fazer a mesma coisa com checkbox aqui. Com o ES6, eu vou deixar com o ES6 o refactoring, aprimoramento do código usando o destruturamento para o checkbox. Certo?