-
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 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.
