-
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:
"rafce"
-
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 o código colado
temos a seguinte codificação:
-
Declaração de variáveis,
onde estou declarando a variável nome
-
que recebe "Fiap",
por "exemplo1", 2 e 3
-
e cada uma com os seus valores
em cima do "return".
-
Tudo o que for de JavaScript
fica em cima do "return"
-
e tudo o que for de html
abaixo do "return".
-
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 "Fiap"
que eu coloquei no "page".
-
Isso é porque eu não estou
chamando esse componente "Exemplo".
-
Ele está aqui em "components"
temos "Exemplo" que é o componente,
-
mas eu não estou chamando ele.
-
Como vamos fazer isso?
-
Bem, em "page.js"
vamos chamar esse componente,
-
por exemplo,
"Exemplo"
-
e vou importá-lo.
-
"Import Exemplo".
-
Observem que ao importar no "page.js"
-
"Exemplo" e chamar ele aqui,
ele já apareceu.
-
Então tudo que estava em exemplo
agora aparece no nosso navegador.
-
Como:
"Seja bem-vindo ao next.js".
-
"Lista de vantagens do next".
-
Isso acontece porque o "page"
está renderizando "Exemplo".
-
Perceberam que foi muito rápido
essa renderização?
-
Isso é uma das vantagens que o next 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.
