Developing custom blocks in VTEX IO
View in PortugueseThis content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.
In order to introduce developers to how to build custom blocks in VTEX IO, this course was launched. It complements the necessary concepts, step by step, to have a customized block in a theme, which uses React, Typescript, and GraphQL.
Step 1: Introduction
Introduction to the course
Step 2: 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
Step 3: 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
Step 4: Making the countdown block customizable
Through React's props API, you'll learn how to make blocks configurable with Store Framework
Step 5: Creating the countdown block feature
Using React's hooks, we'll finish the countdown block implementation
Step 6: 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
Step 7: 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
Step 8: Componentizing the countdown block
To make custom blocks flexible, we must pay attention to the granularity of the visual components of each block
Step 9: Connecting backend and frontend
Using VTEX catalog data within your component