VTEX Store Block course

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

Start free course Join 182 others!

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 8
  1. Getting to know an app on VTEX IO

    In this step, you'll learn how an app's files are organized in VTEX IO and what each field of the manifest.json means

  2. Linking an app and using it on a store's theme

    After modifying something in the app's code, we'll link it and check results on store

  3. Making the countdown block customizable

    Through React's props API, you'll learn how to make blocks configurable with Store Framework

  4. Creating the countdown block feature

    Using React's hooks, we'll finish the countdown block implementation

  5. Modifying the countdown block to have configurable styles

    VTEX IO offers a way to make CSS styling customizable: CSS handles. We'll also see how to work with VTEX Tachyons

  6. Internationalization practices in VTEX IO

    To make our blocks reusable by anyone, we'll make sure to follow good practices of internationalization supported by VTEX IO

  7. Componentizing the countdown block

    To make custom blocks flexible, we must pay attention to the granularity of the visual components of each block

  8. Connecting _backend_ and _frontend_

    Using VTEX catalog data within your component

Share VTEX Store Block course
Average time to complete

268 minutes


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