1
00:00:07,780 --> 00:00:10,944
Os componentes são parte essenciais
de um projeto next.

2
00:00:10,944 --> 00:00:13,012
Vamos criar o exemplo de components?

3
00:00:13,012 --> 00:00:17,202
Precisamos criar uma pasta
dentro do "src"

4
00:00:17,202 --> 00:00:18,485
chamada "components".

5
00:00:18,485 --> 00:00:18,966
Então vamos lá.

6
00:00:18,966 --> 00:00:24,357
Botão direito, "new folder",
"components".

7
00:00:24,357 --> 00:00:25,787
E agora,

8
00:00:25,787 --> 00:00:29,353
botão direito em cima
de "components", "new file",

9
00:00:29,353 --> 00:00:35,802
eu vou criar com a primeira
letra maiúscula "Exemplo.jsx".

10
00:00:35,802 --> 00:00:40,406
Percebam que eu criei na extensão
"jsx" porque é JavaScript.

11
00:00:40,406 --> 00:00:43,943
Com o projeto rodando
e o seu componente aberto,

12
00:00:43,943 --> 00:00:49,315
podemos verificar o que vai
acontecendo ao executar os comandos.

13
00:00:49,315 --> 00:00:52,218
Para você poder criar
um exemplo de um projeto,

14
00:00:52,218 --> 00:00:55,806
você pode digitar o seguinte comando:
"rafce"

15
00:00:55,806 --> 00:01:00,631
que ele já monta sua estrutura
e já com o exemplo aqui,

16
00:01:00,631 --> 00:01:03,363
Vou colar um código de um projeto feito
anteriormente

17
00:01:03,363 --> 00:01:06,541
para ser executado no navegador
e fazer a manipulação do componente.

18
00:01:06,541 --> 00:01:09,497
Com o código colado
temos a seguinte codificação:

19
00:01:09,497 --> 00:01:13,047
Declaração de variáveis,
onde estou declarando a variável nome

20
00:01:13,047 --> 00:01:15,508
que recebe "Fiap",
por "exemplo1", 2 e 3

21
00:01:15,508 --> 00:01:19,619
e cada uma com os seus valores
em cima do "return".

22
00:01:19,619 --> 00:01:23,950
Tudo o que for de JavaScript
fica em cima do "return"

23
00:01:23,950 --> 00:01:27,820
e tudo o que for de html
abaixo do "return".

24
00:01:27,820 --> 00:01:31,190
Isso significa o porquê do jsx,

25
00:01:31,190 --> 00:01:34,627
que é a junção de html
com o JavaScript.

26
00:01:34,627 --> 00:01:37,730
Percebam que ele não está aparecendo
aqui na tela

27
00:01:38,164 --> 00:01:41,467
ainda,
Continua o fiapo que eu coloquei no Pages.

28
00:01:42,368 --> 00:01:46,506
Isso é porque eu não estou
chamando esse componente.

29
00:01:46,506 --> 00:01:49,876
Exemplo Ele está aqui em componentes

30
00:01:50,476 --> 00:01:55,281
temos exemplo e o componente,
mas eu não estou chamando ele.

31
00:01:55,982 --> 00:01:57,750
Como vamos fazer isso?

32
00:01:57,750 --> 00:02:00,686
É bem simples, vamos

33
00:02:02,088 --> 00:02:04,857
chamar esse componente, por exemplo.

34
00:02:04,857 --> 00:02:07,260
Exemplo

35
00:02:07,260 --> 00:02:08,828
e vou

36
00:02:08,828 --> 00:02:11,831
importá lo import.

37
00:02:14,600 --> 00:02:15,968
Exemplo.

38
00:02:15,968 --> 00:02:19,105
Observem que ao importar não tem

39
00:02:20,606 --> 00:02:24,377
exemplo e chamar ele aqui,
ele já apareceu,

40
00:02:24,944 --> 00:02:27,947
então tudo que estava no exemplo

41
00:02:28,214 --> 00:02:30,650
agora aparece

42
00:02:30,650 --> 00:02:32,652
no nosso navegador como?

43
00:02:32,652 --> 00:02:36,656
Seja bem vindo ao NET
Lista de vantagens do Mac.

44
00:02:37,390 --> 00:02:41,761
Isso acontecem
porque o Page está renderizando.

45
00:02:42,328 --> 00:02:45,531
Exemplo Perceberam que foi muito rápido

46
00:02:45,531 --> 00:02:48,601
essa renderização
e foi uma das vantagens que o Mac tem.

47
00:02:48,968 --> 00:02:51,637
Então vamos ver
como ficou o nosso projeto.

48
00:02:51,637 --> 00:02:56,642
Temos as declarações em cima do return,
temos aqui dentro do return,

49
00:02:56,642 --> 00:02:59,645
que é o que vai aparecer no seu navegador

50
00:03:00,279 --> 00:03:03,249
uma div h1 com o título.

51
00:03:03,416 --> 00:03:07,353
Observem que o as chaves com o nome

52
00:03:07,353 --> 00:03:10,756
está representando
o que você declarou aqui em cima.

53
00:03:11,257 --> 00:03:13,492
Isso vai acontecer com Exemplo
um exemplo dois.

54
00:03:13,492 --> 00:03:15,094
Exemplo três Se você

55
00:03:16,629 --> 00:03:19,632
tirar o nome, o nome não aparece mais.

56
00:03:19,832 --> 00:03:22,868
Se colocar ele aparece e

57
00:03:24,303 --> 00:03:26,672
estamos na page

58
00:03:26,672 --> 00:03:30,042
chamando o componente Exemplo
com o seu import.

59
00:03:30,376 --> 00:03:32,445
Sem ele

60
00:03:32,445 --> 00:03:34,313
ele apresenta um erro

61
00:03:34,313 --> 00:03:37,583
e trazendo ele novamente
ele volta a funcionar.

62
00:03:38,084 --> 00:03:40,419
Fique atento
com o importe do seu componente,

63
00:03:40,419 --> 00:03:43,923
isso pode lhe trazer erros que o Next
te ajuda a corrigir no navegador,

64
00:03:44,357 --> 00:03:46,659
tornando o seu projeto
mais rápido e dinâmico.