1
00:00:02,430 --> 00:00:05,640
Então, vamos começar a trabalhar nesse aplicativo e, para

2
00:00:05,760 --> 00:00:08,270
isso, eu tenho um novo aplicativo

3
00:00:08,280 --> 00:00:12,390
aqui, você o encontrará anexado caso queira criar esse mesmo aplicativo inicial.

4
00:00:12,420 --> 00:00:19,020
Este aplicativo simples nos fornece isso aqui, um aplicativo muito feio, onde temos algum texto sobreposto pela

5
00:00:19,020 --> 00:00:21,440
barra de status, pelo entalhe.

6
00:00:21,450 --> 00:00:26,800
Agora, podemos corrigir isso com a visualização da área de salvamento, como você aprendeu anteriormente, mas

7
00:00:26,820 --> 00:00:33,210
não precisaremos, pois não manteremos esse conteúdo e usaremos uma biblioteca de terceiros que nos permite navegar facilmente entre diferentes

8
00:00:33,210 --> 00:00:36,530
telas e obter animações agradáveis ao longo do caminho, para

9
00:00:36,690 --> 00:00:38,310
que não tenhamos que cuidar

10
00:00:38,310 --> 00:00:44,610
disso e essa biblioteca de terceiros também gerenciará o entalhe no dispositivo e nos dará essa área de salvamento

11
00:00:44,610 --> 00:00:45,880
pronta para uso.

12
00:00:45,900 --> 00:00:52,230
Agora, antes de adicionarmos a biblioteca de terceiros, vamos começar a escrever um código, porque só

13
00:00:52,230 --> 00:00:56,020
podemos navegar entre as telas se tivermos várias telas.

14
00:00:56,040 --> 00:01:01,950
Então, para isso, criarei uma nova pasta de telas aqui e também já criarei uma

15
00:01:01,950 --> 00:01:07,830
pasta de componentes, a diferença será que, na pasta de telas, temos esses componentes

16
00:01:07,860 --> 00:01:15,420
React que, em seguida, usamos como tela inteira, eu acho na pasta de componentes, teremos os componentes que usamos

17
00:01:15,420 --> 00:01:16,430
em nossas

18
00:01:16,440 --> 00:01:23,280
telas. Por exemplo, quando temos essa grade de categorias de refeições, de categorias de alimentos, nosso item

19
00:01:23,280 --> 00:01:30,200
de grade seria um componente, a grade inteira, as categorias de alimentos inteiras tela, no entanto, seria

20
00:01:30,450 --> 00:01:37,530
uma tela e acho que isso faz sentido. Agora, conforme esboçado, conforme exposto, neste aplicativo, precisaremos de duas telas e já criaremos todos

21
00:01:37,530 --> 00:01:43,860
os arquivos e os preencheremos com vida ao longo deste módulo, é claro. Precisaremos da tela de categorias e nomearemos a

22
00:01:43,890 --> 00:01:49,440
tela de categorias de arquivos para deixar bem claro o que há lá

23
00:01:49,440 --> 00:01:50,200
dentro.

24
00:01:50,250 --> 00:01:57,270
Essa é a tela em que podemos selecionar uma categoria como italiano, alemão e americano; portanto, onde

25
00:01:57,270 --> 00:02:04,170
podemos selecionar uma categoria de comida, adicionaremos o conteúdo que refletir isso, adicionaremos uma grade nessa tela,

26
00:02:04,230 --> 00:02:06,420
nessa tela componente mais tarde.

27
00:02:06,420 --> 00:02:14,100
Agora que selecionamos uma categoria, veremos uma lista de refeições que se encaixam nessa categoria e vou nomear essa tela que

28
00:02:14,100 --> 00:02:20,190
veremos, na qual navegaremos para a tela de refeições de categoria, porque esta é a tela

29
00:02:20,190 --> 00:02:23,390
que carrega as refeições para uma categoria escolhida.

30
00:02:23,460 --> 00:02:28,240
Essa é outra tela que precisamos e outra tela para a qual poderemos navegar.

31
00:02:28,320 --> 00:02:35,100
Agora também precisaremos de uma tela de favoritos, que contém todas as nossas receitas favoritas, nossas refeições favoritas

32
00:02:35,100 --> 00:02:42,300
e também precisaremos de um MealDetailScreen, que é a tela que vemos se tocarmos em uma única refeição dentro de

33
00:02:42,300 --> 00:02:48,390
uma categoria escolhida ou em a tela favorita. Isso nos mostra os ingredientes e as

34
00:02:48,390 --> 00:02:51,120
etapas detalhadas para esta refeição.

35
00:02:51,120 --> 00:02:58,020
Agora, e por último, mas não menos importante, conforme indicado, precisaremos de uma tela de filtros, e essa tela de filtros

36
00:02:58,020 --> 00:03:05,700
é a tela que nos permite definir filtros, como comida vegana, para que possamos ver apenas receitas veganas ou vegetarianas ou sem glúten ou

37
00:03:05,790 --> 00:03:08,110
sem lactose, essas serão as quatro

38
00:03:08,130 --> 00:03:14,950
categorias que terei neste aplicativo, então essas são as telas. Agora vamos adicionar componentes conforme necessário e

39
00:03:15,040 --> 00:03:18,410
não adicionar todos os arquivos com antecedência

40
00:03:18,430 --> 00:03:25,390
e, com isso, temos a configuração básica de que precisamos aqui, embora todas as

41
00:03:25,720 --> 00:03:31,330
nossas telas estejam totalmente vazias. Agora vamos preenchê-los com mais vida, passo a passo, mas pelo

42
00:03:31,330 --> 00:03:34,160
menos eu quero configurar um componente básico em cada uma dessas telas.

43
00:03:34,390 --> 00:03:40,000
Então, vou começar na tela de categorias e, é claro, precisamos importar o React do React para

44
00:03:40,000 --> 00:03:46,750
lá porque criaremos um componente React e também importaremos algo do React Native porque, obviamente, criaremos um componente React aqui

45
00:03:47,050 --> 00:03:52,600
que usa alguns componentes do React Native. Para ser mais preciso, começarei aqui simples e

46
00:03:52,630 --> 00:03:58,110
importarei uma visualização e um texto do React Native e, em seguida, criarei meu componente, a

47
00:03:58,120 --> 00:04:04,630
tela de categorias, neste caso, que adota adereços ou que pode receber adereços pelo menos porque, afinal, é um componente

48
00:04:04,630 --> 00:04:11,530
React normal e onde exportarei isso como meu componente padrão. Também adicionarei uma folha de estilo porque é

49
00:04:11,530 --> 00:04:16,870
provável que precisemos disso e, se não o fizermos, ainda podemos excluí-la mais tarde.

50
00:04:16,870 --> 00:04:19,150
Então, eu configurarei meus

51
00:04:19,150 --> 00:04:22,060
estilos aqui com a stylesheet create, assim.

52
00:04:22,330 --> 00:04:26,440
Portanto, esse é um componente React muito básico, mas não

53
00:04:26,440 --> 00:04:32,730
renderiza nada; portanto, dentro da função component aqui, teremos que retornar algo e algo é algum

54
00:04:32,770 --> 00:04:39,920
código jsx onde desejo renderizar uma visualização e, aí, um texto e aqui eu digo a tela de categorias.

55
00:04:40,240 --> 00:04:49,270
Agora também darei a essa visão algum estilo em que eu digo estilos. tela, com um layout de tela muito básico ou um estilo de

56
00:04:49,270 --> 00:04:56,260
tela aqui, onde defino flex como um e justifico o conteúdo para centralizar e alinhar itens para centralizar e,

57
00:04:56,260 --> 00:04:58,980
como você aprendeu, isso fará uma

58
00:04:59,080 --> 00:05:04,850
coisa: centralizará o conteúdo na tela, então ele centralizará este texto na tela no final.

59
00:05:04,960 --> 00:05:09,880
Esse é o componente base e eu copiarei esse conteúdo para todas as outras telas e,

60
00:05:09,910 --> 00:05:14,920
é claro, esse não é o conteúdo final que teremos lá, apenas algum conteúdo fictício para

61
00:05:14,920 --> 00:05:19,210
que possamos começar a navegar entre algumas dessas telas e ver algo .

62
00:05:19,210 --> 00:05:25,900
Então aqui temos a tela de refeição da categoria, esse é o componente aqui e, portanto, é o que

63
00:05:25,900 --> 00:05:37,880
precisamos exportar para cá e aqui, portanto, direi a tela da refeição de categoria como esta. Agora também adicionarei isso na tela de favoritos e renomeá-lo para a tela de

64
00:05:37,880 --> 00:05:41,650
favoritos e, é claro, exportar a tela de favoritos

65
00:05:41,690 --> 00:05:43,700
aqui e aqui, posso

66
00:05:43,700 --> 00:05:45,000
dizer a

67
00:05:45,110 --> 00:05:48,720
tela de favoritos, copiar isso na tela de

68
00:05:48,740 --> 00:05:53,060
filtros e fazer a mesma coisa lá, é a tela

69
00:05:53,080 --> 00:05:55,920
de filtros, renomeei e exportei isso

70
00:05:55,940 --> 00:06:02,240
e também digo a tela de filtros aqui em nosso texto e, por último

71
00:06:02,390 --> 00:06:06,110
mas não menos importante, esse é o MealDetailScreen.

72
00:06:06,110 --> 00:06:09,000
Portanto, aqui temos o

73
00:06:09,740 --> 00:06:15,140
MealDetailScreen, também o nomeei MealDetailScreen aqui e exportarei o MealDetailScreen.

74
00:06:15,140 --> 00:06:19,930
Então, com isso, configuramos tudo nessas telas. Agora, estamos quase terminando toda

75
00:06:20,060 --> 00:06:23,390
a preparação. Só quero adicionar algumas fontes

76
00:06:23,450 --> 00:06:29,240
especiais a esse aplicativo e, a partir de então, mergulharemos na adição de navegação.