1
00:00:02,260 --> 00:00:08,440
Agora, neste curso de atualização, o Module Yeater não escreverá um aplicativo de reação complexo, porque essa simplesmente não

2
00:00:08,440 --> 00:00:10,120
é a idéia deste módulo.

3
00:00:10,630 --> 00:00:17,260
Escreveremos um aplicativo realista no módulo principal mais adiante neste curso, depois deste módulo, onde trabalharemos no

4
00:00:17,260 --> 00:00:18,730
projeto do curso.

5
00:00:18,880 --> 00:00:20,890
Então isso é apenas uma atualização aqui.

6
00:00:21,070 --> 00:00:25,840
E me concentro nos principais elementos de reação, Stael, para e não na criação de um aplicativo incrível.

7
00:00:26,530 --> 00:00:31,870
Portanto, REACT tem tudo a ver com componentes e, portanto, normalmente dividimos nosso aplicativo em componentes.

8
00:00:32,080 --> 00:00:34,300
Agora vamos começar sem dividi-lo.

9
00:00:34,390 --> 00:00:41,320
E, em vez de emitir H uma tecnologia aqui, um aplicativo, usarei uma div, digamos nessa div.

10
00:00:41,710 --> 00:00:43,840
Vamos adicionar mais código h html.

11
00:00:44,050 --> 00:00:50,420
Estou dizendo que h html aqui é claro que é J é X, mas já está traduzido para duas notas do HCM Altidore.

12
00:00:50,500 --> 00:00:50,700
Direita.

13
00:00:50,980 --> 00:00:52,120
Mas é J é X.

14
00:00:53,020 --> 00:01:00,830
Portanto, aqui poderíamos ter H para marcar onde dizemos causar metas e abaixo que queremos ter uma lista ou adicionar uma lista

15
00:01:00,830 --> 00:01:02,950
de nossas metas de curso.

16
00:01:03,180 --> 00:01:04,150
E eles são um objetivo.

17
00:01:04,180 --> 00:01:04,840
Poderia ser.

18
00:01:05,260 --> 00:01:09,460
Pai, queremos terminar o curso.

19
00:01:10,350 --> 00:01:13,560
Que queremos aprender tudo sobre o curso.

20
00:01:17,240 --> 00:01:21,230
Tópico principal e que queremos, digamos, ajudar.

21
00:01:22,920 --> 00:01:25,950
Nossos alunos do curso, CU e.

22
00:01:28,030 --> 00:01:31,890
Uma seção, e isso poderia ser um pouco de ouro.

23
00:01:32,260 --> 00:01:34,060
Agora, uma aplicação muito trivial.

24
00:01:34,240 --> 00:01:39,850
Agora, eu não tenho nenhum estilo espetacular especial aqui, e é por isso que salvamos e divulgamos isso.

25
00:01:39,880 --> 00:01:47,050
Mas agora vou adicionar um pouco de estilo e, para isso, vou adicionar um aplicativo, o arquivo da Sears aqui e importar Deadfall

26
00:01:47,110 --> 00:01:48,370
para o arquivo JavaScript.

27
00:01:48,400 --> 00:01:53,710
Obviamente, isso não é possível em Manila, JavaScript, mas por causa disso, nas ferramentas do Nien, que

28
00:01:53,710 --> 00:01:56,860
Nien analisa nossos arquivos e depois transforma o código.

29
00:01:57,310 --> 00:02:02,740
Isso é possível e isso é simplesmente transformado para injetar esse código CSX no H.

30
00:02:02,740 --> 00:02:03,790
Arquivo Timal também.

31
00:02:04,660 --> 00:02:07,580
Agora aqui, eu darei um C como classe.

32
00:02:07,600 --> 00:02:09,370
E há uma coisa especial.

33
00:02:10,080 --> 00:02:16,500
O atributo de classe como este não existe e J é X porque class é uma palavra-chave em JavaScript.

34
00:02:16,840 --> 00:02:18,160
Então é o nome da classe.

35
00:02:18,190 --> 00:02:21,870
E é assim que você adiciona classes siestas aos elementos e J é X.

36
00:02:22,240 --> 00:02:28,400
Tudo isso, é claro, é uma espécie de prova ou lembra o fato de que esse não é o H Tim.

37
00:02:28,660 --> 00:02:29,320
Mas H Tim.

38
00:02:29,320 --> 00:02:37,630
Sintaxe de aparência coruja, todos nomeados como lista de objetivos de classe aqui e agora, aqui podemos.

39
00:02:39,040 --> 00:02:46,300
Define alguns estilos para o Gollust aqui, e simplesmente definirei a lista como estilo para não aqui, removo uma

40
00:02:46,300 --> 00:02:52,660
margem ou dou uma margem de duas ram superior e inferior e um preenchimento de zero.

41
00:02:53,350 --> 00:03:00,040
E em cada item da lista de objetivos, adicionarei uma margem de um cômodo superior e inferior zero, dois à esquerda e à direita e,

42
00:03:00,460 --> 00:03:03,020
em seguida, simplesmente uma borda de um pixel sólido.

43
00:03:03,040 --> 00:03:07,460
E então esta cor acinzentada aqui e um preenchimento de um carneiro.

44
00:03:07,550 --> 00:03:12,460
Esse é um estilo muito, muito simples, porque eu não quero gastar muito tempo escrevendo escrevendo como

45
00:03:12,520 --> 00:03:13,150
estilos aqui.

46
00:03:13,930 --> 00:03:15,820
Agora, talvez um ajuste.

47
00:03:16,420 --> 00:03:19,810
Vamos realmente dar à lista uma margem de duas faixas em todas as direções.

48
00:03:20,230 --> 00:03:24,310
Agora, temos esta lista de nossos objetivos para ajustar os objetivos do curso aqui no topo.

49
00:03:24,640 --> 00:03:25,990
Eu também vou.

50
00:03:27,750 --> 00:03:30,420
Dê a este d'Hiv um nome de classe, é claro, caveiras.

51
00:03:31,460 --> 00:03:33,050
E então em D. C. como arquivo dos EUA.

52
00:03:34,390 --> 00:03:41,410
Talvez no topo possamos deter as metas do curso e seus d. h para marcar para alinhar no centro.

53
00:03:41,620 --> 00:03:42,220
Bem desse jeito.

54
00:03:43,060 --> 00:03:45,160
Agora, novamente, objetivos muito Euge.

55
00:03:45,190 --> 00:03:47,470
Mas isso é bom para o discurso aqui.

56
00:03:47,650 --> 00:03:49,270
Estamos apenas praticando reagir.

57
00:03:49,780 --> 00:03:51,070
Então, temos essas metas de curso aqui.

58
00:03:51,430 --> 00:03:51,880
Impressionante.

59
00:03:52,450 --> 00:03:54,860
Obviamente, essa é uma marcação muito simples.

60
00:03:55,450 --> 00:04:00,940
Agora, o que você costuma reagir ao dividir isso em mais componentes, por exemplo,

61
00:04:00,940 --> 00:04:07,570
terceiriza essa lista em um componente separado para manter cada componente por si próprio relativamente enxuto e

62
00:04:07,570 --> 00:04:09,640
focado em uma tarefa.

63
00:04:10,180 --> 00:04:14,560
Para isso, podemos adicionar uma pasta sup de componentes aqui na pasta de origem.

64
00:04:15,400 --> 00:04:20,650
E lá vou adicionar uma lista de objetivos J. S. Arquivo.

65
00:04:20,830 --> 00:04:22,960
Isso manterá meu componente da lista de objetivos.

66
00:04:23,620 --> 00:04:27,880
Agora, para criar um novo componente, precisamos primeiro importar, reagir de reagir.

67
00:04:27,940 --> 00:04:30,450
Caso contrário, não podemos usar esse J como X Syntex.

68
00:04:31,000 --> 00:04:32,290
E então eu mencionei morto.

69
00:04:32,290 --> 00:04:33,760
Um componente é uma função.

70
00:04:33,880 --> 00:04:37,660
E, a propósito, você também pode criar com a palavra-chave function ou.

71
00:04:38,710 --> 00:04:42,280
Com uma expressão de função ou.

72
00:04:43,490 --> 00:04:47,480
Com a função Arrow, logo o texto que eu usei antes, era apenas um somático que vou usar aqui,

73
00:04:47,480 --> 00:04:48,680
mas isso não é obrigatório.

74
00:04:49,430 --> 00:04:52,430
E aqui exporto minha lista de objetivos dessa maneira.

75
00:04:52,790 --> 00:04:54,860
E agora aqui, eu volto.

76
00:04:55,920 --> 00:05:01,530
Essa lista não ordenada, sal, recorte aqui e, em seguida, inclua, aqui está um valor de retorno e,

77
00:05:01,530 --> 00:05:07,500
se houver uma reforma, você verá automaticamente esses parênteses serem adicionados ao redor para que possa ser bem formatado

78
00:05:07,680 --> 00:05:08,910
em várias linhas.

79
00:05:08,940 --> 00:05:10,890
Caso contrário, isso não seria JavaScript válido.

80
00:05:11,280 --> 00:05:13,350
O mesmo acontece com os parênteses.

81
00:05:13,350 --> 00:05:16,920
É porque o JavaScript sabe que esse bloco pertence um ao outro.

82
00:05:17,730 --> 00:05:20,170
Então agora temos a lista de objetivos aqui e um aplicativo.

83
00:05:20,430 --> 00:05:24,630
Sim, agora podemos importar nosso componente da lista de objetivos.

84
00:05:24,930 --> 00:05:26,520
Você pode nomear aqui como quiser.

85
00:05:26,790 --> 00:05:29,990
Não precisa ser o mesmo nome com o qual você o exporta aqui.

86
00:05:30,450 --> 00:05:36,720
O importante é que ele comece com um caractere maiúsculo aqui no Abcess e com uma importação da pasta de

87
00:05:36,720 --> 00:05:39,510
componentes e eles sejam da lista de objetivos.

88
00:05:39,780 --> 00:05:43,430
E como mencionei anteriormente, você pode omitir D. extensão de arquivo aqui.

89
00:05:43,620 --> 00:05:44,460
Não é necessário.

90
00:05:45,210 --> 00:05:52,710
E então aqui você usa a lista como um J. regular S. Elemento X, como um elemento H tim L comum, você poderia

91
00:05:52,710 --> 00:05:53,040
dizer.

92
00:05:53,310 --> 00:05:58,890
Mas como não temos conteúdo entre as tags de abertura e fechamento, podemos e precisamos escrever uma tag de fechamento

93
00:05:58,890 --> 00:05:59,460
automático aqui.

94
00:05:59,760 --> 00:06:00,960
Isso não seria permitido.

95
00:06:01,050 --> 00:06:03,280
Você sempre tem que fechar impostos e jazz x.

96
00:06:03,990 --> 00:06:06,240
Portanto, esse seria agora o meu componente da lista de objetivos.

97
00:06:06,630 --> 00:06:10,230
E, portanto, se tivermos segurança, veremos a mesma saída de antes.

98
00:06:10,980 --> 00:06:17,520
Também temos o mesmo estilo, porque os estilos aqui são sempre aplicados globalmente, mesmo que você os importe para um

99
00:06:17,520 --> 00:06:19,140
arquivo de componente específico.

100
00:06:19,590 --> 00:06:26,250
E ainda assim, é uma boa prática configurar os estilos no arquivo CSX ao lado do componente ao qual eles pertencem.

101
00:06:26,520 --> 00:06:28,610
Portanto, adicionarei uma lista de objetivos C como arquivo s.

102
00:06:29,040 --> 00:06:33,210
Adicione minha lista de objetivos Stollsteimer e importe essa lista de objetivos.

103
00:06:33,300 --> 00:06:36,450
O CSX se enquadra no arquivo JavaScript da lista de objetivos.

104
00:06:36,720 --> 00:06:41,580
Isso não é obrigatório, mas facilita a localização dos estilos que pertencem a esse componente.

105
00:06:41,880 --> 00:06:47,160
Lembre-se de que os estilos não têm escopo definido automaticamente para um componente, embora as regras normais como

106
00:06:47,220 --> 00:06:52,860
s sejam aplicadas porque todo esse C é o seguinte, independentemente de onde você os importa, são aplicados globalmente em

107
00:06:52,890 --> 00:06:54,120
toda a página.

108
00:06:54,960 --> 00:06:57,540
Com isso, porém, voltamos ao mesmo resultado de antes.

109
00:06:58,020 --> 00:06:59,220
Então, por que fizemos isso?

110
00:06:59,290 --> 00:07:02,280
E por que dividimos isso se temos o mesmo resultado de antes?