< Return to Video

WEB CAP17 2025 VA03 NEXT.JS EXEMPLO DE UM PROJETO

  • 0:08 - 0:11
    Os componentes são parte essenciais
    de um projeto next.
  • 0:11 - 0:13
    Vamos criar o exemplo de components?
  • 0:13 - 0:17
    Precisamos criar uma pasta
    dentro do "src"
  • 0:17 - 0:18
    chamada "components".
  • 0:18 - 0:19
    Então vamos lá.
  • 0:19 - 0:24
    Botão direito, "new folder",
    "components".
  • 0:24 - 0:26
    E agora,
  • 0:26 - 0:29
    botão direito em cima
    de "components", "new file",
  • 0:29 - 0:36
    eu vou criar com a primeira
    letra maiúscula "Exemplo.jsx".
  • 0:36 - 0:40
    Percebam que eu criei na extensão
    "jsx" porque é JavaScript.
  • 0:40 - 0:44
    Com o projeto rodando
    e o seu componente aberto,
  • 0:44 - 0:49
    podemos verificar o que vai
    acontecendo ao executar os comandos.
  • 0:49 - 0:52
    Para você poder criar
    um exemplo de um projeto,
  • 0:52 - 0:56
    você pode digitar o seguinte comando:
    "rafce"
  • 0:56 - 1:01
    que ele já monta sua estrutura
    e já com o exemplo aqui,
  • 1:01 - 1:03
    Vou colar um código de um projeto feito
    anteriormente
  • 1:03 - 1:07
    para ser executado no navegador
    e fazer a manipulação do componente.
  • 1:07 - 1:09
    Com o código colado
    temos a seguinte codificação:
  • 1:09 - 1:13
    Declaração de variáveis,
    onde estou declarando a variável nome
  • 1:13 - 1:16
    que recebe "Fiap",
    por "exemplo1", 2 e 3
  • 1:16 - 1:20
    e cada uma com os seus valores
    em cima do "return".
  • 1:20 - 1:24
    Tudo o que for de JavaScript
    fica em cima do "return"
  • 1:24 - 1:28
    e tudo o que for de html
    abaixo do "return".
  • 1:28 - 1:31
    Isso significa o porquê do jsx,
  • 1:31 - 1:35
    que é a junção de html
    com o JavaScript.
  • 1:35 - 1:38
    Percebam que ele não está
    aparecendo aqui na tela.
  • 1:38 - 1:42
    Ainda continua o "Fiap"
    que eu coloquei no "page".
  • 1:42 - 1:47
    Isso é porque eu não estou
    chamando esse componente "Exemplo".
  • 1:47 - 1:53
    Ele está aqui em "components"
    temos "Exemplo" que é o componente,
  • 1:53 - 1:56
    mas eu não estou chamando ele.
  • 1:56 - 1:58
    Como vamos fazer isso?
  • 1:58 - 2:04
    Bem, em "page.js"
    vamos chamar esse componente,
  • 2:04 - 2:07
    por exemplo,
    "Exemplo"
  • 2:07 - 2:11
    e vou importá-lo.
  • 2:11 - 2:16
    "Import Exemplo".
  • 2:16 - 2:21
    Observem que ao importar no "page.js"
  • 2:21 - 2:25
    "Exemplo" e chamar ele aqui,
    ele já apareceu.
  • 2:25 - 2:32
    Então tudo que estava em exemplo
    agora aparece no nosso navegador.
  • 2:32 - 2:35
    Como:
    "Seja bem-vindo ao next.js".
  • 2:35 - 2:37
    "Lista de vantagens do next".
  • 2:37 - 2:44
    Isso acontece porque o "page"
    está renderizando "Exemplo".
  • 2:44 - 2:47
    Perceberam que foi muito rápido
    essa renderização?
  • 2:47 - 2:49
    Isso é uma das vantagens que o next tem.
  • 2:49 - 2:52
    Então vamos ver
    como ficou o nosso projeto.
  • 2:52 - 2:57
    Temos as declarações em cima do return,
    temos aqui dentro do return,
  • 2:57 - 3:00
    que é o que vai aparecer no seu navegador
  • 3:00 - 3:03
    uma div h1 com o título.
  • 3:03 - 3:07
    Observem que o as chaves com o nome
  • 3:07 - 3:11
    está representando
    o que você declarou aqui em cima.
  • 3:11 - 3:13
    Isso vai acontecer com Exemplo
    um exemplo dois.
  • 3:13 - 3:15
    Exemplo três Se você
  • 3:17 - 3:20
    tirar o nome, o nome não aparece mais.
  • 3:20 - 3:23
    Se colocar ele aparece e
  • 3:24 - 3:27
    estamos na page
  • 3:27 - 3:30
    chamando o componente Exemplo
    com o seu import.
  • 3:30 - 3:32
    Sem ele
  • 3:32 - 3:34
    ele apresenta um erro
  • 3:34 - 3:38
    e trazendo ele novamente
    ele volta a funcionar.
  • 3:38 - 3:40
    Fique atento
    com o importe do seu componente,
  • 3:40 - 3:44
    isso pode lhe trazer erros que o Next
    te ajuda a corrigir no navegador,
  • 3:44 - 3:47
    tornando o seu projeto
    mais rápido e dinâmico.
Title:
WEB CAP17 2025 VA03 NEXT.JS EXEMPLO DE UM PROJETO
Video Language:
Portuguese, Brazilian
Duration:
03:50

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions