-
Os componentes são parte essenciais
de um projeto Next.
-
Vamos criar um exemplo
de componentes?
-
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 a 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,
como estou declarando a variável nome
-
que recebe "Fiap",
"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?
-
Essa é 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",
um "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 exemplo1,
exemplo2, exemplo3.
-
Se você tirar o nome,
o nome não aparece mais.
-
Se colocar, ele aparece.
-
E estamos na "page.js"
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 import 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.
