1
00:00:02,160 --> 00:00:08,820
Agora, para mostrar nossa lista de metas, aqui na visão, quero simplesmente produzir alguns componentes de texto por enquanto, onde

2
00:00:08,820 --> 00:00:16,290
simplesmente imprimo meu objetivo e, para isso, podemos inserir uma expressão dinâmica aqui com chaves de abertura e fechamento únicas e agora nos referimos

3
00:00:16,290 --> 00:00:17,910
aos objetivos do curso,

4
00:00:18,390 --> 00:00:25,860
que é essa variável que temos aqui com a desestruturação do array. Objetivos do curso é o nosso conjunto de metas e agora,

5
00:00:25,860 --> 00:00:27,890
como no React normal, que é

6
00:00:28,110 --> 00:00:34,620
uma diferenciação que eu realmente não gosto porque estamos usando o React normal aqui no final, então, como

7
00:00:34,800 --> 00:00:36,350
você sabe do

8
00:00:36,750 --> 00:00:43,590
React for web projects, agora você pode mapear essa matriz de dados em uma matriz de componentes com o

9
00:00:43,590 --> 00:00:50,280
método map, que é um método normal de Javascript. O método map usa uma função que é executada em

10
00:00:50,280 --> 00:00:52,230
todos os itens do array, então

11
00:00:52,230 --> 00:00:53,180
aqui nós

12
00:00:53,190 --> 00:01:00,810
temos nosso objetivo e então temos que retornar um novo componente aqui. Mais uma vez eu vou usar esta sintaxe de função de

13
00:01:00,810 --> 00:01:07,230
seta inline onde em vez de ter chaves e, em seguida, retornar algo, omitir as chaves e omitir

14
00:01:07,230 --> 00:01:11,340
a declaração de retorno, esta é sintaxe JavaScript válida, isso também

15
00:01:11,370 --> 00:01:13,980
retornará o que eu inserir aqui.

16
00:01:14,160 --> 00:01:17,740
O que eu quero retornar é um componente de texto,

17
00:01:17,880 --> 00:01:26,430
então esse componente de texto nós importamos do React Native e com isso, podemos mostrar nossa meta aqui porque um objetivo nos objetivos do curso será apenas

18
00:01:26,430 --> 00:01:32,280
um texto porque o que adicionamos aos objetivos do curso é o entrou meta e a meta inserida é

19
00:01:32,280 --> 00:01:36,100
o que obtemos de entrada de texto e isso é apenas texto.

20
00:01:36,570 --> 00:01:42,210
Então aqui, agora estamos apenas produzindo algum texto e estou mapeando todas as metas do meu curso

21
00:01:42,390 --> 00:01:49,630
em componentes de texto que serão mostrados nesta visão aqui. E com isso, se nós salvarmos isso, nós já

22
00:01:49,720 --> 00:01:51,130
poderemos começar

23
00:01:51,220 --> 00:01:59,260
a adicionar alguns objetivos, então aprender Reagir Nativa é uma coisa que eu posso entrar aqui, aperte add e

24
00:01:59,260 --> 00:02:00,950
aqui está, aprenda de

25
00:02:01,050 --> 00:02:06,300
verdade e nós pegamos isso também e se Você também quer fazer

26
00:02:06,300 --> 00:02:11,610
algumas panquecas, você pode fazer isso também e, claro, isso também funciona

27
00:02:11,980 --> 00:02:18,480
no iOS, aprender React Native for real e, claro, eu ainda quero fazer algumas panquecas.

28
00:02:18,550 --> 00:02:23,960
Então isso está funcionando e é assim que podemos produzir uma lista simples e trivial de itens aqui.

29
00:02:23,980 --> 00:02:29,830
Agora, é claro, esses itens parecem um tanto chatos, então talvez possamos aplicar alguns estilos lá

30
00:02:29,830 --> 00:02:33,120
para fazê-los parecerem melhores. Antes de fazer isso,

31
00:02:33,340 --> 00:02:36,680
observe que temos um erro aqui no nosso terminal.

32
00:02:36,730 --> 00:02:41,350
Agora, nosso aplicativo funciona claramente, mas o erro que estamos recebendo aqui é que cada filho em

33
00:02:41,350 --> 00:02:46,190
uma lista deve ter uma chave exclusiva e essa é uma regra React normal, nada específico para React Native.

34
00:02:46,300 --> 00:02:52,930
Na verdade, você deve sempre, ao mapear isso para uma lista de widgets, atribuir uma chave aqui para que o React possa

35
00:02:52,930 --> 00:02:58,750
atualizar com eficiência essa lista nos bastidores, se necessário. Você faz isso adicionando uma chave prop aqui e, em seguida,

36
00:02:59,110 --> 00:03:01,730
a chave deve ser um identificador único, pois agora

37
00:03:01,780 --> 00:03:05,890
vamos com a meta em si que não é estritamente única, você poderia inserir a

38
00:03:05,890 --> 00:03:09,970
mesma meta com o mesmo texto duas vezes, o que lhe daria uma erro, mas

39
00:03:10,240 --> 00:03:12,650
por enquanto vamos supor que você não está

40
00:03:12,670 --> 00:03:17,720
fazendo isso, portanto, podemos usar o objetivo como uma chave e, se fizermos isso, estaremos nos livrando desse aviso.

41
00:03:17,720 --> 00:03:21,850
Se eu aprendi agora o React Native, posso adicionar isso sem um erro.

42
00:03:21,850 --> 00:03:27,610
Novamente, se eu adicionar o mesmo texto duas vezes, então tecnicamente eu nem recebo um erro aqui, mas isso seria errado,

43
00:03:27,610 --> 00:03:28,040
aqui

44
00:03:28,040 --> 00:03:32,170
está, aqui está o erro porque eu tenho dois filhos com a mesma chave.

45
00:03:32,200 --> 00:03:35,650
Então, por enquanto, vamos supor que você não faça isso,

46
00:03:35,770 --> 00:03:40,580
essa é a regra de chave normal que você tem no Reagir normal também.

47
00:03:40,780 --> 00:03:46,210
Então, vamos supor que você não tenha o mesmo objetivo duas vezes e vamos continuar com o estilo desses

48
00:03:46,210 --> 00:03:48,910
itens, porque, no momento, eles não parecem muito empolgantes.