1
00:00:02,380 --> 00:00:08,210
Então, já analisamos um conjunto sólido de princípios básicos necessários para a criação de aplicativos React Native, para trabalhar com

2
00:00:08,210 --> 00:00:10,050
esses blocos centrais, embora, é claro,

3
00:00:10,190 --> 00:00:13,460
muitas das coisas ainda não estejam claras, não tivemos uma análise

4
00:00:13,460 --> 00:00:17,660
mais detalhada estilo e layout e assim por diante, mas uma coisa que nós definitivamente

5
00:00:17,780 --> 00:00:22,820
devemos fazer agora também é explorar como você pode construir seus próprios componentes, porque até agora, nós

6
00:00:23,030 --> 00:00:25,780
sempre trabalhamos no aplicativo. js e você certamente

7
00:00:26,000 --> 00:00:28,820
não criará aplicativos maiores em apenas um arquivo,

8
00:00:28,820 --> 00:00:31,360
o arquivo ficará super grande e

9
00:00:31,430 --> 00:00:37,190
se você tiver um componente personalizado que você planeja repetir, agora teríamos que copiar e colar

10
00:00:37,190 --> 00:00:38,420
nosso código.

11
00:00:38,660 --> 00:00:44,060
Então, vamos criar novos componentes e, portanto, aqui no projeto, vou adicionar uma nova pasta chamada componentes, o nome é

12
00:00:44,060 --> 00:00:49,020
com você, mas desde que eu planejo armazenar alguns componentes lá, o nome faz sentido para mim

13
00:00:49,710 --> 00:00:55,250
e lá, eu deseja criar um componente para o item da lista e também para a nossa área de entrada.

14
00:00:55,340 --> 00:01:00,320
Então, vamos criar dois novos arquivos lá e eu terei uma convenção de nomenclatura para

15
00:01:00,320 --> 00:01:09,440
os arquivos onde eu inicio com maiúsculas e eu terei meu GoalItem. js, é um arquivo Javascript, claro, e

16
00:01:09,440 --> 00:01:16,100
meu GoalInput. arquivo js. Agora, ambos terão o componente React normal, portanto, vamos

17
00:01:16,100 --> 00:01:21,830
começar com o item de meta e, portanto, importar React from React, da mesma forma que você precisa fazer isso em um projeto React for web.

18
00:01:21,830 --> 00:01:29,570
Então, aqui, eu vou criar o meu componente funcional, item de meta que fica adereço e que então tem que

19
00:01:29,570 --> 00:01:36,000
retornar algum jsx aqui e eu vou exportar isso como um padrão, assim como este.

20
00:01:36,090 --> 00:01:42,030
Agora o jsx que eu quero renderizar lá tem que usar componentes React Native ou outros componentes customizados que, por sua

21
00:01:42,060 --> 00:01:44,570
vez, usam componentes React Native e aqui eu irei

22
00:01:44,730 --> 00:01:51,180
com este conteúdo que eu tinha aqui. Então vou cortar do aplicativo. arquivo js e devolva-o

23
00:01:51,180 --> 00:01:51,790
aqui.

24
00:01:52,450 --> 00:01:57,100
Agora, para usar isso aqui, temos que importar o modo de exibição e o

25
00:01:57,100 --> 00:01:59,970
texto, então esses dois componentes, do React Native.

26
00:01:59,980 --> 00:02:05,760
Então, vamos importar a visualização e o texto do React-Native aqui.

27
00:02:05,790 --> 00:02:10,410
Além disso, estou configurando alguns estilos e eu quero usar a folha

28
00:02:10,410 --> 00:02:20,110
de estilo, então eu vou importar isso aqui também e, em seguida, configurar meus estilos constante que você poderia nomear de forma diferente, claro, com stylesheet

29
00:02:20,380 --> 00:02:26,990
criar e eu vou voltar para o aplicativo. js arquivo e pegue o meu estilo de item de lista aqui, cortá-lo de lá e ir para

30
00:02:26,990 --> 00:02:32,960
o item de meta e adicioná-lo aqui para este objeto eu passo para folha de estilo. crio.

31
00:02:33,020 --> 00:02:39,140
Agora isso deve funcionar, mas é claro que o que eu estou produzindo aqui não estará mais nos dados do item, em

32
00:02:39,500 --> 00:02:46,550
vez disso, vamos esperar que nós simplesmente obtemos isso como adereços, então ou adere crianças para que elas possam ser passadas entre a tag de

33
00:02:46,550 --> 00:02:53,210
abertura e fechamento de nossos itens. componente personalizado ou talvez adereços. título, o que você quiser, um

34
00:02:53,210 --> 00:02:59,770
nome próprio de sua escolha. Agora podemos usar nosso componente personalizado,

35
00:02:59,770 --> 00:03:06,580
o item de meta, voltando ao aplicativo. arquivo js e aqui adicionarei a importação ao item de meta com um G

36
00:03:06,580 --> 00:03:15,370
maiúsculo, para que o React reconheça isso como um componente personalizado. / components / GoalItem, você pode omitir o. js e agora podemos usar o

37
00:03:15,370 --> 00:03:24,550
item de meta aqui no item de renderização como um componente personalizado, nesse caso um componente de fechamento automático porque como estou

38
00:03:24,610 --> 00:03:30,220
usando o título de props e não adoro crianças, não espero nada entre a

39
00:03:30,220 --> 00:03:37,660
abertura e o fechamento tags do meu componente personalizado. Eu espero um título prop, então vamos definir isso aqui com título

40
00:03:37,660 --> 00:03:43,360
e, em seguida, aqui, podemos apontar os dados do item, então obter acesso no item que é um objeto

41
00:03:44,480 --> 00:03:53,210
onde temos uma chave de valor e com isso, ainda devemos ver O mesmo que antes, se nós entramos em algumas metas aqui, aprender tudo sobre rn, sim que

42
00:03:54,870 --> 00:04:01,230
está com bom aspecto, agora com o nosso componente personalizado. Agora aqui está uma boa prática para você também colocar a entrada

43
00:04:01,260 --> 00:04:07,320
de texto e botão ou toda essa visão aqui, na verdade, em nosso componente de entrada de meta e, claro, para isso,

44
00:04:07,320 --> 00:04:12,810
você também precisará conectar a comunicação entre o aplicativo. O arquivo js e o componente de entrada da meta

45
00:04:13,170 --> 00:04:18,930
devem ser informados quando os usuários pressionam esse botão no componente de entrada da meta e, em seguida, adicionam dados aqui no

46
00:04:18,930 --> 00:04:19,730
aplicativo. arquivo js.

47
00:04:20,280 --> 00:04:25,260
É assim que você faria em um projeto do React for web, então se você tem experiência com

48
00:04:25,260 --> 00:04:30,860
isso, não deve haver problema, caso contrário, faremos isso juntos na próxima palestra, mas se você souber como fazê-lo, tente em

49
00:04:30,860 --> 00:04:32,250
seu primeiro lugar agora.