Anterior

Avançar

Exercício – Criar um aplicativo estático com o Gatsby

Concluído

Nesta unidade, você criará um aplicativo Gatsby e adicionará uma página única a ele.

Instalar o Gatsby

Execute o comando a seguir em um terminal para instalar o Gatsby globalmente no sistema:

npm install -g gatsby-cli

Criar e executar um site do Gatsby

Todos os projetos Gatsby são criados pela CLI do Gatsby. A CLI é capaz de ajudar você a fazer o scaffolding de um novo projeto Gatsby, hospedá-lo e compilar o produto final, que é um conjunto estático de arquivos que você pode implantar em qualquer host estático que desejar.

Criar um aplicativo Gatsby

Agora, crie um aplicativo Gatsby digitando o seguinte comando no terminal:

gatsby new myApp

gatsby new cria um aplicativo Gatsby, no qual você pode começar a adicionar páginas de conteúdo.

Executar o Gatsby

Para começar a desenvolver com o Gatsby, você precisa navegar até o diretório do projeto antes de iniciar o servidor de desenvolvimento.

Execute os seguintes comandos para ir para a pasta do projeto e iniciar o servidor:

cd myApp
gatsby develop

A seguinte saída deve ser exibida no terminal:

You can now view gatsby-starter-default in the browser.
  http://localhost:8000.
View GraphQL, an in-browser IDE, to explore your site's data and schema
  http://localhost:8000/___graphql

Agora, abra um navegador e navegue até http://localhost:8000.

Caso a mensagem acima seja exibida, você criou com sucesso o primeiro aplicativo Gatsby. Parabéns!

Adicionar um componente de página

Agora, você criará um componente para o qual você pode navegar no navegador: um componente de página.

1. Abra a pasta do projeto "myApp" no Visual Studio Code. Encontre o diretório pages/.

   

2. Crie um arquivo e nomeie-o about.js. Dê ao arquivo o seguinte conteúdo:

   import React from 'react';
   import { Link } from 'gatsby';
   
   export default () => (
     <React.Fragment>
       <div>About page</div>
       <Link to="/">Back to home</Link>
     </React.Fragment>
   )
   

O código acima cria um componente de apresentação que só pode mostrar dados. Esse componente simplesmente renderiza o texto "Sobre a página" e um link que aponta para a raiz do aplicativo.

Depois de colar o código e salvá-lo no arquivo about.js, o servidor de desenvolvimento recompilará o aplicativo automaticamente. Se você visitar agora http://localhost:8000/about, verá o seguinte conteúdo renderizado:

Você conseguiu sua primeira página! Agora você pode ver como qualquer componente colocado no diretório /pages pode ser navegado.

Continuar