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.