Resumo da Transcrição

Ah, se você não notou as cores da minha syntax highlighting mudaram porque já instalou o módulo language JavaScript.jsx, tá bom? Por isso que mudou agora já da o highlighting, da área do J, da Jsx, certo? Prosseguindo, vamos lá e dar o refactor nos outros inputs. Então, opa, vou aqui, input type checkbox, não precisa, é só botar checkbox. Nem vai ser frutos, mesmo valor, vou mesmo check por diante para dar uma quebralinha aqui. Ok, e aqui? O level já está incluído, depois do, botar depois o nome, level, maçã, vou no salva e testar, tudo ok, certo? Agora, você sabe por que tem essa linha aqui, espaço entre os dois? Vamos voltar para checkbox, se não a gente está usando div, a div é o display block, né? Bloco. Então, por isso que já quebra automaticamente, então não precisa mais, esses BRs. Eu movi os BRs, opa, tudo ok, vamos lá, clica na maçã, clica na banana, sonando ok. Voltando, agora vamos dar o refactor checkbox, não precisa mais do type, já é o refactor que está incluído no próprio componente que a gente criou. Murango é como level, level, remove BR, salva. Ok, murango, maçã, senode está tudo ok. Certo? Agora, queria, a gente ainda pode ir aprimorar esse código aqui do checkbox, porque tem, você note a repetição, tem esse, tem o outro, tem o outro, vai repetido. Então, tem um princípio chamado dry, do not repeat yourself, então, se você notar que tem muita repetição, há sempre maneira de fazer, de ficar dry, a gente fala. Então, vamos fazer uma checkbox list, ou alguma coisa assim, vamos fazer um novo componente, só para ver como a gente pode dar o refactor. Então, vou chamar esse arquivo de checkbox list, cadê, nos src, checkbox list, cont.js, import react, from react sempre, vamos ver, a gente não precisa manter estado, então não vou fazer componente de classe, vou só dar a opcional, checkbox list, props, certo? Vou dar o export default, eu estou indo rápido, espero que você já tenha se acostumado a escrever o boilerplate para cada componente, certo? Dá um import do react, define a função e exporta. Agora, dá o return dentro da função e o template. Nesses casos, vamos ver o que vai acontecer, esse note que tem um, dois, três, o que é que é comum entre esses caras? A gente tem o quê? Tem o this, um fruit exchange, é comum a cada um deles, mas o check está diferente, né? Então, como é que vai ser? Esse note que tem várias opções do value, banana, maçã e morango, então vai ser o quê? Vai ser um array, talvez, por exemplo, maçã, morango, banana assim, a gente pode passar isso como props para o checkbox list, vamos chamar de options, talvez, opcional, alguma coisa assim, eu acho que eu notei que tem um bug aqui, eu acho, frutas.maçã, eu acho que esse cara aqui devia ter sido maçã, eu só notei agora, mas eu acho que, vamos ver, está funcionando ou não? Ele deve estar funcionando porque eu usei o value em vez de checked, que estranho.