Os componentes são parte essenciais
de um projeto next.

Vamos criar o exemplo de components?

Precisamos criar uma pasta
dentro do "src"

chamada "components".

Então vamos lá.

Botão direito, "new folder",
"components".

E agora,

botão direito em cima
de "components", "new file",

eu vou criar com a primeira
letra maiúscula "Exemplo.jsx".

Percebam que eu criei na extensão
"jsx" porque é JavaScript.

Com o projeto rodando
e o seu componente aberto,

podemos verificar o que vai
acontecendo ao executar os comandos.

Para você poder criar
um exemplo de um projeto,

você pode digitar o seguinte comando Raff
em C que ele já monta

sua estrutura e já com o exemplo aqui,

vou colar um código de um projeto feito
anteriormente

para ser executado no navegador
e fazer a manipulação do componente

com código colado.

Temos a seguinte
codificação Declaração de variáveis

Como estou declarando a variável nome
que recebe, por exemplo um, dois e três

e cada uma com os seus valores
em cima do retorno.

Tudo o que for de JavaScript
fica em cima do return

e tudo
o que foi de HTML abaixo do retorno.

Isso significa o porquê do JSX,

que é a junção de HTML com o JavaScript.

Percebam que ele não está aparecendo
aqui na tela

ainda,
Continua o fiapo que eu coloquei no Pages.

Isso é porque eu não estou
chamando esse componente.

Exemplo Ele está aqui em componentes

temos exemplo e o componente,
mas eu não estou chamando ele.

Como vamos fazer isso?

É bem simples, vamos

chamar esse componente, por exemplo.

Exemplo

e vou

importá lo import.

Exemplo.

Observem que ao importar não tem

exemplo e chamar ele aqui,
ele já apareceu,

então tudo que estava no exemplo

agora aparece

no nosso navegador como?

Seja bem vindo ao NET
Lista de vantagens do Mac.

Isso acontecem
porque o Page está renderizando.

Exemplo Perceberam que foi muito rápido

essa renderização
e foi uma das vantagens que o Mac tem.

Então vamos ver
como ficou o nosso projeto.

Temos as declarações em cima do return,
temos aqui dentro do return,

que é o que vai aparecer no seu navegador

uma div h1 com o título.

Observem que o as chaves com o nome

está representando
o que você declarou aqui em cima.

Isso vai acontecer com Exemplo
um exemplo dois.

Exemplo três Se você

tirar o nome, o nome não aparece mais.

Se colocar ele aparece e

estamos na page

chamando o componente Exemplo
com o seu import.

Sem ele

ele apresenta um erro

e trazendo ele novamente
ele volta a funcionar.

Fique atento
com o importe do seu componente,

isso pode lhe trazer erros que o Next
te ajuda a corrigir no navegador,

tornando o seu projeto
mais rápido e dinâmico.