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.