Frontend components overview

Frontend components are at the heart of commercetools Frontend. They are configurable and reusable elements used to construct the structure of website pages. These components are React components that include a schema. Developers create them, making them available in the Studio for business users to design website page layouts. commercetools Frontend also provides a Frontend component library for common commerce use cases, such as product listings, details pages, cart, and checkout.

You can create various Frontend components and then use them to build your commerce site.

A Frontend component is made up of a definition from the Studio, the corresponding frontend code, and the required data from an API.

A Frontend component always consists of 2 parts:

A JavaScript entry point which is a ReactJS (JSX/TSX) component that receives some special props
A JSON file that defines which data the Frontend component requires and how this should be configurable in the Studio, we call this JSON file the schema

Each Frontend component should have their own folder that contains these two files. The folder location should be in the packages/<project>/frontend/frontastic/tastics folder, or for the Store Launchpad for B2B Manufacturing, in the /frontend/src/lib/tastics folder.

In the articles in this section, you'll learn how to develop a Frontend component step by step.

Frontend components are called tastics in code for short.