React.js: componentes de classe

Name: React.js: componentes de classe
Author: Tony Davydets

Os Componentes de classe do React são um conceito central no React.js que permite que os desenvolvedores criem componentes de interface do usuário…

Preview the first lesson free — get full access to all 1 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

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.

Fornecedor : Tony Davydets 1 lição · 10m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Os Componentes de classe do React são um conceito central no React.js que permite que os desenvolvedores criem componentes de interface do usuário reutilizáveis e com estado, usando uma sintaxe baseada em classe. Estas lições cobrirão a estrutura e as funções do ciclo de vida dos componentes de classe, bem como a forma de gerir e usar props e state dentro desses componentes.

Vamos aprofundar a estrutura e as funções do ciclo de vida dos componentes de classe, incluindo o construtor, o método de renderização, os métodos componentDidMount, componentDidUpdate e componentWillUnmount. Também exploraremos como gerir e usar props e state dentro desses componentes, incluindo como passar dados dos componentes pai por meio de props e como atualizar o estado do componente com base nas interações do usuário ou em outros eventos.

Exploraremos como definir e usar props em nossos componentes, incluindo como definir valores padrão e lidar com props ausentes ou inválidos. Também discutiremos as práticas recomendadas para nomeação e composição de props e como lidar com estruturas de dados complexas.

Este curso dará uma sólida compreensão de como criar e gerir componentes de classe React. Você será capaz de usar efetivamente props e state para construir interfaces de usuário dinâmicas e interativas.

O Que Você Vai Aprender

Entender a estrutura e funções de ciclo de vida dos Componentes de Classe React, incluindo os métodos constructor, render, componentDidMount, componentDidUpdate e componentWillUnmount
Gerenciar e usar props dentro de Componentes de Classe, incluindo passar dados de componentes pai
Definir valores padrão de props e lidar com props ausentes ou inválidos
Gerenciar e atualizar estado de componentes com base em interações do usuário ou outros eventos
Aplicar práticas recomendadas para nomenclatura de props, composição e manipulação de estruturas de dados complexas
Criar interfaces de usuário dinâmicas e interativas usando props e state

Principais Conclusões

Componentes de Classe React permitem que os desenvolvedores criem componentes UI reutilizáveis com estado usando uma sintaxe baseada em classe.
As funções de ciclo de vida dos Componentes de Classe incluem constructor, método render, componentDidMount, componentDidUpdate e componentWillUnmount.
Props são usados para passar dados de componentes pai e podem incluir valores padrão e tratamento para props ausentes ou inválidos.
O state pode ser atualizado com base em interações do usuário ou outros eventos para criar interfaces de usuário dinâmicas e interativas.
As práticas recomendadas para props cobrem nomenclatura, composição e manipulação de estruturas de dados complexas.

Perguntas Frequentes

O que este curso cobre?

Cobre a estrutura e funções de ciclo de vida dos Componentes de Classe React, incluindo constructor, método render, componentDidMount, componentDidUpdate e componentWillUnmount, bem como como gerenciar e usar props e state dentro desses componentes.

O que serei capaz de fazer após concluir este curso?

Você terá um sólido entendimento de como criar e gerenciar Componentes de Classe React e será capaz de usar efetivamente props e state para construir interfaces de usuário dinâmicas e interativas.

Quais aulas estão incluídas?

O curso inclui três aulas: Componentes de Classe e Funções de Ciclo de Vida; Gerenciamento e Uso de Props e Gerenciamento e Uso de State.

Em quais habilidades este curso se concentra?

Se concentra em Design de Componentes, Bibliotecas de Componentes, Componentes HTML, React JSX, React.js (Biblioteca JavaScript) e Componentes UI.

Como as props são tratadas neste curso?

O curso explica como definir e usar props, definir valores padrão, lidar com props ausentes ou inválidos e seguir as práticas recomendadas para nomenclatura de props, composição e manipulação de estruturas de dados complexas.