1
00:00:02,230 --> 00:00:06,820
E para isso, faz sentido começar aqui no aplicativo. arquivo js.

2
00:00:06,820 --> 00:00:10,370
Agora deixe esse terminal aberto aqui e esse processo funcionando,

3
00:00:10,390 --> 00:00:15,280
é claro, para que as alterações em seu código sejam automaticamente refletidas nos emuladores e

4
00:00:15,340 --> 00:00:18,420
agora vamos ver como podemos começar com isso.

5
00:00:18,460 --> 00:00:23,590
Eu já mencionei no primeiro módulo de curso que o React Native é tudo sobre esses

6
00:00:23,590 --> 00:00:28,870
componentes internos embutidos, como texto e visualização. Uma visão seria o seu div do desenvolvimento da web,

7
00:00:28,870 --> 00:00:32,920
caso você seja um desenvolvedor da Web, o que provavelmente você é, se você conhece o React.

8
00:00:32,920 --> 00:00:34,790
Portanto, é um ótimo componente

9
00:00:34,810 --> 00:00:40,050
contêiner, você pode estilizá-lo como você o vê aqui e pode envolver outro conteúdo nele.

10
00:00:40,240 --> 00:00:44,930
Agora, um texto, por outro lado, é um componente central para a saída de texto,

11
00:00:44,930 --> 00:00:49,870
que é seu objetivo, não está lá para produzir uma imagem, mas sim para produzir texto.

12
00:00:49,870 --> 00:00:55,540
Agora, o que você não pode fazer no React Native e essa é a primeira coisa importante, você não pode, por

13
00:00:55,540 --> 00:00:57,810
exemplo, emitir texto entre uma visualização como essa.

14
00:00:57,910 --> 00:01:04,120
Se tentarmos salvar isso sem esse wrapper de texto, você verá um erro. É a propósito uma tela que você verá

15
00:01:04,120 --> 00:01:09,880
de tempos em tempos quando estiver trabalhando com o React Native, isso lhe dará um

16
00:01:09,880 --> 00:01:15,910
erro, isso explica o que deu errado. Aqui, por exemplo, há uma mensagem de erro bem clara nos dizendo que as strings de

17
00:01:15,910 --> 00:01:17,800
texto devem ser renderizadas dentro do componente de texto e

18
00:01:17,950 --> 00:01:19,330
por que isso é tão importante?

19
00:01:19,330 --> 00:01:21,100
Por que estou enfatizando isso?

20
00:01:21,220 --> 00:01:24,590
Como essa é uma diferença importante para o desenvolvimento da web, você pode

21
00:01:24,610 --> 00:01:27,850
colocar o texto em qualquer lugar. No desenvolvimento web, você

22
00:01:27,970 --> 00:01:35,800
poderia ter um div e entre as tags div de abertura e fechamento, você poderia ter qualquer texto e isso não funcionaria no React

23
00:01:35,800 --> 00:01:41,500
Native, não só porque estamos usando um div que não é suportado lá, mas claro Reagir Native,

24
00:01:41,650 --> 00:01:49,810
você realmente só pode imprimir texto entre tags de texto, então você precisa usar esse componente de texto fornecido pelo React Native para saída de

25
00:01:49,810 --> 00:01:56,530
texto e isso é uma diferença crucial para a web onde você pode jogar seu texto em qualquer lugar e no

26
00:01:56,530 --> 00:02:02,560
React Native, é maneira É mais importante que você use o componente interno correto para o trabalho que deseja

27
00:02:02,560 --> 00:02:09,070
realizar e para o estilo, para configurar um contêiner onde você estrutura um conteúdo diferente, que seria uma exibição, para

28
00:02:09,070 --> 00:02:15,070
a saída de texto, que poderia ser um texto. Para produzir uma imagem, por exemplo, você

29
00:02:15,070 --> 00:02:20,460
terá um componente de imagem. Então é assim que o React Native funciona

30
00:02:20,860 --> 00:02:28,180
e falando de estilo, de layout, a visão tem isso como um trabalho principal, é principalmente lá para aplicar estilos e para

31
00:02:28,450 --> 00:02:31,070
o layout do conteúdo que você tem

32
00:02:31,180 --> 00:02:34,050
lá e falando sobre isso, vamos começar com layout.

33
00:02:34,360 --> 00:02:39,580
Digamos que no nosso aplicativo, queremos ter duas áreas principais aqui na tela. No topo, quero permitir que o usuário insira

34
00:02:39,580 --> 00:02:45,850
um texto e, à direita disso, eu quero ter um botão para confirmar essa escolha e abaixo disso, então essa

35
00:02:45,850 --> 00:02:46,720
é a

36
00:02:46,720 --> 00:02:47,640
primeira parte, a

37
00:02:47,650 --> 00:02:53,110
área de entrada e abaixo disso, temos a segunda parte e essa é a lista de objetivos

38
00:02:53,110 --> 00:02:54,530
que o usuário digitou.

39
00:02:54,550 --> 00:03:00,640
Então, portanto, aqui no aplicativo. js, podemos começar com uma visão de quebra automática,

40
00:03:00,640 --> 00:03:06,280
pois, assim como no React normal, é necessário ter um componente pai e isso normalmente será uma

41
00:03:06,280 --> 00:03:10,590
exibição no React Native, pois isso fornece mais opções de layout e estilo

42
00:03:10,780 --> 00:03:17,910
e dentro dessa visualização. poderíamos ter outra visão para a área de entrada onde nós então adicionamos nossa entrada e abaixo disso,

43
00:03:17,970 --> 00:03:23,860
outra visão para ter nossa lista de objetivos e eu vou me livrar desse texto e é bastante

44
00:03:23,860 --> 00:03:31,350
normal no React Native que você tenha bastante de visualizações aninhadas umas nas outras, para que você possa construir qualquer layout que desejar.

45
00:03:31,380 --> 00:03:38,150
Agora vamos nos livrar deste contêiner por aí e também desta atribuição de estilo e vamos começar

46
00:03:38,150 --> 00:03:40,230
com tudo isso do zero.

47
00:03:40,250 --> 00:03:46,100
Nota importante agora é que cada componente fornecido pelo React Native tem seu próprio trabalho, não há muitos

48
00:03:46,100 --> 00:03:51,560
componentes, mas os que estão lá têm papéis claramente definidos e você constrói sua UI aninhando esses

49
00:03:51,560 --> 00:03:56,510
componentes uns nos outros, dependendo do que Se você quer criar, por exemplo, se você

50
00:03:56,510 --> 00:04:01,550
quer construir um layout, você começa com o aninhamento de alguns pontos de vista e,

51
00:04:01,910 --> 00:04:07,040
em seguida, quando estiver na parte em que deseja produzir o conteúdo, você começará a adicionar

52
00:04:07,250 --> 00:04:14,960
textos e assim por diante. Farei tudo isso nas próximas palestras. Você também pode ir para os documentos oficiais do React Native e, se clicar em Guias,

53
00:04:14,960 --> 00:04:21,740
Componentes e APIs, você terá uma visão geral desses blocos de construção principais. Você encontrará a visão aqui, o texto, a imagem, a entrada

54
00:04:21,740 --> 00:04:27,320
de texto que eu mencionei anteriormente e alguns outros componentes principais e você verá praticamente todos aqueles ou

55
00:04:27,350 --> 00:04:32,720
a maioria daqueles ao longo deste curso e este é um ótimo lugar para mergulhar mais fundo

56
00:04:32,720 --> 00:04:37,370
e aprender mais sobre eles e como você já pode dizer se vai deixar de

57
00:04:37,370 --> 00:04:44,360
fora os que são específicos da plataforma, que são mais focados em nicho, então não há muitos componentes principais, apenas cerca de 10

58
00:04:44,390 --> 00:04:51,110
componentes principais e é assim que o React Native funciona. No entanto, você poderá criar qualquer aplicativo

59
00:04:51,110 --> 00:04:53,690
que quiser, como você verá.