WEBVTT

00:00:07.780 --> 00:00:10.864
Os componentes são parte essenciais
de um projeto Next.

00:00:10.864 --> 00:00:12.558
Vamos criar um exemplo 
de componentes?

00:00:12.558 --> 00:00:17.202
Precisamos criar uma pasta
dentro do "src"

00:00:17.202 --> 00:00:18.435
chamada "components".

00:00:18.435 --> 00:00:19.030
Então, vamos lá.

00:00:19.030 --> 00:00:24.357
Botão direito, 
"new folder", "components".

00:00:24.357 --> 00:00:25.787
E agora,

00:00:25.787 --> 00:00:29.353
botão direito em cima
de "components", "new file",

00:00:29.353 --> 00:00:35.802
eu vou criar com a primeira
letra maiúscula "Exemplo.jsx".

00:00:35.802 --> 00:00:40.406
Percebam que eu criei na extensão
"jsx" porque é JavaScript.

00:00:40.406 --> 00:00:43.903
Com o projeto rodando
e o seu componente aberto,

00:00:43.903 --> 00:00:46.715
podemos verificar o que vai
acontecendo

00:00:46.715 --> 00:00:49.315
ao executar os comandos.

00:00:49.315 --> 00:00:52.218
Para você poder criar
um exemplo de um projeto,

00:00:52.218 --> 00:00:55.806
você pode digitar o seguinte comando:
"rafce",

00:00:55.806 --> 00:01:00.631
que ele já monta a sua estrutura
e já com o exemplo aqui.

00:01:00.631 --> 00:01:03.363
Vou colar um código de um projeto 
feito anteriormente

00:01:03.363 --> 00:01:06.513
para ser executado no navegador
e fazer a manipulação do componente.

00:01:06.513 --> 00:01:09.497
Com o código colado 
temos a seguinte codificação,

00:01:09.497 --> 00:01:13.047
declaração de variáveis,
como estou declarando a variável nome

00:01:13.047 --> 00:01:15.508
que recebe "Fiap",
"exemplo1", "2" e "3"

00:01:15.508 --> 00:01:19.619
e cada uma com os seus valores
em cima do "return".

00:01:19.619 --> 00:01:23.950
Tudo o que for de JavaScript
fica em cima do "return"

00:01:23.950 --> 00:01:27.820
e tudo o que for de html,
abaixo do "return".

00:01:27.820 --> 00:01:31.190
Isso significa o porquê do jsx,

00:01:31.190 --> 00:01:34.627
que é a junção de html
com o JavaScript.

00:01:34.627 --> 00:01:38.164
Percebam que ele não está
aparecendo aqui na tela.

00:01:38.164 --> 00:01:42.368
Ainda continua o "Fiap"
que eu coloquei no "page".

00:01:42.368 --> 00:01:47.336
Isso é porque eu não estou
chamando esse componente "exemplo".

00:01:47.336 --> 00:01:51.796
Ele está aqui em "components"
temos "exemplo",

00:01:51.796 --> 00:01:55.982
que é o componente,
mas eu não estou chamando ele.

00:01:55.982 --> 00:01:58.120
Como vamos fazer isso?

00:01:58.120 --> 00:02:04.188
Bem, em "page.js",
vamos chamar esse componente,

00:02:04.188 --> 00:02:07.260
por exemplo,
"Exemplo"

00:02:07.260 --> 00:02:10.518
e vou importá-lo.

00:02:10.518 --> 00:02:15.968
"Import Exemplo".

00:02:15.968 --> 00:02:20.606
Observem que ao importar no "page.js",

00:02:20.606 --> 00:02:24.944
"Exemplo" e chamar ele aqui,
ele já apareceu.

00:02:24.944 --> 00:02:32.322
Então tudo que estava em exemplo
agora aparece no nosso navegador.

00:02:32.322 --> 00:02:34.889
Como: "seja bem-vindo ao next.js".

00:02:34.889 --> 00:02:37.390
"Lista de vantagens do next".

00:02:37.390 --> 00:02:43.508
Isso acontece porque o "page"
está renderizando "exemplo".

00:02:43.508 --> 00:02:46.811
Perceberam que foi muito rápido
essa renderização?

00:02:46.811 --> 00:02:48.772
Essa é uma das vantagens 
que o Next tem.

00:02:48.772 --> 00:02:51.342
Então vamos ver
como ficou o nosso projeto.

00:02:51.342 --> 00:02:55.023
Temos as declarações 
em cima do "return",

00:02:55.023 --> 00:02:56.569
temos aqui dentro do return,

00:02:56.569 --> 00:03:00.199
que é o que vai aparecer
no seu navegador

00:03:00.199 --> 00:03:03.416
uma "div",
um "h1" com o título.

00:03:03.416 --> 00:03:09.163
Observem que o as chaves
com o nome está representando

00:03:09.163 --> 00:03:11.257
o que você declarou aqui em cima.

00:03:11.257 --> 00:03:14.377
Isso vai acontecer com exemplo1,
exemplo2, exemplo3.

00:03:14.377 --> 00:03:19.832
Se você tirar o nome,
o nome não aparece mais.

00:03:19.832 --> 00:03:22.628
Se colocar, ele aparece.

00:03:22.628 --> 00:03:29.062
E estamos na "page.js"
chamando o componente "Exemplo"

00:03:29.062 --> 00:03:30.326
com o seu import.

00:03:30.326 --> 00:03:34.313
Sem ele,
ele apresenta um erro.

00:03:34.313 --> 00:03:37.957
E trazendo ele novamente
ele volta a funcionar.

00:03:37.957 --> 00:03:40.419
Fique atento
com o import do seu componente,

00:03:40.419 --> 00:03:44.357
isso pode lhe trazer erros que o next
te ajuda a corrigir no navegador,

00:03:44.357 --> 00:03:46.827
tornando o seu projeto
mais rápido e dinâmico.