1
00:00:02,340 --> 00:00:06,210
Então, houve muita conversa, muita coisa sendo feita, agora é realmente hora

2
00:00:06,210 --> 00:00:10,680
de fazer este botão funcionar e vamos adicionar um objetivo aqui, certo e para

3
00:00:10,680 --> 00:00:11,780
isso precisamos

4
00:00:11,850 --> 00:00:17,040
descobrir o que o usuário entrou e depois disso, é claro ouça um toque no botão

5
00:00:17,040 --> 00:00:23,850
e, em seguida, adicione o objetivo inserido a uma série de metas que temos de gerenciar em algum lugar, o que

6
00:00:23,850 --> 00:00:26,850
podemos produzir lá embaixo nessa vista inferior, certo, é

7
00:00:26,850 --> 00:00:29,630
o que precisamos fazer. Agora, neste curso,

8
00:00:29,670 --> 00:00:35,600
usarei componentes funcionais apenas com o recurso de ganchos React, que é relativamente novo, portanto, caso

9
00:00:35,640 --> 00:00:41,550
você ainda não saiba reagir ganchos, definitivamente aprenda sobre eles primeiro, por exemplo, no meu

10
00:00:41,550 --> 00:00:42,120
Guia

11
00:00:42,120 --> 00:00:47,250
Completo de React, mas anexado, você também encontra alguns outros recursos que o

12
00:00:47,250 --> 00:00:54,000
iniciam com os ganchos React, pois precisaremos de ganchos React para, por exemplo, obter a entrada do usuário.

13
00:00:54,000 --> 00:01:00,280
Usamos o gancho useState para o que importamos do React, não do React Native, mas do

14
00:01:00,300 --> 00:01:02,070
React, é um recurso

15
00:01:02,220 --> 00:01:10,620
principal do React e então aqui neste componente funcional, neste componente de aplicativo, podemos obter o objetivo inserido e também obter

16
00:01:10,620 --> 00:01:19,110
o conjunto Inseriu a função de meta para atualizar o estado com a ajuda de useState e, por padrão, temos um estado

17
00:01:19,110 --> 00:01:24,840
inicial que é uma string vazia porque o usuário não inseriu nada no início.

18
00:01:24,870 --> 00:01:27,330
Agora podemos vincular isso à entrada

19
00:01:27,330 --> 00:01:33,870
de texto, o que significa que quando o usuário digita um caractere, queremos atualizar nosso estado e salvar

20
00:01:33,870 --> 00:01:39,240
o texto digitado no estado aqui que podemos acessar através da meta inserida e passaremos

21
00:01:39,240 --> 00:01:46,680
a meta inserida de volta para a entrada de texto. Essa é uma ligação bidirecional, um chamado componente controlado que você também

22
00:01:46,680 --> 00:01:50,380
conhece do React for web com elementos de entrada HTML normais.

23
00:01:50,430 --> 00:01:57,340
Então, aqui podemos ouvir onChangeText, um prop fornecido pela entrada de texto que leva uma função que será

24
00:01:57,430 --> 00:01:59,930
executada para cada pressionamento de tecla.

25
00:01:59,970 --> 00:02:04,660
Agora podemos fornecer uma função inline aqui, mas também podemos configurar uma função separada para ter

26
00:02:04,660 --> 00:02:09,850
um pouco de código mais limpo e você pode ter uma função em uma função e precisamos

27
00:02:09,850 --> 00:02:17,770
tê-la aqui, para que possamos usar nosso estado ou defina a função de meta inserida aqui, simplesmente adicionando uma nova função aqui, o manipulador de entrada de

28
00:02:18,990 --> 00:02:26,400
meta pode ser um nome, mas o nome cabe a você. Nessa função, obteremos o texto inserido automaticamente, que será

29
00:02:26,580 --> 00:02:34,170
transmitido pelo React ou pelo React Native aqui e poderemos chamar o set de meta informado e passar o texto inserido

30
00:02:34,200 --> 00:02:40,770
como um valor, porque o texto inserido aqui já será um string porque conectamos o manipulador de

31
00:02:41,100 --> 00:02:48,630
entrada de meta ao onChangeText simplesmente apontando para ele aqui. Agora, isso é importante, não inclua parênteses lá embaixo, porque

32
00:02:48,900 --> 00:02:54,300
isso executaria essa função quando esse código for analisado, portanto, quando a interface do

33
00:02:54,330 --> 00:02:59,880
usuário for renderizada pela primeira vez. Você não quer executar isto imediatamente, você

34
00:02:59,880 --> 00:03:05,940
quer executá-lo em cada tecla e, portanto, você apenas pega o nome da função, você passa o nome

35
00:03:05,940 --> 00:03:12,210
da função para onChangeText e isso efetivamente diz ao React Native, hey que é o função eu deveria executar

36
00:03:12,210 --> 00:03:19,260
para cada batida de tecla, assim não some parênteses aqui de forma que isto pode correr em toda batida de tecla.

37
00:03:20,010 --> 00:03:25,170
Agora, em vez desta sintaxe de função, você também pode usar uma sintaxe diferente que é a

38
00:03:25,170 --> 00:03:31,080
que eu usarei em todo o curso, onde você cria uma constante com esse nome aqui e então o valor

39
00:03:31,080 --> 00:03:38,190
dessa constante após o sinal de igual é simplesmente um função usando essa sintaxe de função de seta, então esta aqui é a sua

40
00:03:38,180 --> 00:03:44,490
lista de argumentos e este é o corpo da função. Isso é normal sintaxe Javascript, é suportado pelo código

41
00:03:44,490 --> 00:03:49,470
JavaScript React Native é capaz de executar e, portanto, esta é a sintaxe que vou

42
00:03:49,470 --> 00:03:56,820
usar, você conectá-lo ao onChangeText exatamente da mesma maneira que antes. Ok, agora temos essa função conectada, atualizamos nosso estado com

43
00:03:57,090 --> 00:04:01,050
o que o usuário digitou em cada pressionamento de tecla, agora também

44
00:04:01,050 --> 00:04:07,800
temos que passar o texto de volta para a entrada de texto, para que ele seja exibido corretamente simplesmente vinculando

45
00:04:07,800 --> 00:04:14,190
a propriedade de valor a entrou meta, para o nosso estado que vai mudar a cada batida de tecla.

46
00:04:14,870 --> 00:04:20,400
E com isso, estamos obtendo acesso à entrada do usuário porque ela

47
00:04:20,400 --> 00:04:27,010
sempre será armazenada em uma meta inserida. Agora, quando o usuário pressiona o botão, queremos usar essa

48
00:04:27,040 --> 00:04:33,730
meta inserida, então, para isso, adicionarei outra função aqui, adicionar gerenciador de metas e isso é apenas uma convenção de nomenclatura que

49
00:04:33,940 --> 00:04:39,310
estou usando para essas funções aqui, você pode nomeá-las o que você está acostumado com seus aplicativos

50
00:04:39,310 --> 00:04:45,820
do React, no final, o nome da função deve simplesmente descrever o que está prestes a acontecer e que aqui será

51
00:04:45,820 --> 00:04:52,920
manipulado um pressionamento no botão que, no final, adicionará um objetivo. Aqui a função não aceita nenhum argumento, mas no corpo da função, eu

52
00:04:52,920 --> 00:04:58,150
quero adicionar minha meta inserida a uma lista de objetivos e não temos lista ainda, então por enquanto

53
00:04:58,230 --> 00:05:04,830
o que eu faço aqui é log de console, que é suportado em React Nativo, entrou meta para que pelo menos vejamos que isso

54
00:05:04,830 --> 00:05:10,710
foi salvo corretamente e que essa função é executada. Para isso, precisamos conectá-lo ao botão,

55
00:05:10,710 --> 00:05:16,680
no entanto, podemos adicionar o prop onPress e apontar para o manipulador de meta

56
00:05:16,680 --> 00:05:24,160
de adição, novamente sem parênteses, para que isso não seja executado imediatamente, mas apenas quando uma prensa acontecer.

57
00:05:24,540 --> 00:05:33,720
E agora vamos salvar tudo isso e vamos voltar e vamos talvez digitar learn React Native e o bom é que você pode usar o seu teclado

58
00:05:33,720 --> 00:05:41,560
real aqui e pressionar add e você deve ver aqui no seu terminal esse log, você também vai ver isso pela maneira em

59
00:05:41,560 --> 00:05:48,130
suas ferramentas expo dev aqui na guia do navegador. Lá, se você clicar em um dos dispositivos

60
00:05:48,150 --> 00:05:52,670
conectados, aquele em que você acabou de clicar no botão no meu caso,

61
00:05:52,670 --> 00:05:57,730
o dispositivo Android e lá na parte inferior, você também verá o Learn React Native.

62
00:05:57,730 --> 00:06:05,350
E claro que também funciona no iOS, saiba tudo sobre o React Native, se entrarmos aqui e clicarmos em add, então

63
00:06:05,350 --> 00:06:12,840
vemos também que estar logado aqui e também ver isso nas ferramentas expo dev, se clicarmos no iPhone no

64
00:06:12,840 --> 00:06:16,810
muito fundo, vemos esse log. Ok, então estamos recebendo

65
00:06:16,910 --> 00:06:21,530
a entrada do usuário, estamos armazenando, estamos fazendo o log do console,

66
00:06:21,530 --> 00:06:27,530
é claro que não queremos consolar o log, queremos enviá-lo abaixo de nossa entrada aqui, queremos

67
00:06:27,530 --> 00:06:35,000
um lista de nossos objetivos abaixo desta área de entrada. Então, para isso, precisamos da segunda visualização aqui que deve mostrar nossa lista de itens.

68
00:06:35,030 --> 00:06:40,250
Então, aqui entre as tags de abertura e fechamento, eu quero mostrar todos os elementos

69
00:06:40,280 --> 00:06:45,740
que adicionamos, todos os objetivos que adicionamos. Para isso, primeiro precisamos gerenciar nossos objetivos e

70
00:06:46,400 --> 00:06:51,780
podemos configurar outro estado para o que inicialmente é um array vazio, portanto, eu passo um array

71
00:06:51,860 --> 00:06:58,010
vazio como um valor para usarState e lá temos os objetivos do curso e as metas do curso função.

72
00:06:58,010 --> 00:07:03,070
Agora, esses nomes estão sempre à sua disposição, mas eles devem descrever o que está em seu estado e

73
00:07:03,070 --> 00:07:04,230
como você pode atualizá-lo.

74
00:07:04,240 --> 00:07:10,330
Então, agora, quando adicionamos uma meta, quero atualizar as metas do meu curso para adicionar a

75
00:07:10,330 --> 00:07:20,840
nova meta e, para isso, posso definir as metas do curso e agora definir as metas do curso para uma nova matriz onde tomo minhas metas e adiciono

76
00:07:20,840 --> 00:07:21,740
uma novo.

77
00:07:21,740 --> 00:07:25,100
Agora esta é a sintaxe que você pode não saber, que

78
00:07:25,100 --> 00:07:30,470
é o chamado operador de propagação, é um recurso de JavaScript que pega uma matriz existente e metas

79
00:07:30,470 --> 00:07:38,030
de curso é uma matriz, é nosso instantâneo de estado atual antes da atualização e extrai todos os elementos array e, em seguida, adiciona-los aqui

80
00:07:38,030 --> 00:07:43,280
para uma nova matriz é por isso que eu tenho os colchetes circundantes, sem este colchetes circundantes

81
00:07:43,280 --> 00:07:43,840
isso

82
00:07:43,850 --> 00:07:49,310
não funcionaria, mas agora criamos uma nova matriz e adicionamos todos os elementos da matriz antiga e agora

83
00:07:49,310 --> 00:07:51,100
podemos adicione também um novo elemento.

84
00:07:51,110 --> 00:07:53,370
Então, aqui, adiciono uma vírgula para adicionar

85
00:07:53,390 --> 00:08:00,310
um elemento extra depois de todos os elementos que estou retirando aqui e o elemento que adiciono aqui é minha meta inserida, é claro.

86
00:08:00,320 --> 00:08:04,680
Agora, atualizamos nossa lista de metas com a lista antiga

87
00:08:04,730 --> 00:08:10,250
de metas, inicialmente uma lista vazia, mas isso aumentará com o tempo, porque também

88
00:08:10,250 --> 00:08:17,380
adicionamos uma nova meta quando pressionamos esse botão. Agora, uma minúscula nota lateral, ao trabalhar com metas

89
00:08:17,380 --> 00:08:21,410
definidas, metas do curso aqui é o nosso estado anterior e

90
00:08:21,460 --> 00:08:28,210
a maneira como o React atualiza o estado, esse deve ser sempre o instantâneo mais atual, mas não

91
00:08:28,360 --> 00:08:32,750
é 100% garantido. , quando você atualiza seu estado com base no

92
00:08:32,920 --> 00:08:39,250
estado antigo, você pode usar a função function dessa função set onde você não passa o valor

93
00:08:39,250 --> 00:08:39,950
do

94
00:08:40,060 --> 00:08:46,870
seu novo estado aqui, mas ao invés disso você o passa em uma função, tipicamente uma função anônima onde

95
00:08:46,990 --> 00:08:53,850
você obtenha seu estado atual ou objetivos atuais, assim, seu instantâneo de estado atual e, em seguida, retorne seu

96
00:08:53,860 --> 00:09:01,240
valor atualizado, portanto, aqui eu retorno meu array atualizado com a sintaxe da função de seta in-line, se você tiver

97
00:09:01,240 --> 00:09:06,640
apenas uma expressão, omitir as chaves return statement e apenas digite o valor que você

98
00:09:06,640 --> 00:09:08,650
deseja retornar e ele será

99
00:09:08,680 --> 00:09:13,310
retornado e isso é tudo normal Javascript aqui, nada Reagir nativo específico.

100
00:09:13,450 --> 00:09:21,070
Então, aqui, eu tomo minhas metas atuais e, em seguida, adiciono minha meta inserida. Esta sintaxe é um pouco melhor, a outra sintaxe teria

101
00:09:21,070 --> 00:09:26,170
funcionado tão bem, mas é garantido que sempre funcionará, porque o React Native

102
00:09:26,200 --> 00:09:33,520
sempre irá em frente e lhe dará a garantia, o último instantâneo de estado antes de aplicar a mudança

103
00:09:33,550 --> 00:09:35,050
de estado aqui.

104
00:09:35,260 --> 00:09:42,410
Agora tudo bem, agora teremos uma lista, uma série de metas gerenciadas aqui. Como podemos agora produzir isso?