1
00:00:02,270 --> 00:00:03,610
Para produzir nossos próprios objetivos.

2
00:00:03,680 --> 00:00:08,060
Vou adicionar um novo componente na pasta de componentes e mantê-lo gerenciável.

3
00:00:08,150 --> 00:00:11,060
Na verdade, vou criar uma nova subpasta para cada componente.

4
00:00:11,420 --> 00:00:17,240
Isso não é obrigatório, mas eu pessoalmente gosto de fazer isso, porque então posso encontrar rapidamente todos os meus componentes.

5
00:00:17,630 --> 00:00:20,820
Obviamente, agora você precisa ajustar sua importação aqui em excesso.

6
00:00:21,110 --> 00:00:23,780
Minha ideia foi feita automaticamente, caso isso não acontecesse.

7
00:00:23,990 --> 00:00:28,090
Certifique-se de ajustar a importação da sua lista de objetivos para refletir isso em U.

8
00:00:28,190 --> 00:00:28,580
Pasta.

9
00:00:28,940 --> 00:00:29,360
Eu adicionei.

10
00:00:30,100 --> 00:00:35,720
E, em seguida, ele adicionará um novo componente de objetivo aqui na pasta de componentes também.

11
00:00:35,780 --> 00:00:38,990
Adicione um novo arquivo jazz de objetivo e um novo objetivo.

12
00:00:39,260 --> 00:00:40,310
Veja-nos como queda.

13
00:00:40,430 --> 00:00:45,830
Se você deseja aplicar algum estilo agora em um novo arquivo gold jazz, primeiro precisamos importar o reagir

14
00:00:45,830 --> 00:00:46,580
do reagir.

15
00:00:46,700 --> 00:00:47,870
Você sempre precisa fazer isso.

16
00:00:47,960 --> 00:00:54,770
Caso contrário, você não poderá usar J como X nesse arquivo porque lembre-se de que J como exis é traduzido para reagir ao elemento de

17
00:00:54,800 --> 00:00:55,280
criação.

18
00:00:56,060 --> 00:00:59,810
E então aqui eu tenho meu novo componente de objetivo aqui.

19
00:01:00,110 --> 00:01:02,730
Nós poderíamos aceitar Propp spot desde que não precisássemos deles.

20
00:01:02,750 --> 00:01:03,620
Nós não precisamos.

21
00:01:04,310 --> 00:01:06,650
E depois exporto novo objetivo.

22
00:01:07,920 --> 00:01:13,580
Agora, no Abcess, quero renderizar uma nova meta, portanto importaremos novo ouro.

23
00:01:13,920 --> 00:01:18,390
Novamente, o nome aqui é com você, mas deve começar com um caractere inicial maiúsculo.

24
00:01:19,070 --> 00:01:20,670
E eu importo isso dos componentes.

25
00:01:20,820 --> 00:01:21,450
Novo objetivo.

26
00:01:21,600 --> 00:01:22,200
Novo objetivo.

27
00:01:23,110 --> 00:01:27,640
E então aqui podemos renderizar como acima da nossa lista de objetivos, digamos assim.

28
00:01:28,390 --> 00:01:34,930
Não, isso não funcionaria porque o novo objetivo ainda não é um componente de reação válido porque é uma função no momento, mas não

29
00:01:34,930 --> 00:01:39,940
é uma função que funciona como um componente de reação porque não está fazendo uma coisa crucial.

30
00:01:40,510 --> 00:01:41,920
Não está voltando ao seu X.

31
00:01:42,130 --> 00:01:42,930
Então, vamos voltar.

32
00:01:42,940 --> 00:01:48,580
Eu sou X aqui e ali para manter as coisas simples, tudo em um fórum.

33
00:01:49,180 --> 00:01:51,640
E nesse fórum, adicionarei um campo de entrada.

34
00:01:53,550 --> 00:01:57,220
Digite o elemento de fechamento automático do texto em HGL regular.

35
00:01:57,260 --> 00:01:59,820
Isso não precisa ser fechado automaticamente em J é X.

36
00:01:59,850 --> 00:02:01,920
Tem que ser fechado automaticamente.

37
00:02:02,670 --> 00:02:05,340
E então um botão do tipo enviar.

38
00:02:06,350 --> 00:02:12,590
Onde eu digo em Gohl, uma forma muito simples, e se agora a protegemos, você deve vê-la aqui.

39
00:02:13,130 --> 00:02:19,700
Agora, vamos adicionar um pouco de estilo para deixar isso mais bonito para o pai e uma classe para formar um novo traço

40
00:02:19,700 --> 00:02:20,060
dourado.

41
00:02:20,750 --> 00:02:26,780
E importarei o novo ouro como arquivo para o novo arquivo JavaScript dourado.

42
00:02:27,470 --> 00:02:32,270
E então aqui na nova classe gold, que é adicionada no formulário all at.

43
00:02:33,860 --> 00:02:38,420
Uma margem de dois REM em todas as direções e linhas de texto.

44
00:02:43,600 --> 00:02:44,950
Para que isso pareça um pouco melhor.

45
00:02:46,620 --> 00:02:48,550
E agora também podemos estilizar a entrada do botão.

46
00:02:48,580 --> 00:02:50,110
Mas não quero gastar muito tempo nisso.

47
00:02:50,200 --> 00:02:52,540
Portanto, vamos deixar como está agora.

48
00:02:52,540 --> 00:02:57,160
Quando você clica no botão, a propósito, esta página é recarregada porque agora a funcionalidade padrão

49
00:02:57,160 --> 00:02:58,600
do navegador é ativada.

50
00:02:58,810 --> 00:03:03,460
Ou seja, quando um botão do tipo enviar é clicado em um fórum, uma solicitação é enviada ao servidor

51
00:03:03,490 --> 00:03:04,720
que é veiculado nesta página.

52
00:03:04,890 --> 00:03:09,940
Não é esse o comportamento que queremos aqui, porque aqui não quero enviar uma solicitação a nenhum servidor,

53
00:03:09,940 --> 00:03:12,850
porque não estamos fazendo nada no lado do servidor.

54
00:03:13,240 --> 00:03:18,520
Em vez disso, quero lidar com esse clique com JavaScript e essa é a primeira coisa que farei aqui.

55
00:03:18,550 --> 00:03:22,360
Vamos ver como podemos lidar com eventos, porque até agora não fizemos isso.

56
00:03:23,290 --> 00:03:27,730
Quero lidar com o evento de envio deste fórum aqui e reagir torna isso simples.

57
00:03:28,150 --> 00:03:34,300
Podemos adicionar ouvintes de eventos a qualquer elemento, não apenas ao fórum, mas a qualquer elemento adicionando

58
00:03:34,630 --> 00:03:35,590
minúsculas em.

59
00:03:35,770 --> 00:03:36,880
E então o nome do evento.

60
00:03:37,030 --> 00:03:39,520
Não, nem todos os eventos são suportados em todos os elementos.

61
00:03:39,730 --> 00:03:42,820
Mas aqui você tem o HD padrão dele, todos os elementos disponíveis.

62
00:03:43,000 --> 00:03:48,400
Por exemplo, em um elemento do fórum no qual você deve enviar um evento, envie um botão.

63
00:03:48,400 --> 00:03:49,840
Você também tem um clique.

64
00:03:50,080 --> 00:03:54,190
Mas como é um botão em um fórum, é melhor lidar com isso no próprio fórum.

65
00:03:55,240 --> 00:04:00,160
Agora, o que você passa como valor para o Mido como valor?

66
00:04:00,190 --> 00:04:06,010
Você precisa passar uma função que deve ser acionada quando esse evento acontecer.

67
00:04:06,100 --> 00:04:08,020
Então, um ponteiro para uma função.

68
00:04:08,740 --> 00:04:12,940
Você poderia fazer este ano com chaves e depois com uma função anônima na linha.

69
00:04:13,510 --> 00:04:14,920
Mas eu não gosto muito disso.

70
00:04:14,940 --> 00:04:16,870
Em vez disso, vou criar uma nova função aqui.

71
00:04:17,170 --> 00:04:20,470
E em JavaScript, você pode criar funções e funções.

72
00:04:20,770 --> 00:04:25,780
Então, em vez da nova função de objetivo, que ainda é, no final, posso criar uma nova função.

73
00:04:26,380 --> 00:04:27,670
Eu vou criar o meu.

74
00:04:28,680 --> 00:04:32,040
No manipulador de metas, a atribuição de nomes depende de você.

75
00:04:32,070 --> 00:04:38,130
Mas gostei do nome de Handler no final do meu nome de funk.

76
00:04:38,400 --> 00:04:41,640
Se é uma função que é acionada em algum evento.

77
00:04:43,270 --> 00:04:48,160
Portanto, neste caso, é uma função, usarei novamente uma função de seta, o que não é

78
00:04:48,160 --> 00:04:54,430
obrigatório, mas usarei apenas funções de seta aqui e o Enns up Mitt agora pode apontar para o AD Gohl Handler.

79
00:04:54,940 --> 00:04:57,550
Não execute aqui, então não adicione parênteses.

80
00:04:57,790 --> 00:05:04,330
Em vez disso, você apenas deseja apontar para a função para que o navegador e reagir em um esforço comum

81
00:05:04,330 --> 00:05:06,010
possam executar disfunção para você.

82
00:05:06,220 --> 00:05:07,810
Quando ocorre o evento de envio?

83
00:05:08,950 --> 00:05:16,390
Agora, essa função obterá um objeto de evento, um parâmetro de evento transmitido automaticamente ao reagir e, por exemplo, podemos chamar

84
00:05:16,390 --> 00:05:23,410
prevenir padrão, o que evita que o navegador envie uma solicitação para algum back-end, o que não deve ser feito

85
00:05:23,440 --> 00:05:28,060
aqui porque não está lidando com isso no lado do servidor aqui.

86
00:05:28,930 --> 00:05:31,990
Nosso servidor serve apenas esse arquivo HMO de índice único.

87
00:05:31,990 --> 00:05:35,140
Não possui lógica para lidar com envios.

88
00:05:35,740 --> 00:05:39,650
Em vez disso, quero lidar com isso aqui em JavaScript no front-end.

89
00:05:39,910 --> 00:05:46,780
No meu aplicativo REACT, por enquanto, ignorarei o que o usuário inseriu aqui e, em vez disso,

90
00:05:46,900 --> 00:05:49,210
simplesmente criarei um objetivo falso.

91
00:05:49,560 --> 00:05:57,010
E quero passar esse objetivo fictício para o aplicativo G. S. e adicione-o aos meus Scholes principais aqui para que seja

92
00:05:57,010 --> 00:05:57,670
renderizado aqui.

93
00:05:58,270 --> 00:05:59,510
Agora, passo a passo.

94
00:06:00,410 --> 00:06:02,690
Podemos criar um novo objetivo dharmico, é claro.

95
00:06:03,780 --> 00:06:05,130
Nesse artigo, Hanover.

96
00:06:06,780 --> 00:06:13,620
Ao adicionar uma nova constante de meta aqui, que é um objeto JavaScript, a idéia aqui pode ser um número

97
00:06:13,620 --> 00:06:14,020
aleatório.

98
00:06:14,060 --> 00:06:15,270
Com mothe aleatório.

99
00:06:15,600 --> 00:06:20,430
Claro que isso não é realmente um eu único. D. , mas é bom o suficiente e vou convertê-lo em uma string.

100
00:06:21,360 --> 00:06:23,370
É bom o suficiente para a nossa aplicação de demonstração aqui.

101
00:06:23,370 --> 00:06:23,730
Quero dizer.

102
00:06:24,180 --> 00:06:27,800
E o texto aqui mais tarde será o usuário digitado aqui.

103
00:06:28,110 --> 00:06:30,090
Por enquanto, apenas alguns textos fictícios.

104
00:06:30,300 --> 00:06:31,290
Meu novo objetivo.

105
00:06:32,540 --> 00:06:34,040
Então agora temos o novo objetivo aqui.

106
00:06:34,400 --> 00:06:39,980
E, é claro, podemos usar o console bloqueado para ver se tudo funciona até esse ponto.

107
00:06:40,430 --> 00:06:41,480
Então, se salvarmos isso.

108
00:06:42,470 --> 00:06:43,610
Vemos nosso formulário aqui.

109
00:06:44,030 --> 00:06:46,610
E se você clicar em adicionar meta, a página não será recarregada.

110
00:06:46,940 --> 00:06:48,770
Mas, em vez disso, vemos o objetivo do carimbo aqui.

111
00:06:49,120 --> 00:06:50,840
Poderia criar, é claro, vários objetivos.

112
00:06:51,080 --> 00:06:53,660
Mas, no momento, eles não são adicionados a esta lista.

113
00:06:54,560 --> 00:07:01,100
Para adicionar à lista, agora precisamos extrair essa meta do novo componente da meta para o componente do aplicativo.

114
00:07:01,550 --> 00:07:05,120
Agora, antes de aprendermos, podemos passar a nossa rodada de adereços.

115
00:07:05,270 --> 00:07:08,180
Mas isso foi do aplicativo para a lista de objetivos.

116
00:07:08,510 --> 00:07:12,530
Então, para um componente de nível inferior, um componente que está incluído em um aplicativo.

117
00:07:13,010 --> 00:07:14,510
Agora é a outra direção.

118
00:07:14,810 --> 00:07:18,500
Queremos passar dados do novo objetivo para o componente pai.

119
00:07:18,590 --> 00:07:21,110
Portanto, o componente que inclui o novo componente do objetivo.

120
00:07:21,560 --> 00:07:22,400
Como é que isso funciona?