VTEX Store Block course

Using React and Graphql, you can export your components as VTEX blocks

Start free course

social preview

Learn how to create custom blocks on VTEX Store Framework

Using React, Typescript, Node.js and GraphQL, you'll learn what it takes to create magnificent custom experiences for VTEX IO Stores!

Steps to complete this course 12
  1. Conhecendo uma app VTEX IO

    Neste passo, você irá aprender como se organizam os arquivos em uma app VTEX IO e o que cada campo no manifest.json significa

  2. Linkando uma app e utilizando-a no tema da loja

    Após modificar algo no código da app, iremos linká-la e verificar o resultado na loja, após haver adicionado a app no tema

  3. Tornando o bloco countdown customizável

    Através da API de props do React, você aprendenrá como tornar seus blocos configuráveis com o Store Framework

  4. Criando a funcionalidade do bloco countdown

    Utilizando os hooks do React.js, iremos finalizar a implementação do bloco countdown

  5. Modificando o bloco countdown para ter um estilo configurável

    O VTEX IO oferece uma maneira para seus blocos poderem ter um estilo CSS customizável: CSS Handles. Também veremos sobre a biblioteca de CSS funcional Tachyons

  6. Práticas de internacionalização no VTEX IO

    Para que os nossos blocos sejam usados por todo mundo, deveremos nos atentar às boas práticas de internacionalização suportadas pelo VTEX IO

  7. Componentizando o bloco countdown

    Para que os blocos que criamos sejam flexíveis, devemos atentar a granularidade dos componentes visuais de cada bloco.

  8. O que é GraphQL?

    Utilizado por todo VTEX IO, GraphQL é uma tecnologia essencial para criação de funcionalidades complexas nas lojas do VTEX IO

  9. Definindo um resolver GraphQL

    Neste passo você aprender o que é um resolver GraphQL e como definí-lo em sua app

  10. Definindo um client no VTEX IO

    Para se comunicar com outras apps VTEX ou serviços externos, neste passo você aprenderá como criar um client

  11. Criando um bloco GIF

    Mapeando interface para um novo componente

  12. Conectando back-end e front-end

    Extraindo o GIF da API do Giphy

Share VTEX Store Block course
Average time to complete

327 minutes

Free

All public courses on Learning Lab are free.

Latest release

What is GitHub Learning Lab?

Learn new skills by completing fun, realistic projects in your very own GitHub repository.

Ready to start learning?

Start VTEX Store Block course