Mini Curso Gratuito - Conhecendo o Framework Gatsby

GatsbyJS

O Gatsby é open source e foi desenvolvido usando o ReactJS como base.

As soluções desenvolvidas a partir do Gatsby têm como características o alto desempenho, escabalabilidade, segurança, tudo já integrado fornecido pelo Gatsby.

O que faremos neste mini curso é trilhar um tutorial do Gatsby para conhecermos os principais recursos e as boas práticas na criação de projetos com o Gatsby.

Devemos ter cerca de 12 vídeos até o final dessa jornada e espero que seja útil para aqueles que desejam conhecer esse framework e já sair criando sites e apps a partir desse ponto.

Então, chega de bate-papo é bora para a prática!

Instale o Node.js para o seu sistema operacional apropriado

Node.js é um ambiente que pode executar código JavaScript fora de um navegador da web. Gatsby é construído com Node.js. Para começar a usar o Gatsby, você precisará ter uma versão recente instalada em seu computador.

Instale Git

Git é um sistema de controle de versão distribuído gratuitamente e de código aberto projetado para lidar com tudo, desde projetos pequenos a muito grandes com velocidade e eficiência. Quando você instala um site do Gatsby, ele usa o Git nos bastidores para baixar e instalar os arquivos necessários para o seu inicializador. Você precisará ter o Git instalado para configurar seu primeiro site Gatsby.

Usando a CLI Gatsby

A ferramenta Gatsby CLI permite que você crie rapidamente novos sites Gatsby e execute comandos para desenvolver sites Gatsby. É um pacote npm publicado.

A CLI Gatsby está disponível via npm e deve ser instalada globalmente executando:

npm install -g gatsby-cli

Veja os comandos disponíveis com o Gatsby:

gatsby --help

Crie um site Gatsby

Agora você está pronto para usar a ferramenta Gatsby CLI para criar seu primeiro site Gatsby. Usando a ferramenta, você pode baixar “starters” (sites parcialmente construídos com alguma configuração padrão) para ajudá-lo a agilizar a criação de um determinado tipo de site. O iniciador “Hello World” que você usará aqui é um iniciador com os fundamentos básicos necessários para um site Gatsby.

gatsby new meu-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Mude para o diretório de trabalho:

cd meu-site

Inicie o modo de desenvolvimento:

gatsby develop

Este comando inicia um servidor de desenvolvimento. Você poderá ver e interagir com seu novo site em um ambiente de desenvolvimento - local (no seu computador, não publicado na internet).

Abra uma nova guia em seu navegador e navegue até http://localhost:8000/.

Pronto! Este é o começo do seu primeiro site Gatsby! 👏🏽👏🏽👏🏽

Você poderá visitar o site localmente em http://localhost:8000/ enquanto o seu servidor de desenvolvimento estiver em execução. Esse é o processo que você iniciou executando o comando gatsby develop. Para interromper a execução desse processo, volte para a janela do terminal, mantenha pressionada a tecla “control” e pressione “c” (ctrl-c). Para iniciá-lo novamente, execute gatsby develop novamente.

Se você estiver usando uma configuração de máquina virtual ou preferir executar o servidor de desenvolvimento em seu endereço IP local, execute gatsby develop --host=0.0.0.0. Agora, o servidor de desenvolvimento escuta em ambos http://localhost e no seu IP local.

Configure um editor de código

Um editor de código é um programa projetado especificamente para editar código de computador. Existem muitos grandes por aí. Recomendamos a utilização do Visual Studio Code.

Playlist no Youtube deste Curso de Gatsby

Este mini curso está disponível no Youtube através da playlist no link abaixo. Acesse lá, se inscreva no canal e acompanhe as novidades que estarei disponibilizando lá.

Playlist Tutorial Gatsby: https://www.youtube.com/watch?v=ePSbIULH_4U&list=PLE0DHiXlN_qpnXhB6h4_1H1yWcoVJJwFJ

Referência: https://gatsbyjs.com