React.js: componentes

Name: React.js: componentes
Author: Tony Davydets

Este módulo abordará as funções ES6+ com JSX para renderizar componentes, adereços de componentes e estado de componentes, que são conceitos fundamentais no…

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 · 18m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Este módulo abordará as funções ES6+ com JSX para renderizar componentes, adereços de componentes e estado de componentes, que são conceitos fundamentais no React, uma biblioteca JavaScript popular para a criação de aplicativos da Web modernos.

Os componentes React são os blocos de construção de um aplicativo React. Esses componentes podem ser escritos como funções ES6+ com JSX, o que permite que os desenvolvedores escrevam códigos mais concisos e legíveis. JSX é uma extensão de sintaxe para JavaScript que permite que elementos semelhantes a HTML sejam escritos em código. Com o JSX, os desenvolvedores podem criar componentes personalizados que podem ser renderizados no DOM. O estado é um recurso que permite que os componentes React armazenem dados que podem mudar com o tempo. Isto permite actualizações dinâmicas e interactivas dos dados de um componente. O estado pode ser inicializado num construtor ou usando um hook de estado, um recurso introduzido no React 16.8.

Entender as funções ES6+ com JSX, props de componentes e estado de componentes é essencial para construir aplicações web modernas usando React. Esses conceitos permitem componentes reutilizáveis e interactivos que podem ser personalizados com dados diferentes.

O Que Você Vai Aprender

Use funções ES6+ com JSX para renderizar componentes React
Escreva sintaxe JSX para criar componentes personalizados renderizados para o DOM
Passe dados em componentes usando adereços de componente
Gerencie o estado do componente para armazenar dados que mudam ao longo do tempo
Inicialize o estado em um construtor ou com o gancho de estado introduzido no React 16.8

Principais Conclusões

Componentes React são os blocos de construção de um aplicativo React e podem ser escritos como funções ES6+ com JSX.
JSX é uma extensão de sintaxe para JavaScript que permite que elementos semelhantes a HTML sejam escritos no código.
O estado permite que componentes React armazenem dados que podem mudar ao longo do tempo, permitindo atualizações dinâmicas e interativas.
O estado pode ser inicializado em um construtor ou usando um gancho de estado, um recurso introduzido no React 16.8.
Compreender funções ES6+ com JSX, adereços de componente e estado de componente permite componentes reutilizáveis e interativos que podem ser personalizados com dados diferentes.

Perguntas Frequentes

O que este módulo React.js cobre?

Este módulo cobre funções ES6+ com JSX para renderizar componentes, adereços de componente e estado de componente, que são conceitos principais em React, uma biblioteca JavaScript para criar aplicações web modernas.

O que é JSX em React?

JSX é uma extensão de sintaxe para JavaScript que permite que elementos semelhantes a HTML sejam escritos no código. Com JSX, desenvolvedores podem criar componentes personalizados que podem ser renderizados para o DOM.

Como o estado pode ser definido em um componente React?

O estado pode ser inicializado em um construtor ou usando um gancho de estado, um recurso introduzido no React 16.8. O estado permite que componentes armazenem dados que podem mudar ao longo do tempo.

Por que adereços de componente e estado são importantes?

Compreender funções ES6+ com JSX, adereços de componente e estado de componente é essencial para construir aplicações web modernas usando React, permitindo componentes reutilizáveis e interativos que podem ser personalizados com dados diferentes.

Que lições estão incluídas neste módulo?

O módulo inclui três lições: Funções ES6+ Com JSX para Renderizar Componentes, Adereços de Componente e Estado de Componente.