Criei o componente separado, A, é claro, para praticar a criação de seus próprios componentes, mas B,
também porque realmente é a filosofia central do reagir dividir seu aplicativo em pedaços menores.
Claro, depende de você o tamanho que você deseja dividir.
Cada item da lista, por exemplo, também poderia ser seu componente antigo e não haveria nada de errado nisso.
A idéia é simplesmente ter arquivos de código pequenos e gerenciáveis.
E mais tarde, uma vez que adicionamos mais lógica ao aplicativo, também podemos interagir com ele.
E alteramos várias metas, por exemplo, com um clique no botão e assim por diante.
Naturalmente, queremos ser capazes de gerenciar grande parte da lógica no componente da lista de objetivos e não de
componentes óbvios.
Então, realmente dividi-lo em componentes tem a ideia de separar as preocupações de manter seus arquivos pequenos, focados e
gerenciáveis, o que, se você estiver trabalhando em projetos maiores, é uma grande vitória, pois facilita muito
o gerenciamento e o trabalho em projeto maior.
Agora, até agora, tudo em nosso aplicativo é codificado.
Agora, mais realista seria que digamos que nossa lista de objetivos seja gerenciada aqui no aplicativo.
Sim, como dados.
E queremos renderizar os itens H Timal da lista Digo ou J como X com base nesses dados.
Agora vou gerenciá-lo aqui no Abcess simplesmente porque mais tarde adicionarei outro componente aqui que nos ajuda a
criar novos objetivos.
Mas, por enquanto, vamos apenas adicionar uma constante normal aqui.
O componente funcional do Tudor porque é uma função JavaScript normal.
É claro que você pode fazer mais do que apenas devolver o conteúdo de X e disco de J aqui.
Teremos meus objetivos de curso.
Você pode nomeá-lo como quiser e este será um array e o array.
Cada objetivo pode ser um objeto JavaScript criado aqui com a notação literal do objeto.
Claro que você também pode criar sua própria função de classe ou construtor e instanciar isso para criar um objeto
desse tipo.
Agora, digamos que todo objetivo tenha uma ideia.
C. G. um para refrão, ligue para um e depois tenha algum texto, digamos.
E o texto aqui é simplesmente o texto.
Eu codifiquei aqui, termino o curso.
Então eu copio isso.
E aqui, dividirei várias linhas para facilitar a leitura, porque não terei apenas um objetivo,
mas também livre.
Então, as idéias são C. G. para NCG grátis, digamos.
E agora vou copiar todo esse texto aqui.
Nos meus objetos aqui no Abcess.
Além disso, esse último texto.
Assim, e agora também posso me livrar dessa coisa de e comercial aqui, não precisamos dela aqui.
Todos nós podemos colocar o texto assim e reagir o renderizará corretamente.
Então agora temos que agarrar a matriz de Scholes por minha ideia.
Agora, isso está no componente da lista de objetivos desses objetivos?
Esses dados aqui devem, no final, ser impressos.
Portanto, ele deve ser gerado dinamicamente nesse componente, no componente da lista de objetivos, em vez de ser difícil.
Portanto, podemos remover esse código aqui.
Não, isso nos deixa com dois problemas.
Número um, como podemos gerar uma lista de dados dinamicamente em J como X?
Mas mais importante do que isso no momento.
Como podemos obter a lista de dados definida no componente de aplicativo no componente Gollust?
Bem, vamos nos concentrar nisso primeiro, porque sem isso, não podemos nos concentrar no outro problema.
Podemos passar dados de componente para componente com um conceito chamado props abreviação de propriedades.
Nós podemos definir os nossos.
Você poderia dizer atributos que são esses adereços em nossos próprios componentes.
Então, por exemplo, aqui na lista de objetivos, você poderia dizer que temos itens, atributos ou objetivos, atributos
totalmente seus.
Eu vou com objetivos aqui.
E esse atributo ou objeto de ouro é o termo comum.
Então, o prop de Gold passa esses dados para esse componente?
Agora, para isso, eu não uso uma string aqui, que quero passar, mas, em
vez disso, quero passar minha matriz D da estrutura de dados JavaScript aqui e para o papai aqui, na verdade, usamos um
número especial Syntex e J como X. Usamos chaves simples de abertura e fechamento.
Parece que estamos criando um objeto de emprego aqui, mas não estamos.
Se você fizer isso dentro de J, é X, o que estou fazendo aqui.
Como J é X, isso significa que você deseja mesclar seu código J é X com alguma expressão JavaScript no final.
E aqui podemos apontar as principais habilidades.
Essa é uma expressão JavaScript válida.
Estamos apenas apontando para uma constante.
E o que a Disneylândia quer dizer está morto.
A reação passará.
Objetivos do curso aqui.
O valor armazenado nesta constante, neste caso, esta matriz neste local de J é X.
Nesse caso, nesse suporte, portanto.
Portanto, os objetivos serão um suporte que mantém uma referência a essa matriz agora.
Agora, dentro da lista de objetivos, agora podemos receber o suporte desse ouro.
Então, vamos à lista de objetivos e ver como isso funciona na lista de objetivos.
Nós temos uma função, certo?
Um componente funcional.
Agora, esta função no momento não obtém nenhum parâmetro.
Nós podemos mudar isso.
Podemos receber um parâmetro props aqui.
Toda função usada como um componente de reação, o que significa que retorna J é X, também recebe adereços.
Esse objeto passa para o componente funcional de reação automaticamente por reação?
E é o objeto que agrupa todos os acessórios que você passou para o componente.
Portanto, no nosso caso, os objetivos são sustentar o único que temos.
Portanto, aqui teremos um objeto que possui uma propriedade com o nome de objetivos que mantém o valor passado para
esse suporte.
Portanto, em outras palavras, aqui, eu poderia consolar o bloqueio, metas de início de prop, metas de ponto, porque nomeei por metas
de Propp aqui.
Se você escolheu um nome diferente aqui, o que é perfeitamente adequado, você deve usar o nome diferente aqui.
Agora, se salvarmos isso, não veremos mais nossos objetivos no momento.
Mas se abrirmos as ferramentas do desenvolvedor, veremos esses Arae sendo bloqueados aqui.
E o registro do pai vem da linha seis da lista de objetivos, como você pode ver, é
claro, esse registro aqui e ali, vemos nossos dados de objetivos, o que significa que sim, ele chega com sucesso dentro do componente Gollust.
O conceito de adereços é um conceito super importante para reagir, porque é isso que permite que você transmita dados
do Componente A, o componente do aplicativo para o componente B, o componente da lista de objetivos.
Nesse caso.
Agora, vamos dar uma olhada em como podemos gerar uma lista de dados dinamicamente em J como X, porque aqui temos uma lista
de metas, uma matriz de metas e queremos gerar isso como itens de lista aqui em nossa lista não
ordenada.