1
00:00:02,460 --> 00:00:04,290
Então, agora que sabemos o

2
00:00:04,290 --> 00:00:07,370
que é React Native, vamos dar uma breve olhada nos bastidores.

3
00:00:07,530 --> 00:00:13,080
Agora, como mencionei, com o React e o React Native, criamos um aplicativo e nosso código normalmente se parece com

4
00:00:13,080 --> 00:00:13,700
algo assim.

5
00:00:13,710 --> 00:00:19,260
Nós construímos Componentes React normais como você o conhece da web com Javascript, porque Javascript é

6
00:00:19,260 --> 00:00:21,650
a linguagem que usamos para construir

7
00:00:21,810 --> 00:00:26,290
aplicativos React Native, mas lá, usamos componentes especiais como visualização e texto aqui.

8
00:00:26,310 --> 00:00:31,130
Estes não são seus elementos HTML normais porque os elementos HTML normais não

9
00:00:31,680 --> 00:00:37,230
são suportados, as plataformas nativas não sabem como usá-los, portanto você usa componentes especiais dados a

10
00:00:37,230 --> 00:00:42,600
você pelo React Native para o qual o React Native é capaz de traduzi-los para instruções

11
00:00:42,630 --> 00:00:46,380
as plataformas nativas entendem, então é assim que isso funciona.

12
00:00:46,380 --> 00:00:51,150
Agora é importante entender que seus pontos de vista, portanto, os componentes com os quais você está trabalhando, são, no

13
00:00:51,150 --> 00:00:58,440
final, compilados para widgets nativos reais, para elementos nativos reais, para código nativo real. Seu código Javascript onde você gerencia sua lógica de

14
00:00:58,470 --> 00:01:03,480
negócios não será compilado, mas suas visualizações serão, e isso também significa que você

15
00:01:03,750 --> 00:01:09,190
normalmente obtém um ótimo desempenho ao criar aplicativos React Native, pois o resultado é um aplicativo

16
00:01:09,190 --> 00:01:14,310
nativo real em que uma grande parte do código é um código nativo real.

17
00:01:14,310 --> 00:01:19,300
Agora, se observarmos mais de perto essa parte do componente, é importante entender que você

18
00:01:19,320 --> 00:01:25,640
pode usar o React para criar aplicativos da Web, mas também é possível desenvolver aplicativos nativos para Android e iOS

19
00:01:25,650 --> 00:01:31,530
com código nativo, sem reagir nativo ou pode usar o React Native, então essas são quatro formas diferentes

20
00:01:31,530 --> 00:01:37,410
de criar aplicativos, onde, é claro, o React for the web não nos dará um aplicativo nativo, mas

21
00:01:37,410 --> 00:01:40,260
apenas para comparar como isso seria relacionado.

22
00:01:40,260 --> 00:01:45,630
Então, se você está usando o React for the web, você normalmente trabalha com digamos um div para estruturar seu conteúdo.

23
00:01:46,260 --> 00:01:48,540
Se você trabalhasse diretamente com

24
00:01:48,540 --> 00:01:54,780
o Android, criaria seu aplicativo no Android Studio sem o Reagt Native, trabalharia com uma visualização do

25
00:01:54,780 --> 00:02:00,600
Android, por exemplo, seria um widget que pode ser usado na interface do usuário que está

26
00:02:00,600 --> 00:02:08,970
criando diretamente com os recursos da plataforma nativa para estruturar seu conteúdo. No iOS, esse seria o widget de visualização da interface do usuário e

27
00:02:08,970 --> 00:02:10,780
você não precisa memorizar esses

28
00:02:10,830 --> 00:02:16,020
termos. Só quero explicar como o React Native traduz as coisas para você, porque, no React

29
00:02:16,020 --> 00:02:18,180
Native apps, você usa o elemento view.

30
00:02:18,180 --> 00:02:22,950
Agora, se você observar esse elemento view, verá que é muito parecido com o elemento

31
00:02:23,010 --> 00:02:24,830
div, parece uma tag HTML,

32
00:02:24,840 --> 00:02:30,510
a diferença é que ele começa com um caractere maiúsculo e essa visualização não é uma tag HTML ,

33
00:02:30,690 --> 00:02:36,180
o navegador não saberia o que fazer com uma visualização, mas o React Native e o React Native

34
00:02:36,240 --> 00:02:42,990
traduzirão essa visualização para a visualização do Android ou para a visualização da interface do usuário para você e isso, é claro, não

35
00:02:43,050 --> 00:02:49,260
apenas para esse componente geral de exibição, mas Por exemplo, se você estiver buscando a entrada do usuário, na Web você

36
00:02:49,260 --> 00:02:54,210
faria isso com o elemento de entrada. Se criasse um aplicativo Android nativo, usaria o texto de

37
00:02:54,210 --> 00:02:59,850
edição. Para um aplicativo iOS nativo, você usaria o campo de texto da interface do usuário e no React

38
00:03:00,090 --> 00:03:06,240
Native, há o componente de entrada de texto, novamente o React Native compila isso para os widgets nativos para você e

39
00:03:06,240 --> 00:03:11,520
é assim que o React Native trabalha nos bastidores. É claro que não nos importamos com a Web neste

40
00:03:11,520 --> 00:03:17,310
curso aqui, apenas para que você entenda que existem algumas semelhanças, usamos essas tags que se parecem com tags HTML, mas é claro,

41
00:03:17,440 --> 00:03:24,660
que a diferença importante é que esses são componentes especiais compilados para código nativo. Agora, como eu já mencionei, é importante entender que, para

42
00:03:24,660 --> 00:03:30,500
a UI, o React Native fornece componentes especiais que são então compilados para uso nativo, para

43
00:03:30,540 --> 00:03:33,000
sua outra lógica, então se

44
00:03:33,060 --> 00:03:38,760
você estiver usando Redux ou se tiver alguma lógica de negócios, re enviando solicitações HTTP,

45
00:03:38,760 --> 00:03:47,070
você está transformando dados, todos os outros códigos Javascript não são compilados para código nativo, mas em vez disso, ele está sendo executado

46
00:03:47,070 --> 00:03:52,980
em um encadeamento especial hospedado pelo React Native. Então você pode imaginar o seu aplicativo React Native

47
00:03:52,980 --> 00:03:58,450
que você obtém no final como um aplicativo nativo real porque é um, onde todas as visualizações foram

48
00:03:58,450 --> 00:04:05,760
compiladas para widgets nativos, mas onde há um mini aplicativo extra dentro do seu aplicativo, um mini Javascript aplicativo em execução lá, hospedado e

49
00:04:05,760 --> 00:04:12,690
iniciado por React Native, por assim dizer, que executa todo o seu código Javascript e seu código Javascript pode então falar com

50
00:04:12,690 --> 00:04:13,800
a plataforma nativa.

51
00:04:14,160 --> 00:04:19,860
Você pode imaginar isso aqui, você tem seu código, seu aplicativo e você cria um aplicativo nativo que está

52
00:04:19,860 --> 00:04:25,110
sendo executado em uma plataforma nativa e, claro, há certos recursos da plataforma disponíveis, como por exemplo,

53
00:04:25,110 --> 00:04:27,150
o uso da câmera do dispositivo.

54
00:04:27,150 --> 00:04:32,520
Agora, como já mencionado, o seu código pode ser dividido em duas coisas aqui - suas visões e

55
00:04:32,520 --> 00:04:38,430
sua lógica de negócios, então o outro código Javascript. Agora, como já foi mencionado várias vezes, suas

56
00:04:38,490 --> 00:04:46,620
visualizações são compiladas para visualizações nativas, para widgets nativos para essas plataformas e seu código é mantido como código Javascript e você pode acessar os recursos

57
00:04:46,620 --> 00:04:53,090
da plataforma nativa como a câmera porque seu código Javascript é executado em um virtual especial máquina no final, girada e

58
00:04:53,100 --> 00:04:58,430
hospedada pelo React Native dentro do seu aplicativo, então a parte direita aqui está toda dentro

59
00:04:58,440 --> 00:05:04,710
do nosso aplicativo nativo que nós enviamos para as lojas de aplicativos e que o código JavaScript, esta máquina virtual

60
00:05:04,710 --> 00:05:10,080
Javascript, sabe como falar para os recursos da plataforma nativa, portanto, para o sistema operacional em que

61
00:05:10,200 --> 00:05:14,340
seu aplicativo está sendo executado no final, por meio de uma ponte especial

62
00:05:14,340 --> 00:05:20,580
que você poderia dizer, e essa ponte e essa máquina virtual, tudo isso é fornecido automaticamente pelo React Native.

63
00:05:20,580 --> 00:05:22,050
Você não precisa se

64
00:05:22,170 --> 00:05:29,190
preocupar com isso, tudo que você faz é escrever seu aplicativo React Native com Javascript e com esses componentes especiais e isso é tudo que você

65
00:05:29,190 --> 00:05:30,720
precisa saber por agora, é assim

66
00:05:30,720 --> 00:05:36,870
que um aplicativo React Native funciona nos bastidores e eu ache importante estar ciente disso porque tira um pouco da magia em um

67
00:05:37,170 --> 00:05:43,050
sentido positivo porque você entende o que você está realmente escrevendo e o que vai acontecer com o seu código e

68
00:05:43,050 --> 00:05:47,020
como esse código acaba em um aplicativo nativo e é claro, você também entende

69
00:05:47,100 --> 00:05:51,960
que você tem um aplicativo nativo real no final. Nem todo o código é compilado, isso

70
00:05:51,960 --> 00:05:52,980
seria praticamente

71
00:05:52,980 --> 00:05:58,300
impossível, mas suas visualizações são compiladas e, é claro, as visualizações, portanto, a parte que o

72
00:05:58,320 --> 00:06:03,650
usuário vê é a parte mais importante no desempenho de um aplicativo, pois a renderização da interface

73
00:06:03,650 --> 00:06:05,700
e tudo isso, essa é tipicamente

74
00:06:05,700 --> 00:06:10,620
a parte de desempenho intensivo e, portanto, é muito bom que isso seja compilado e

75
00:06:10,620 --> 00:06:13,410
essa é uma das grandes forças do React Native.