-
Os componentes
são parte essenciais de um projeto.
-
Vamos criar o exemplo de componentes.
-
Precisamos criar uma pastinha
-
dentro do src chamada componentes.
-
Então o botão direito e o folder.
-
Componente.
-
E agora?
-
Botão direito em cima de componentes.
-
Meu filho, eu vou criar
com a primeira letra maiúscula.
-
Exemplo Ponto 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.
