1
00:00:02,190 --> 00:00:08,190
Criei o componente separado, A, é claro, para praticar a criação de seus próprios componentes, mas B,

2
00:00:08,220 --> 00:00:14,160
também porque realmente é a filosofia central do reagir dividir seu aplicativo em pedaços menores.

3
00:00:14,310 --> 00:00:17,120
Claro, depende de você o tamanho que você deseja dividir.

4
00:00:17,670 --> 00:00:22,380
Cada item da lista, por exemplo, também poderia ser seu componente antigo e não haveria nada de errado nisso.

5
00:00:23,040 --> 00:00:26,520
A idéia é simplesmente ter arquivos de código pequenos e gerenciáveis.

6
00:00:26,910 --> 00:00:31,140
E mais tarde, uma vez que adicionamos mais lógica ao aplicativo, também podemos interagir com ele.

7
00:00:31,170 --> 00:00:35,730
E alteramos várias metas, por exemplo, com um clique no botão e assim por diante.

8
00:00:36,390 --> 00:00:41,370
Naturalmente, queremos ser capazes de gerenciar grande parte da lógica no componente da lista de objetivos e não de

9
00:00:41,370 --> 00:00:42,150
componentes óbvios.

10
00:00:42,390 --> 00:00:49,470
Então, realmente dividi-lo em componentes tem a ideia de separar as preocupações de manter seus arquivos pequenos, focados e

11
00:00:49,500 --> 00:00:55,830
gerenciáveis, o que, se você estiver trabalhando em projetos maiores, é uma grande vitória, pois facilita muito

12
00:00:55,830 --> 00:00:58,930
o gerenciamento e o trabalho em projeto maior.

13
00:01:00,000 --> 00:01:03,420
Agora, até agora, tudo em nosso aplicativo é codificado.

14
00:01:04,290 --> 00:01:10,880
Agora, mais realista seria que digamos que nossa lista de objetivos seja gerenciada aqui no aplicativo.

15
00:01:10,970 --> 00:01:12,660
Sim, como dados.

16
00:01:13,170 --> 00:01:20,160
E queremos renderizar os itens H Timal da lista Digo ou J como X com base nesses dados.

17
00:01:20,640 --> 00:01:27,120
Agora vou gerenciá-lo aqui no Abcess simplesmente porque mais tarde adicionarei outro componente aqui que nos ajuda a

18
00:01:27,120 --> 00:01:28,230
criar novos objetivos.

19
00:01:28,530 --> 00:01:31,590
Mas, por enquanto, vamos apenas adicionar uma constante normal aqui.

20
00:01:31,830 --> 00:01:35,760
O componente funcional do Tudor porque é uma função JavaScript normal.

21
00:01:35,940 --> 00:01:40,140
É claro que você pode fazer mais do que apenas devolver o conteúdo de X e disco de J aqui.

22
00:01:40,520 --> 00:01:43,140
Teremos meus objetivos de curso.

23
00:01:43,200 --> 00:01:47,010
Você pode nomeá-lo como quiser e este será um array e o array.

24
00:01:47,340 --> 00:01:52,350
Cada objetivo pode ser um objeto JavaScript criado aqui com a notação literal do objeto.

25
00:01:52,560 --> 00:01:58,500
Claro que você também pode criar sua própria função de classe ou construtor e instanciar isso para criar um objeto

26
00:01:58,500 --> 00:01:59,220
desse tipo.

27
00:02:00,030 --> 00:02:01,530
Agora, digamos que todo objetivo tenha uma ideia.

28
00:02:02,650 --> 00:02:06,880
C. G. um para refrão, ligue para um e depois tenha algum texto, digamos.

29
00:02:07,210 --> 00:02:10,030
E o texto aqui é simplesmente o texto.

30
00:02:10,060 --> 00:02:12,880
Eu codifiquei aqui, termino o curso.

31
00:02:12,920 --> 00:02:13,960
Então eu copio isso.

32
00:02:14,440 --> 00:02:20,560
E aqui, dividirei várias linhas para facilitar a leitura, porque não terei apenas um objetivo,

33
00:02:20,560 --> 00:02:21,790
mas também livre.

34
00:02:22,000 --> 00:02:25,480
Então, as idéias são C. G. para NCG grátis, digamos.

35
00:02:25,900 --> 00:02:29,560
E agora vou copiar todo esse texto aqui.

36
00:02:31,540 --> 00:02:34,010
Nos meus objetos aqui no Abcess.

37
00:02:34,780 --> 00:02:36,550
Além disso, esse último texto.

38
00:02:37,820 --> 00:02:44,030
Assim, e agora também posso me livrar dessa coisa de e comercial aqui, não precisamos dela aqui.

39
00:02:44,120 --> 00:02:47,480
Todos nós podemos colocar o texto assim e reagir o renderizará corretamente.

40
00:02:48,410 --> 00:02:50,630
Então agora temos que agarrar a matriz de Scholes por minha ideia.

41
00:02:50,660 --> 00:02:54,050
Agora, isso está no componente da lista de objetivos desses objetivos?

42
00:02:54,080 --> 00:02:56,660
Esses dados aqui devem, no final, ser impressos.

43
00:02:56,870 --> 00:03:02,080
Portanto, ele deve ser gerado dinamicamente nesse componente, no componente da lista de objetivos, em vez de ser difícil.

44
00:03:02,450 --> 00:03:03,800
Portanto, podemos remover esse código aqui.

45
00:03:04,220 --> 00:03:06,050
Não, isso nos deixa com dois problemas.

46
00:03:06,350 --> 00:03:10,810
Número um, como podemos gerar uma lista de dados dinamicamente em J como X?

47
00:03:11,270 --> 00:03:13,130
Mas mais importante do que isso no momento.

48
00:03:13,400 --> 00:03:18,950
Como podemos obter a lista de dados definida no componente de aplicativo no componente Gollust?

49
00:03:19,460 --> 00:03:23,300
Bem, vamos nos concentrar nisso primeiro, porque sem isso, não podemos nos concentrar no outro problema.

50
00:03:24,170 --> 00:03:31,820
Podemos passar dados de componente para componente com um conceito chamado props abreviação de propriedades.

51
00:03:32,450 --> 00:03:34,100
Nós podemos definir os nossos.

52
00:03:34,130 --> 00:03:39,800
Você poderia dizer atributos que são esses adereços em nossos próprios componentes.

53
00:03:40,250 --> 00:03:46,090
Então, por exemplo, aqui na lista de objetivos, você poderia dizer que temos itens, atributos ou objetivos, atributos

54
00:03:46,160 --> 00:03:47,120
totalmente seus.

55
00:03:47,630 --> 00:03:48,710
Eu vou com objetivos aqui.

56
00:03:49,680 --> 00:03:53,340
E esse atributo ou objeto de ouro é o termo comum.

57
00:03:53,370 --> 00:03:57,870
Então, o prop de Gold passa esses dados para esse componente?

58
00:03:58,380 --> 00:04:02,280
Agora, para isso, eu não uso uma string aqui, que quero passar, mas, em

59
00:04:02,280 --> 00:04:08,250
vez disso, quero passar minha matriz D da estrutura de dados JavaScript aqui e para o papai aqui, na verdade, usamos um

60
00:04:08,250 --> 00:04:12,210
número especial Syntex e J como X. Usamos chaves simples de abertura e fechamento.

61
00:04:12,780 --> 00:04:15,780
Parece que estamos criando um objeto de emprego aqui, mas não estamos.

62
00:04:16,080 --> 00:04:19,420
Se você fizer isso dentro de J, é X, o que estou fazendo aqui.

63
00:04:19,500 --> 00:04:29,190
Como J é X, isso significa que você deseja mesclar seu código J é X com alguma expressão JavaScript no final.

64
00:04:29,460 --> 00:04:31,370
E aqui podemos apontar as principais habilidades.

65
00:04:31,410 --> 00:04:32,970
Essa é uma expressão JavaScript válida.

66
00:04:33,060 --> 00:04:34,590
Estamos apenas apontando para uma constante.

67
00:04:34,990 --> 00:04:36,450
E o que a Disneylândia quer dizer está morto.

68
00:04:36,870 --> 00:04:38,640
A reação passará.

69
00:04:38,670 --> 00:04:39,870
Objetivos do curso aqui.

70
00:04:40,170 --> 00:04:44,700
O valor armazenado nesta constante, neste caso, esta matriz neste local de J é X.

71
00:04:44,880 --> 00:04:47,390
Nesse caso, nesse suporte, portanto.

72
00:04:47,940 --> 00:04:53,140
Portanto, os objetivos serão um suporte que mantém uma referência a essa matriz agora.

73
00:04:54,120 --> 00:04:58,370
Agora, dentro da lista de objetivos, agora podemos receber o suporte desse ouro.

74
00:04:58,770 --> 00:05:02,340
Então, vamos à lista de objetivos e ver como isso funciona na lista de objetivos.

75
00:05:02,370 --> 00:05:03,360
Nós temos uma função, certo?

76
00:05:03,600 --> 00:05:04,830
Um componente funcional.

77
00:05:05,610 --> 00:05:08,670
Agora, esta função no momento não obtém nenhum parâmetro.

78
00:05:09,090 --> 00:05:09,930
Nós podemos mudar isso.

79
00:05:10,170 --> 00:05:12,240
Podemos receber um parâmetro props aqui.

80
00:05:12,900 --> 00:05:20,820
Toda função usada como um componente de reação, o que significa que retorna J é X, também recebe adereços.

81
00:05:22,620 --> 00:05:28,160
Esse objeto passa para o componente funcional de reação automaticamente por reação?

82
00:05:28,580 --> 00:05:34,070
E é o objeto que agrupa todos os acessórios que você passou para o componente.

83
00:05:34,190 --> 00:05:37,070
Portanto, no nosso caso, os objetivos são sustentar o único que temos.

84
00:05:37,400 --> 00:05:44,420
Portanto, aqui teremos um objeto que possui uma propriedade com o nome de objetivos que mantém o valor passado para

85
00:05:44,420 --> 00:05:45,170
esse suporte.

86
00:05:46,270 --> 00:05:53,110
Portanto, em outras palavras, aqui, eu poderia consolar o bloqueio, metas de início de prop, metas de ponto, porque nomeei por metas

87
00:05:53,110 --> 00:05:54,130
de Propp aqui.

88
00:05:54,430 --> 00:05:59,680
Se você escolheu um nome diferente aqui, o que é perfeitamente adequado, você deve usar o nome diferente aqui.

89
00:06:00,580 --> 00:06:03,640
Agora, se salvarmos isso, não veremos mais nossos objetivos no momento.

90
00:06:04,090 --> 00:06:08,140
Mas se abrirmos as ferramentas do desenvolvedor, veremos esses Arae sendo bloqueados aqui.

91
00:06:08,230 --> 00:06:13,870
E o registro do pai vem da linha seis da lista de objetivos, como você pode ver, é

92
00:06:13,870 --> 00:06:20,860
claro, esse registro aqui e ali, vemos nossos dados de objetivos, o que significa que sim, ele chega com sucesso dentro do componente Gollust.

93
00:06:21,670 --> 00:06:28,420
O conceito de adereços é um conceito super importante para reagir, porque é isso que permite que você transmita dados

94
00:06:28,420 --> 00:06:34,510
do Componente A, o componente do aplicativo para o componente B, o componente da lista de objetivos.

95
00:06:34,540 --> 00:06:35,230
Nesse caso.

96
00:06:35,830 --> 00:06:42,790
Agora, vamos dar uma olhada em como podemos gerar uma lista de dados dinamicamente em J como X, porque aqui temos uma lista

97
00:06:42,790 --> 00:06:48,940
de metas, uma matriz de metas e queremos gerar isso como itens de lista aqui em nossa lista não

98
00:06:48,940 --> 00:06:49,360
ordenada.