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

2
00:00:10,864 --> 00:00:12,558
Vamos criar um exemplo 
de componentes?

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

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

5
00:00:18,435 --> 00:00:19,030
Então, vamos lá.

6
00:00:19,030 --> 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,903
Com o projeto rodando
e o seu componente aberto,

12
00:00:43,903 --> 00:00:46,715
podemos verificar o que vai
acontecendo

13
00:00:46,715 --> 00:00:49,315
ao executar os comandos.

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

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

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

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

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

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

20
00:01:09,497 --> 00:01:13,047
declaração de variáveis,
como estou declarando a variável nome

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

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

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

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

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

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

27
00:01:34,627 --> 00:01:38,164
Percebam que ele não está
aparecendo aqui na tela.

28
00:01:38,164 --> 00:01:42,368
Ainda continua o "Fiap"
que eu coloquei no "page".

29
00:01:42,368 --> 00:01:47,336
Isso é porque eu não estou
chamando esse componente "exemplo".

30
00:01:47,336 --> 00:01:51,796
Ele está aqui em "components"
temos "exemplo",

31
00:01:51,796 --> 00:01:55,982
que é o componente,
mas eu não estou chamando ele.

32
00:01:55,982 --> 00:01:58,120
Como vamos fazer isso?

33
00:01:58,120 --> 00:02:04,188
Bem, em "page.js",
vamos chamar esse componente,

34
00:02:04,188 --> 00:02:07,260
por exemplo,
"Exemplo"

35
00:02:07,260 --> 00:02:10,518
e vou importá-lo.

36
00:02:10,518 --> 00:02:15,968
"Import Exemplo".

37
00:02:15,968 --> 00:02:20,606
Observem que ao importar no "page.js",

38
00:02:20,606 --> 00:02:24,944
"Exemplo" e chamar ele aqui,
ele já apareceu.

39
00:02:24,944 --> 00:02:32,322
Então tudo que estava em exemplo
agora aparece no nosso navegador.

40
00:02:32,322 --> 00:02:34,889
Como: "seja bem-vindo ao next.js".

41
00:02:34,889 --> 00:02:37,390
"Lista de vantagens do next".

42
00:02:37,390 --> 00:02:43,508
Isso acontece porque o "page"
está renderizando "exemplo".

43
00:02:43,508 --> 00:02:46,811
Perceberam que foi muito rápido
essa renderização?

44
00:02:46,811 --> 00:02:48,772
Essa é uma das vantagens 
que o Next tem.

45
00:02:48,772 --> 00:02:51,342
Então vamos ver
como ficou o nosso projeto.

46
00:02:51,342 --> 00:02:55,023
Temos as declarações 
em cima do "return",

47
00:02:55,023 --> 00:02:56,569
temos aqui dentro do return,

48
00:02:56,569 --> 00:03:00,199
que é o que vai aparecer
no seu navegador

49
00:03:00,199 --> 00:03:03,416
uma "div",
um "h1" com o título.

50
00:03:03,416 --> 00:03:09,163
Observem que o as chaves
com o nome está representando

51
00:03:09,163 --> 00:03:11,257
o que você declarou aqui em cima.

52
00:03:11,257 --> 00:03:14,377
Isso vai acontecer com exemplo1,
exemplo2, exemplo3.

53
00:03:14,377 --> 00:03:19,832
Se você tirar o nome,
o nome não aparece mais.

54
00:03:19,832 --> 00:03:22,628
Se colocar, ele aparece.

55
00:03:22,628 --> 00:03:29,062
E estamos na "page.js"
chamando o componente "Exemplo"

56
00:03:29,062 --> 00:03:30,326
com o seu import.

57
00:03:30,326 --> 00:03:34,313
Sem ele,
ele apresenta um erro.

58
00:03:34,313 --> 00:03:37,957
E trazendo ele novamente
ele volta a funcionar.

59
00:03:37,957 --> 00:03:40,419
Fique atento
com o import do seu componente,

60
00:03:40,419 --> 00:03:44,357
isso pode lhe trazer erros que o next
te ajuda a corrigir no navegador,

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