React.js: componentes de classe

Olá, meu nome é Tony e nestas lições você aprenderá sobre componentes. Nesta lição, daremos uma olhada nas funções do ES6 plus com JSX para renderizar componentes. Queria chamar a atenção para isso porque é muito importante. Em um cenário do mundo real, você não colocaria todos componente em uma pasta, porque como você pode imaginar, ele pode rapidamente ficar indisciplinado. O que procuramos para aplicações profissionais em uma situação do mundo real é algo parecido com isto. Como você pode ver, não é mais uma estrutura plana. Todos os nossos componentes estão dentro de sua própria pasta, chamados componentes, e cada componente tem seu próprio pasta. A estrutura da pasta é tal que a definição do componente está no arquivo JS ou JSX, e a solução de estilo, se for necessária, está dentro de um Arquivo CSS. Agora, num ambiente profissional, também haveria seja o arquivo .test aqui ou o arquivo .spec, que conteria a unidade testes. Não vamos nos preocupar com isso por enquanto, mas só para que você saiba, se você ver isso na vida real mundo, é muito provável que as coisas sejam assim. Agora, para nossos propósitos, o que vamos fazer é ir para criar um aplicativo que manterá uma lista de todas as coisas que temos para nós fazer naquele dia, e teremos a capacidade de retirá-los de nossa lista, um por um enquanto esperamos concluí-los. Este componente específico será apenas uma lista de todas as tarefas que temos. Agora, primeiro, vamos importar o React do React. É muito importante. React é um superglobal. Precisamos disso para o desenvolvimento de todos os nossos aplicativos. E aqui teremos nosso componente. O componente que estamos construindo é chamado de lista de tarefas, e isso vai demorar os três argumentos seguintes. As tarefas, vamos fechar isso para não reclamar. Portanto, as tarefas são o conjunto de registros que iremos percorrer e tarefas de saída uma por uma. HandleCheck é uma função que será acionada quando caixa de seleção que corresponde a cada uma de nossas tarefas. E HandleDelete é outra função que vai disparar quando realmente tentamos excluir uma tarefa de nossa lista. Agora, como renderizamos condicionalmente dentro do React? Vamos renderizar condicionalmente dentro do React não usar uma instrução if -else tradicional porque o JSX a nomenclatura não permite isso. Usaremos uma declaração terciária. Você pode ter visto uma declaração terciária antes, e isso é seu formato. Vamos fazer isso acima para não bagunçarmos nossa função, assim como um exemplo. Portanto, a condição que estamos testando é sempre a primeira argumento na estrutura. Se esta condição for verdadeira, então se a parte if do nossa afirmação é verdadeira, esta é a parte do código que obtém correr. E se for falso, esta é a parte do código que é executada. Nós vamos pegue a mesma coisa e estenda-a ao nosso ecossistema React para faça com que fique assim. Então nosso conjunto de registros será uma lista não ordenada, e se o comprimento for menor que um, vamos tornar isso mais humanamente legível e dizer que seu comprimento é zero. Triplo igual é super importante. Se você fizer um duplo igual a zero, isso significa isso também é igual a isso. Basicamente, ele apenas compara o valor, mas não compare o tipo. Mas não estamos atrás caractere zero. Estamos atrás do número zero. Portanto, sempre fazemos um triplo igual para comparação. Isso torna a digitação segura. Então o que vamos fazer aqui é se nada for exibido, vamos apresentar ao usuário um texto que basicamente diz a eles, ei, nada é exibido. Atualmente não há nada em sua agenda. Gostaria de adicionar um evento? E se algo for exibido, e é aqui que as coisas ficam interessantes, é aqui que nós vamos percorrer um conjunto de registros que estamos passando como o primeiro argumento para esta função. Vamos dar uma olhada em como é isso. Excluir ícone. Vamos importar meus ícones para ele não reclamar. Faremos isso no topo e excluiremos nosso exemplo. Então a parte else da nossa cláusula terciária agora tem uma função de mapa. Esta é a função que estamos passando para nossa função map, e o que ele fará é produzir HTML para nós, o que basicamente ser um LI ou um item de lista para a lista não ordenada que declaramos no início deste. Vamos recuar um passo. Aqui vamos nós. E como você pode ver, estamos basicamente exibindo isso como um item de cada vez. Seremos capazes de ver como é quando realmente colocá-lo em funcionamento na próxima parte da nossa lição. Como você pode ver, estamos gerando a tarefa. Há uma caixa de seleção que corresponde a isso. Aqui está o texto isso realmente diz qual é a tarefa. E aqui está o botão que nos permite excluí-lo. Mais uma vez, estamos apenas tentando conceituar a tarefa e como será. Veremos isso na próxima parte do nosso curso. Agora, por último, cada componente, não podemos esquecer de fazem isto. Estamos exportando o componente que acabamos de criar, e estamos exportando como padrão. Agora, o que significa que estamos exportando isso como padrão? Isso significa que quando vamos consumi-lo dentro do nosso componente de aplicativo que irá conter o definição para todo o nosso aplicativo, vamos importar assim sem os cacheados aparelho ortodôntico. Agora, porque estamos importando-o como padrão, podemos realmente chamá-lo o que quisermos, e ainda funcionará. Se exportássemos como uma exportação nomeada como esta, poderíamos importá-lo com chaves e apenas especificamente pelo nome. Você pode perguntar: por que isso não é feito? Parece mais seguro. Bem, porque no React, muitas vezes envolvemos o objeto que criado com algumas outras funções. Veremos isso mais tarde, mas poderíamos dizer com algo e dar-lhe funcionalidade extra, funcionalidade lógica. Mas é basicamente por isso que o nome exportações e importações não são feitas dentro do React, Next .js, ou qualquer coisa que dependa do React como base. Em nossa próxima lição, veremos qual componente adereços são, qual é a sua finalidade, e como eles são usados. Obrigado por assistir.