WEBVTT

00:00:07.941 --> 00:00:10.944
Os componentes
são parte essenciais de um projeto.

00:00:10.944 --> 00:00:13.012
Vamos criar o exemplo de componentes.

00:00:13.012 --> 00:00:15.482
Precisamos criar uma pastinha

00:00:15.482 --> 00:00:18.485
dentro do src chamada componentes.

00:00:18.485 --> 00:00:21.488
Então o botão direito e o folder.

00:00:22.956 --> 00:00:24.357
Componente.

00:00:24.357 --> 00:00:25.792
E agora?

00:00:25.792 --> 00:00:28.228
Botão direito em cima de componentes.

00:00:28.228 --> 00:00:31.297
Meu filho, eu vou criar
com a primeira letra maiúscula.

00:00:33.333 --> 00:00:35.802
Exemplo Ponto JSX.

00:00:35.802 --> 00:00:39.939
Percebam que eu criei na extensão
JSX porque é JavaScript.

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

00:00:43.943 --> 00:00:48.815
podemos verificar o que vai acontecendo
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:56.523
você pode digitar o seguinte comando Raff
em C que ele já monta

00:00:56.556 --> 00:00:59.559
sua estrutura e já com o exemplo aqui,

00:01:00.727 --> 00:01:03.363
vou colar um código de um projeto feito
anteriormente

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

00:01:06.900 --> 00:01:07.667
com código colado.

00:01:07.667 --> 00:01:10.703
Temos a seguinte
codificação Declaração de variáveis

00:01:11.037 --> 00:01:15.508
Como estou declarando a variável nome
que recebe, por exemplo um, dois e três

00:01:15.508 --> 00:01:19.212
e cada uma com os seus valores
em cima do retorno.

00:01:19.479 --> 00:01:23.650
Tudo o que for de JavaScript
fica em cima do return

00:01:23.950 --> 00:01:27.186
e tudo
o que foi de HTML abaixo do retorno.

00:01:27.820 --> 00:01:30.890
Isso significa o porquê do JSX,

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

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

00:01:38.164 --> 00:01:41.467
ainda,
Continua o fiapo que eu coloquei no Pages.

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

00:01:46.506 --> 00:01:49.876
Exemplo Ele está aqui em componentes

00:01:50.476 --> 00:01:55.281
temos exemplo e o componente,
mas eu não estou chamando ele.

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

00:01:57.750 --> 00:02:00.686
É bem simples, vamos

00:02:02.088 --> 00:02:04.857
chamar esse componente, por exemplo.

00:02:04.857 --> 00:02:07.260
Exemplo

00:02:07.260 --> 00:02:08.828
e vou

00:02:08.828 --> 00:02:11.831
importá lo import.

00:02:14.600 --> 00:02:15.968
Exemplo.

00:02:15.968 --> 00:02:19.105
Observem que ao importar não tem

00:02:20.606 --> 00:02:24.377
exemplo e chamar ele aqui,
ele já apareceu,

00:02:24.944 --> 00:02:27.947
então tudo que estava no exemplo

00:02:28.214 --> 00:02:30.650
agora aparece

00:02:30.650 --> 00:02:32.652
no nosso navegador como?

00:02:32.652 --> 00:02:36.656
Seja bem vindo ao NET
Lista de vantagens do Mac.

00:02:37.390 --> 00:02:41.761
Isso acontecem
porque o Page está renderizando.

00:02:42.328 --> 00:02:45.531
Exemplo Perceberam que foi muito rápido

00:02:45.531 --> 00:02:48.601
essa renderização
e foi uma das vantagens que o Mac tem.

00:02:48.968 --> 00:02:51.637
Então vamos ver
como ficou o nosso projeto.

00:02:51.637 --> 00:02:56.642
Temos as declarações em cima do return,
temos aqui dentro do return,

00:02:56.642 --> 00:02:59.645
que é o que vai aparecer no seu navegador

00:03:00.279 --> 00:03:03.249
uma div h1 com o título.

00:03:03.416 --> 00:03:07.353
Observem que o as chaves com o nome

00:03:07.353 --> 00:03:10.756
está representando
o que você declarou aqui em cima.

00:03:11.257 --> 00:03:13.492
Isso vai acontecer com Exemplo
um exemplo dois.

00:03:13.492 --> 00:03:15.094
Exemplo três Se você

00:03:16.629 --> 00:03:19.632
tirar o nome, o nome não aparece mais.

00:03:19.832 --> 00:03:22.868
Se colocar ele aparece e

00:03:24.303 --> 00:03:26.672
estamos na page

00:03:26.672 --> 00:03:30.042
chamando o componente Exemplo
com o seu import.

00:03:30.376 --> 00:03:32.445
Sem ele

00:03:32.445 --> 00:03:34.313
ele apresenta um erro

00:03:34.313 --> 00:03:37.583
e trazendo ele novamente
ele volta a funcionar.

00:03:38.084 --> 00:03:40.419
Fique atento
com o importe do seu componente,

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

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