1
00:00:02,380 --> 00:00:07,720
Então aprendemos que precisamos indicar o Transvaal e posso dizer que esse arquivo no final inclui Decode,

2
00:00:07,720 --> 00:00:09,280
que é executado primeiro.

3
00:00:09,310 --> 00:00:16,300
Quando iniciamos nosso aplicativo e isso torna essa coisa estranha no lugar desse d'Hiv aqui.

4
00:00:16,780 --> 00:00:19,480
Agora, o que é essa coisa estranha de aplicativo aqui.

5
00:00:20,170 --> 00:00:24,920
Reimportando o aplicativo deste arquivo de aplicativo indiano do arquivo Shreyas do aplicativo.

6
00:00:24,970 --> 00:00:27,640
Porque as extensões são adicionadas automaticamente às importações.

7
00:00:28,410 --> 00:00:31,360
Caro, o que temos é no final uma função JavaScript.

8
00:00:31,510 --> 00:00:35,200
Esta é uma função regular, uma função de seta armazenada e é constante.

9
00:00:35,620 --> 00:00:40,330
E então exportamos essa constante e, portanto, é uma função bastante direta.

10
00:00:40,540 --> 00:00:43,120
Mas a coisa dentro da função não é direta.

11
00:00:43,530 --> 00:00:50,770
O que retornamos aqui parece com idade, Timal, assim como com idade html, mas está em um arquivo

12
00:00:50,770 --> 00:00:51,250
JavaScript.

13
00:00:51,250 --> 00:00:52,480
Não pode ser h html.

14
00:00:52,540 --> 00:00:52,750
Certo.

15
00:00:52,780 --> 00:00:55,330
Você não pode adicionar h html em um arquivo JavaScript.

16
00:00:56,230 --> 00:00:59,330
Essa é uma sintaxe especial inventada pela equipe React.

17
00:00:59,350 --> 00:01:01,090
É chamado J como X ..

18
00:01:01,480 --> 00:01:08,530
E isso permite que H envie um e-mail com código de busca em arquivos JavaScript em baixo do capô.

19
00:01:08,560 --> 00:01:14,350
Isso será traduzido para instruções que o Reaction entende em detalhes.

20
00:01:14,380 --> 00:01:24,160
Este ano é semelhante ao elemento de criação de reação, um método fornecido neste objeto de reação aqui e depois aqui.

21
00:01:25,480 --> 00:01:26,320
Idade um.

22
00:01:27,100 --> 00:01:27,970
E então aqui.

23
00:01:30,190 --> 00:01:30,760
Não.

24
00:01:31,130 --> 00:01:32,390
Ou um objeto vazio.

25
00:01:32,750 --> 00:01:36,860
E depois há um terceiro argumento, seu texto aqui, por exemplo.

26
00:01:36,950 --> 00:01:37,520
Oi.

27
00:01:38,510 --> 00:01:40,020
Isso é reagir.

28
00:01:42,050 --> 00:01:45,650
Texto diferente do que antes, mas renderizará algo semelhante na tela.

29
00:01:46,220 --> 00:01:49,040
Isso produzirá o mesmo resultado e eu posso provar isso para você.

30
00:01:49,400 --> 00:01:55,430
Se simplesmente iniciarmos o servidor de desenvolvimento e tentarmos ver esse aplicativo e ação para iniciá-lo e o pacote para perseguir

31
00:01:55,430 --> 00:01:59,480
o arquivo, encontraremos um script para iniciar o script, que já existe lá.

32
00:01:59,870 --> 00:02:02,000
E isso, no final, usará essas ferramentas.

33
00:02:02,030 --> 00:02:07,310
Eu mencionei anteriormente para transformar nosso código e iniciar um servidor de desenvolvimento que recarrega

34
00:02:07,310 --> 00:02:10,640
automaticamente ou injeta alterações quando alteramos alguma coisa.

35
00:02:11,210 --> 00:02:15,710
Então, aqui podemos abrir um novo terminal integrado a essa idéia.

36
00:02:17,040 --> 00:02:20,110
E eles estão no NPM começam a abrir esse servidor de desenvolvimento.

37
00:02:20,500 --> 00:02:25,510
E você deve manter esse servidor em funcionamento enquanto estiver trabalhando no seu código, porque ao

38
00:02:25,510 --> 00:02:29,050
fechá-lo, você não pode mais visualizar sua página, seu aplicativo.

39
00:02:29,980 --> 00:02:34,750
Agora, quando você inicia este servidor, quando executa o npm start, ele deve abrir automaticamente uma

40
00:02:34,750 --> 00:02:36,910
nova guia no navegador no localhost 3000.

41
00:02:37,150 --> 00:02:41,320
Se isso não acontecer por conta própria e visitado e querido, você deve ver se esconder.

42
00:02:41,350 --> 00:02:44,560
Isso é reação, que é claramente o texto que eu inseri aqui.

43
00:02:45,430 --> 00:02:51,970
Então, no final deste ano, é o React Syntex, e poderíamos escrever nosso aplicativo inteiro com essa sintaxe.

44
00:02:52,180 --> 00:02:57,760
Mas isso fica muito complicado, especialmente se começarmos a aninhar elementos um no outro.

45
00:02:58,270 --> 00:03:05,170
É por isso que o React nos dá essa alternativa J. S. A sintaxe X, que no final é traduzida para

46
00:03:05,170 --> 00:03:07,930
reagir, cria um elemento e depois o que eu acabei de mostrar.

47
00:03:08,380 --> 00:03:13,420
É também por isso que precisamos importar reagir aqui, mesmo que pareça que não estamos usando esse objeto reagir

48
00:03:13,450 --> 00:03:15,070
em nenhum lugar deste arquivo.

49
00:03:15,150 --> 00:03:15,340
Certo.

50
00:03:15,430 --> 00:03:18,280
Temos que reagir ao texto aqui, mas isso é algo diferente.

51
00:03:18,610 --> 00:03:20,470
Portanto, não o estamos usando em nenhum lugar deste arquivo.

52
00:03:20,710 --> 00:03:24,820
Bem, é usado implicitamente porque é apenas açúcar sintático.

53
00:03:24,940 --> 00:03:28,090
No final, é traduzido para essa sintaxe óbvia.

54
00:03:28,180 --> 00:03:28,780
Eu te mostrei.

55
00:03:29,230 --> 00:03:31,060
E é disso que se trata o reator.

56
00:03:31,450 --> 00:03:34,090
Dizemos para reagir quais elementos ele deve renderizar.

57
00:03:34,420 --> 00:03:40,300
E sob o capô, então, traduziremos isso em comandos que o DOM entende, que o

58
00:03:40,300 --> 00:03:43,270
navegador entende para renderizar elementos DOM reais.

59
00:03:43,900 --> 00:03:49,840
Agora, por exemplo, se eu adicionar o título aqui, o que nos dá essa dica de ferramenta embutida no navegador,

60
00:03:49,840 --> 00:03:50,320
basicamente.

61
00:03:51,580 --> 00:03:54,130
Isso funciona e eu salvo isso.

62
00:03:54,550 --> 00:03:55,540
Recarrega automaticamente.

63
00:03:55,570 --> 00:03:58,360
Você não precisa fazer isso sozinho e agora deve passar o mouse sobre isso.

64
00:03:58,570 --> 00:03:59,590
Você vê esta dica de ferramenta.

65
00:03:59,740 --> 00:04:04,000
Isso funciona muito pequeno aqui, mas você pode ver se testar isso em seu próprio sistema.

66
00:04:04,940 --> 00:04:11,600
Agora, isso funciona porque o pai, no final, é traduzido para reagir, criar elemento.

67
00:04:13,650 --> 00:04:17,750
A idade um, então objeta, que nós julgamos deixado vazio aqui.

68
00:04:18,150 --> 00:04:24,090
Definimos os atributos ou as propriedades que queremos definir nesse nó DOM, que é criado aqui, neste

69
00:04:24,090 --> 00:04:26,310
caso, título dois, isso funciona.

70
00:04:26,520 --> 00:04:28,380
E então, a seguir, temos o texto.

71
00:04:28,740 --> 00:04:30,270
É assim que isso funciona e reage.

72
00:04:30,270 --> 00:04:31,510
Faremos tudo o que for necessário.

73
00:04:31,530 --> 00:04:32,820
Ele criará esse elemento.

74
00:04:33,210 --> 00:04:36,180
Ele definirá todas essas propriedades ou atributos aqui.

75
00:04:36,540 --> 00:04:38,950
E renderizará o último argumento aqui.

76
00:04:39,270 --> 00:04:40,890
Dentro desse elemento criado.

77
00:04:41,310 --> 00:04:47,340
E essa também é a parte em que J é o código X nos ajuda, porque se aqui temos,

78
00:04:47,430 --> 00:04:49,290
digamos, outro elemento H html.

79
00:04:49,620 --> 00:04:56,010
Teríamos que aninhar várias reações, criar chamadas de elementos uma para a outra, o que rapidamente se torna muito

80
00:04:56,340 --> 00:04:57,510
difícil de gerenciar.

81
00:04:57,540 --> 00:05:00,200
É por isso que é o índice J é X.

82
00:05:00,210 --> 00:05:02,460
Aqui está uma ótima idéia, uma grande invenção.

83
00:05:03,000 --> 00:05:05,980
Então, usaremos a sintaxe e também usamos aqui no Índice J.

84
00:05:05,980 --> 00:05:06,320
S.

85
00:05:06,570 --> 00:05:10,640
A diferença é que aqui não o usamos com um H. normal

86
00:05:10,690 --> 00:05:11,850
Elemento Dom Timal.

87
00:05:12,180 --> 00:05:20,520
Mas, em vez disso, aqui usamos a função personalizada, porque estamos usando o que é exportado na abertura como arquivo.

88
00:05:21,060 --> 00:05:24,180
E o que exportamos existe uma função JavaScript normal.

89
00:05:24,840 --> 00:05:29,060
Bem, esse é um dos conceitos mais importantes dos componentes de reação.