0:00:07.780,0:00:10.944
Os componentes são parte essenciais[br]de um projeto next.

0:00:10.944,0:00:13.012
Vamos criar o exemplo de components?

0:00:13.012,0:00:17.202
Precisamos criar uma pasta[br]dentro do "src"

0:00:17.202,0:00:18.485
chamada "components".

0:00:18.485,0:00:18.966
Então vamos lá.

0:00:18.966,0:00:24.357
Botão direito, "new folder",[br]"components".

0:00:24.357,0:00:25.787
E agora,

0:00:25.787,0:00:29.353
botão direito em cima[br]de "components", "new file",

0:00:29.353,0:00:35.802
eu vou criar com a primeira[br]letra maiúscula "Exemplo.jsx".

0:00:35.802,0:00:40.406
Percebam que eu criei na extensão[br]"jsx" porque é JavaScript.

0:00:40.406,0:00:43.943
Com o projeto rodando[br]e o seu componente aberto,

0:00:43.943,0:00:49.315
podemos verificar o que vai[br]acontecendo ao executar os comandos.

0:00:49.315,0:00:52.218
Para você poder criar[br]um exemplo de um projeto,

0:00:52.218,0:00:55.806
você pode digitar o seguinte comando:[br]"rafce"

0:00:55.806,0:01:00.631
que ele já monta sua estrutura[br]e já com o exemplo aqui,

0:01:00.631,0:01:03.363
Vou colar um código de um projeto feito[br]anteriormente

0:01:03.363,0:01:06.541
para ser executado no navegador[br]e fazer a manipulação do componente.

0:01:06.541,0:01:09.497
Com o código colado[br]temos a seguinte codificação:

0:01:09.497,0:01:13.047
Declaração de variáveis,[br]onde estou declarando a variável nome

0:01:13.047,0:01:15.508
que recebe "Fiap",[br]por "exemplo1", 2 e 3

0:01:15.508,0:01:19.619
e cada uma com os seus valores[br]em cima do "return".

0:01:19.619,0:01:23.950
Tudo o que for de JavaScript[br]fica em cima do "return"

0:01:23.950,0:01:27.820
e tudo o que for de html[br]abaixo do "return".

0:01:27.820,0:01:31.190
Isso significa o porquê do jsx,

0:01:31.190,0:01:34.627
que é a junção de html[br]com o JavaScript.

0:01:34.627,0:01:37.730
Percebam que ele não está aparecendo[br]aqui na tela

0:01:38.164,0:01:41.467
ainda,[br]Continua o fiapo que eu coloquei no Pages.

0:01:42.368,0:01:46.506
Isso é porque eu não estou[br]chamando esse componente.

0:01:46.506,0:01:49.876
Exemplo Ele está aqui em componentes

0:01:50.476,0:01:55.281
temos exemplo e o componente,[br]mas eu não estou chamando ele.

0:01:55.982,0:01:57.750
Como vamos fazer isso?

0:01:57.750,0:02:00.686
É bem simples, vamos

0:02:02.088,0:02:04.857
chamar esse componente, por exemplo.

0:02:04.857,0:02:07.260
Exemplo

0:02:07.260,0:02:08.828
e vou

0:02:08.828,0:02:11.831
importá lo import.

0:02:14.600,0:02:15.968
Exemplo.

0:02:15.968,0:02:19.105
Observem que ao importar não tem

0:02:20.606,0:02:24.377
exemplo e chamar ele aqui,[br]ele já apareceu,

0:02:24.944,0:02:27.947
então tudo que estava no exemplo

0:02:28.214,0:02:30.650
agora aparece

0:02:30.650,0:02:32.652
no nosso navegador como?

0:02:32.652,0:02:36.656
Seja bem vindo ao NET[br]Lista de vantagens do Mac.

0:02:37.390,0:02:41.761
Isso acontecem[br]porque o Page está renderizando.

0:02:42.328,0:02:45.531
Exemplo Perceberam que foi muito rápido

0:02:45.531,0:02:48.601
essa renderização[br]e foi uma das vantagens que o Mac tem.

0:02:48.968,0:02:51.637
Então vamos ver[br]como ficou o nosso projeto.

0:02:51.637,0:02:56.642
Temos as declarações em cima do return,[br]temos aqui dentro do return,

0:02:56.642,0:02:59.645
que é o que vai aparecer no seu navegador

0:03:00.279,0:03:03.249
uma div h1 com o título.

0:03:03.416,0:03:07.353
Observem que o as chaves com o nome

0:03:07.353,0:03:10.756
está representando[br]o que você declarou aqui em cima.

0:03:11.257,0:03:13.492
Isso vai acontecer com Exemplo[br]um exemplo dois.

0:03:13.492,0:03:15.094
Exemplo três Se você

0:03:16.629,0:03:19.632
tirar o nome, o nome não aparece mais.

0:03:19.832,0:03:22.868
Se colocar ele aparece e

0:03:24.303,0:03:26.672
estamos na page

0:03:26.672,0:03:30.042
chamando o componente Exemplo[br]com o seu import.

0:03:30.376,0:03:32.445
Sem ele

0:03:32.445,0:03:34.313
ele apresenta um erro

0:03:34.313,0:03:37.583
e trazendo ele novamente[br]ele volta a funcionar.

0:03:38.084,0:03:40.419
Fique atento[br]com o importe do seu componente,

0:03:40.419,0:03:43.923
isso pode lhe trazer erros que o Next[br]te ajuda a corrigir no navegador,

0:03:44.357,0:03:46.659
tornando o seu projeto[br]mais rápido e dinâmico.