1
00:00:02,240 --> 00:00:08,750
Então, foi uma introdução ao React Native e expo, mas acho importante que você entenda com o

2
00:00:08,750 --> 00:00:11,540
que está trabalhando antes de começar.

3
00:00:11,540 --> 00:00:18,470
Agora, com isso, é hora de começar e, para isso, visite a expo. io. Lá você pode clicar em

4
00:00:18,470 --> 00:00:22,020
começar e você encontrará os passos iniciais aqui.

5
00:00:22,190 --> 00:00:24,290
Agora você realmente não precisa desse primeiro passo,

6
00:00:24,290 --> 00:00:30,920
podemos ir direto para o passo número dois, que é que você precisa do NodeJS. Agora você precisa do NodeJS, que é um tempo de execução Javascript que

7
00:00:30,920 --> 00:00:36,800
permite, por exemplo, construir aplicativos do lado do servidor com Javascript. Você não precisa disso porque estamos prestes a

8
00:00:36,800 --> 00:00:39,980
escrever qualquer código NodeJS neste curso, não é

9
00:00:39,980 --> 00:00:41,020
um curso

10
00:00:41,030 --> 00:00:42,550
Node, não se

11
00:00:42,590 --> 00:00:50,750
preocupe, você não precisa conhecer o NodeJS, mas é um pacote que nos permite executar JavaScript em nossa máquina. e por

12
00:00:50,750 --> 00:00:54,680
exemplo, o expo client nos bastidores também roda em Javascript,

13
00:00:54,680 --> 00:00:57,410
não é totalmente relacionado ao React Native,

14
00:00:57,410 --> 00:01:00,100
é só para essa ferramenta funcionar corretamente.

15
00:01:00,230 --> 00:01:05,050
Também para este comando instalar a ferramenta, npm, esse é o Gerenciador de

16
00:01:05,150 --> 00:01:08,320
Pacotes do Nó e também disponibilizado pelo NodeJS.

17
00:01:08,330 --> 00:01:14,300
Então, o primeiro passo é que você visite o nodejs. org e lá, baixe a

18
00:01:14,300 --> 00:01:20,300
última versão, no meu caso 12. 6 de lá para começar e qualquer que seja sua

19
00:01:20,300 --> 00:01:22,840
última versão quando você está vendo isso, simplesmente

20
00:01:22,880 --> 00:01:28,080
baixe essa versão, instale-a, ela te dá um instalador normal, você pode simplesmente percorrer todos esses passos

21
00:01:28,100 --> 00:01:29,420
lá, nada muito chique.

22
00:01:29,420 --> 00:01:32,220
Está disponível para MacOS e Windows e Linux.

23
00:01:32,270 --> 00:01:38,330
Então, basta baixá-lo aqui, percorrer o instalador e, uma vez instalado, você pode seguir para a

24
00:01:38,330 --> 00:01:39,760
terceira etapa aqui.

25
00:01:39,830 --> 00:01:46,130
Então, com o NodeJS instalado, vamos copiar esse comando aqui e então abrir o seu terminal normal ou no

26
00:01:46,130 --> 00:01:49,770
Windows, seu prompt de comando e colar esse comando aqui.

27
00:01:49,790 --> 00:01:54,530
Agora no Mac e Linux, você pode precisar adicionar um sudo na frente disso, no

28
00:01:54,530 --> 00:01:57,820
Windows isso não será necessário, para obter as permissões corretas.

29
00:01:57,830 --> 00:01:59,090
Então aqui eu vou

30
00:01:59,120 --> 00:02:03,630
entrar, então você pode ser solicitado para a sua senha, basta inseri-lo se você

31
00:02:03,740 --> 00:02:09,290
estiver e agora isso vai instalar a expo CLI que é essa ferramenta que nos ajuda a criar

32
00:02:09,290 --> 00:02:15,080
e gerenciar projetos React Native com a ajuda da expo globalmente em sua máquina, para que você possa usá-lo

33
00:02:15,230 --> 00:02:16,280
em qualquer lugar

34
00:02:16,280 --> 00:02:19,190
em sua máquina, de qualquer lugar em seu terminal.

35
00:02:19,280 --> 00:02:21,540
Então, vamos esperar que esta instalação seja concluída,

36
00:02:21,560 --> 00:02:26,180
você pode ignorar qualquer aviso que você possa estar recebendo e eu volto assim que

37
00:02:26,180 --> 00:02:27,470
a instalação terminar.

38
00:02:27,560 --> 00:02:33,170
Você também pode ignorar tais erros intermediários aqui, desde que o global não trave com um erro,

39
00:02:33,170 --> 00:02:35,990
mas termine com uma mensagem como esta no

40
00:02:35,990 --> 00:02:38,030
final, você foi bem sucedido.

41
00:02:38,030 --> 00:02:43,760
Então, com isso, temos a Expo CLI instalada, o próximo passo é criar o nosso projeto, então o passo número

42
00:02:43,760 --> 00:02:44,510
quatro aqui.

43
00:02:44,510 --> 00:02:46,280
Fazemos isso executando expo init e,

44
00:02:46,340 --> 00:02:52,250
em seguida, qualquer nome de projeto de sua escolha e, para isso, antes de tudo, certifique-se de usar o comando cd para navegar

45
00:02:52,310 --> 00:02:58,890
até a pasta aqui em sua máquina onde deseja criar esse projeto. Então eu fiz isso aqui, eu estou nessa pasta e

46
00:02:58,890 --> 00:03:04,440
agora eu posso rodar o expo init e eu vou nomear esse rn-primeiro-app porque é o nosso

47
00:03:04,440 --> 00:03:09,870
primeiro aplicativo React Native aqui afinal de contas. Basta apertar enter, esse nome, claro, depende totalmente

48
00:03:09,870 --> 00:03:11,250
de você e

49
00:03:11,250 --> 00:03:16,530
você criará uma nova pasta no local onde você executou este comando e configurou um

50
00:03:16,800 --> 00:03:18,810
aplicativo React Native usando o expo.

51
00:03:18,900 --> 00:03:22,290
Agora você provavelmente é perguntado qual modelo você deseja usar e lá

52
00:03:22,350 --> 00:03:25,480
você pode ir com o modelo em branco por enquanto.

53
00:03:25,560 --> 00:03:32,700
Certifique-se de não escolher o mínimo, porque isso seria uma configuração sem o ambiente expo com todos os

54
00:03:32,700 --> 00:03:34,060
recursos de conveniência,

55
00:03:34,080 --> 00:03:36,570
então definitivamente vá em branco aqui.

56
00:03:36,570 --> 00:03:42,570
Agora, provavelmente você será solicitado a inserir um nome para o seu aplicativo e eu adicionarei o rn-first-app aqui,

57
00:03:42,570 --> 00:03:43,050
que

58
00:03:43,080 --> 00:03:47,770
é o nome exibido no alternador de tarefas do seu aplicativo na tela inicial e

59
00:03:47,770 --> 00:03:48,540
em breve.

60
00:03:48,570 --> 00:03:52,130
Você pode deixar a lesma como é e simplesmente apertar enter novamente,

61
00:03:52,140 --> 00:03:58,650
agora eu também estou usando fio na minha máquina, que é uma alternativa para npm, você pode não ser perguntado se você

62
00:03:58,650 --> 00:04:00,780
quer usar o fio que é

63
00:04:00,780 --> 00:04:03,210
totalmente bem, eu vou também não escolha aqui

64
00:04:03,390 --> 00:04:08,550
para usar o npm e, portanto, agora, vá em frente, crie a pasta deste projeto, instale todas

65
00:04:08,550 --> 00:04:14,970
as dependências necessárias como React e React Native e nos dê um projeto React Native que podemos usar para construir um aplicativo

66
00:04:14,970 --> 00:04:15,330
nativo.

67
00:04:15,570 --> 00:04:17,960
Então vamos esperar que isso termine agora.

68
00:04:17,970 --> 00:04:23,610
Agora, quando terminar, você verá as próximas instruções aqui. Você pode navegar para a pasta recém-criada com

69
00:04:23,610 --> 00:04:31,230
o comando cd e, em seguida, simplesmente executar o npm start. O Npm start iniciará a ferramenta de

70
00:04:31,230 --> 00:04:38,410
desenvolvimento expo, as ferramentas expo dev e uma nova guia deverá abrir no seu navegador.

71
00:04:38,570 --> 00:04:43,420
Aqui está essa aba que abriu, se você tiver algum problema aqui, você pode ignorar

72
00:04:43,550 --> 00:04:49,070
isso por enquanto, isso aqui é a ferramenta de desenvolvimento expo ou as ferramentas expo dev como é chamado.

73
00:04:49,280 --> 00:04:55,610
É uma janela que permite que você execute seu aplicativo em diferentes dispositivos conectados ou adicione simuladores e permite que você gerencie partes

74
00:04:55,760 --> 00:05:00,740
do seu aplicativo em geral. Você vê alguns resultados do seu aplicativo aqui, alguns avisos que você pode

75
00:05:00,740 --> 00:05:02,650
estar recebendo e isso é muito

76
00:05:02,750 --> 00:05:09,200
conveniente. janela para gerenciar seu aplicativo e para executar seu aplicativo. Agora também certifique-se de que aqui

77
00:05:09,210 --> 00:05:15,780
no terminal onde você executou o npm start, você deixará o processo em execução.

78
00:05:15,810 --> 00:05:21,000
Você pode ver que ele não terminou, você não vê aquela linha de entrada novamente onde você pode inserir

79
00:05:21,630 --> 00:05:27,630
comandos, ao invés disso, você não pode digitar ou você pode pressionar alguns dos atalhos que você vê aqui, mas você não pode

80
00:05:27,630 --> 00:05:28,500
digitar novos comandos.

81
00:05:28,500 --> 00:05:33,960
Você sempre pode sair desse processo apertando o controle e simultaneamente ao mesmo tempo, mas deve deixar

82
00:05:33,960 --> 00:05:37,640
esse processo em execução enquanto estiver trabalhando em seu projeto

83
00:05:37,740 --> 00:05:42,660
e, se estiver pronto para o dia, poderá encerrá-lo e reiniciá-lo. no dia seguinte, porque

84
00:05:42,660 --> 00:05:47,850
esse processo também assistirá ao seu código e, sempre que você alterar algo no seu código

85
00:05:47,850 --> 00:05:52,530
e salvar essa alteração, ele será salvo automaticamente e publicado no seu dispositivo conectado.

86
00:05:52,560 --> 00:05:58,680
Mas falando nisso, vamos conectar o dispositivo e, para isso, a maneira mais fácil de começar é

87
00:05:58,680 --> 00:06:01,940
usar o seu iPhone ou Android que você possui.

88
00:06:01,950 --> 00:06:08,290
Então, no meu caso, é um iPhone aqui e aqui está meu telefone real e eu estou na App Store, agora é em alemão porque eu tenho um

89
00:06:08,290 --> 00:06:12,730
telefone alemão, mas esta é a App Store normal. Agora, você pode ir

90
00:06:12,730 --> 00:06:19,900
até a área de pesquisa e pesquisar por expo. Agora, uma vez que você fez isso, você deve encontrar o cliente expo aqui e você

91
00:06:20,020 --> 00:06:26,680
pode simplesmente fazer o download para o seu dispositivo, é livre para usar. Basta instalá-lo no seu dispositivo e esperar que esta instalação termine,

92
00:06:26,680 --> 00:06:28,430
e assim que terminar, você

93
00:06:28,450 --> 00:06:30,690
pode abrir isso e agora com o

94
00:06:30,700 --> 00:06:37,030
aplicativo expo instalado, você não precisa se inscrever aqui, em vez disso no Android você deve poder para digitalizar esse código

95
00:06:37,370 --> 00:06:42,880
de barras diretamente de dentro do seu aplicativo expo. No iOS, basta abrir o aplicativo da câmera

96
00:06:42,880 --> 00:06:49,230
e você também pode ir para as ferramentas de desenvolvimento aqui e você verá esse código de

97
00:06:49,230 --> 00:06:58,190
barras aqui, basta segurar a câmera no iOS ou no scanner de aplicativos da expo aqui no Android e você será solicitado se você deseja

98
00:06:58,190 --> 00:07:03,510
abrir um aplicativo na expo então. Basta abrir aberto lá e agora

99
00:07:03,800 --> 00:07:07,730
isso deve abrir seu aplicativo aqui no expo cliente que você

100
00:07:07,760 --> 00:07:14,810
instalou, novamente sem inscrever-se, apenas segurando sua câmera do iPhone sobre esse código de barras ou no Android, fazendo isso

101
00:07:14,810 --> 00:07:19,350
diretamente dentro do aplicativo expo onde você terá essa opção para o fazer.

102
00:07:19,370 --> 00:07:24,050
Então agora isso vai construir o pacote Javascript como você vê aqui na parte inferior ou

103
00:07:24,050 --> 00:07:30,260
colocar em outras palavras, isso agora vai levar o seu aplicativo e compilá-lo basicamente e prepará-lo e carregá-lo aqui sobre os servidores

104
00:07:30,320 --> 00:07:36,920
do expo em seu aplicativo e você pode simplesmente bater consegui-lo aqui na primeira tela e, em seguida, este é o seu aplicativo

105
00:07:36,920 --> 00:07:38,130
inicial React Native.

106
00:07:38,270 --> 00:07:43,220
E agora vamos realmente ver o código para isso e ver como podemos mudar alguma coisa no código para

107
00:07:43,220 --> 00:07:45,110
ver algo diferente aqui nesta tela.