Resumo do Vídeo sobre Componentes Controlados em React

O tópico desse vídeo vai ser componentes controlados. A gente vai falar dos componentes input, principalmente dessa elemento input, componentes de tipo texto, checkbox, rádio e finalmente vamos falar do componente select. Quando eu falo componente, é a mesma coisa que elemento de html. No react a gente se refere a os elementos de html de componente, por isso nós se confundamos a mesma coisa nesse contexto. Então, o que é que é componente controlado? Normalmente, quando você faz um formulário html, você põe o form lá em cima, por exemplo, vai dar action, um local, um arquivo que vai processar o formulário, o método post, aí você põe os inputs e assim por diante. Eu não botei nenhum estilo aqui, mas você tem uma ideia e eu quero focar só nos componentes nos elementos. Então, a gente tem esses inputs, né? E quando a gente digita o nosso nome, como texto, quando você escolhe checkbox ou escolhe um dos botões de rádio e drop down, select, você clica no botão de submit, submeter o formulário. Então, toda essa informação de formulário, devido a ter o nome para cada um, vão ser disponibilizadas no back end em algum lugar. Essa maneira aqui é usando o componente que não está controlado, chamado uncontrolled components inglays. E se a gente fizer assim, funciona tudo bem, mas quando der um submit, vai para uma nova página, não fica na mesma página devido ao behavior de padrão do html, né? Normalmente, quando a gente usa jQuery e essas coisas, a gente dá o prevent default e a gente escreve o nosso código para processar o formulário e depois fazer um pedido de adx e assim por diante. Então, mesma coisa no react, é certo que a gente pode mudar o controle desses inputs do html padrão para o react e assim são chamados os componentes controlados, control components. Aqui está a página do documentação do react, em control components, está dentro da formulário forms. Se você quiser dar uma lida no inglês aqui, não sei se tem português, versão em português, mas ele explica detalhadamente o que significam componentes controlados e como usá-las assim por diante e a gente vai aprender essas coisas aqui mais de maneira mais compactada. Então, acessualmente o que a gente quer fazer com componentes controlados é tornar cada um desses componentes, mudar o controle, a gente vai controlar o valor e vai controlar o que acontece quando você muda o valor, quando você clica em um dos checkbox, o que vai acontecer é determinado pelo código que você vai escrever. Também pelo nome, cada caracter que você digita vai emitir um evento e esse evento é o chamado onChange que a gente vai lidar com ele usando o nosso próprio código em vez de deixar o controle como padrão. Então, vamos parar de falar um pouco e vamos à ação. Para esse projeto que a gente vai fazer, eu vou usar o chamado módulo create react app para gerar o novo projeto de react rapidamente e vai estar tudo configurado por padrão, se você não tem esse pacote no npm, digita npm, install, traço g e o nome desse pacote que é create react app, esse módulo. Esperar você instalar se não tem component, esse módulo ainda. A gente instalou tudo bem, depois a gente instalar vai dar create react app e deu o nome ao projeto, vou chamar componentes controlados. Eu já fiz, então vou entrar na pasta, cd componentes controlados. Então, a gente tem os arquivos aqui, tem o node modules, package.json, testpasta public, src, o código vai estar no src, vou entrar no meu texto, editor de texto, no atom, tá bom. Então, o ponto de partida desse aplicativo, src, index.js, esse node que tem o react DOM que está injetando esse componente chamado app no html, no div, que tem o id root. E esse arquivo que vai injetar no public, index, você vai no public, index, tem aqui o body, tem essa div com id root, é aqui que o aplicativo react vai ser injetado devido ao index aqui. Tá bom, então vamos lá para a definição do aplicativo app, esse app.js, tem um componente e tem uma função render, e retorna esse template. Para rodar esse aplicativo, vou botar ao terminal, vou digitar npm start, vai abrir o navegador automaticamente, com auto reload, hot reload, vai atualizar automaticamente cada vez que eu salvar o meu arquivo. Voltando aqui ao editor de texto, é assim. Tá bom. Então, o que eu vou fazer? Primeira coisa que eu vou fazer é, remover todas essas coisas do return da função de render, tá bom? Então, vamos remover tudo dentro da div, só deixar um div aqui, vamos fazer um form, e vou dar um input, type text, eu vou usar esse input para ser o nome, tá bom? Vamos usar esse input para o nome de alguma pessoa, no formulário. Note que eu estou usando uma barra aqui, em HTML5 não precisamos da barra, mas eu não estou fazendo HTML, eu estou fazendo JSX, que parece com HTML, que é parte do react, que na verdade é uma função, mas vamos continuar. Então, não se esqueça dessa barra aqui, é essencial porque isso aqui é um componente react, todo componente termina com barra, se não fizer isso vai ter erro. Tá bom? Então aqui tem o nome, deixa eu só por um título aqui, não é h4. Formulário, já dá o auto-reload, não precisa nem atualizar no navegador. Então, eu tenho um input aqui, type text, name, nome, no formulário. Vou botar um botão de submit, salve e atualizar automaticamente para acessar, não sei o que, deixa eu botar um BR aqui, note que eu sempre tenho uma barra. Certo? Deixa eu abrir o DevTools do Chrome. Então, quando eu digito aqui, o componente não está controlado pelo react, eu digito qualquer coisa, e eu clico para acessar, livrar um servidor, se eu digitar uma action, não sei o que, method post e essas coisas, mas a gente quer controlar isso com JavaScript. Então, como a gente pode fazer isso?