Creating a Frontend component

Create a Frontend component

To develop a Frontend component and add it to your website, follow these steps:

1. Create a Frontend component schema.
2. Upload the Frontend component schema to the Studio.
3. Develop the React component.
4. Add the Frontend component to the page version.

Create a Frontend component schema

A Frontend schema contains the following fields:

• tasticType: specifies the identifier for your Frontend component in the following format: <vendor>/<identifier>. For <vendor>, use your company or project name.

• name: specifies how the Frontend component is referenced in the Studio and should be understandable for Studio users. The category and icon are specific schema fields for visualization in the Studio.

• category: (optional) specifies the clustering for the Frontend component in the Studio.

• schema: contains a list of configuration sections, each containing some schema fields.

{
  "tasticType": "example/super-title",
  "name": "Super title",
  "category": "Example",
  "schema": []
}

Upload the Frontend component schema to the Studio

To upload the Frontend component schema to the Studio, follow these steps:

1. From the Studio home page or the left menu, go to Components.

   When developing locally, use the Development environment.

2. Click Create schema.

3. Copy the Frontend component schema you created and paste it into the schema editor.

4. Click Validate.

   If you've included tasticType in your JSON, you don't need to add it to the required field input.

5. Click Publish.

Develop the React component

The React component is rendered on your website based on the configuration set by the Studio users. The component receives the Studio configuration and data source payload as props when rendered on the server-side. You can use these props to implement various UI elements and features in the component. To develop a Frontend component, follow these steps:

1. To create the React component, create a new index.tsx file in the packages/PROJECT_NAME/frontend/frontastic/tastics/ directory. For example, packages/PROJECT_NAME/frontend/frontastic/tastics/example/super-title/index.tsx. Implement a React component and create a default export for it from this file.

   React component implementation for SimpleTitletypescript

   import React from 'react';
   
   const SuperTitleComponent = () => {
     return <h1>This is a super title.</h1>;
   };
   
   export default SuperTitleComponent;

2. To use the Frontend component, register it in the packages/PROJECT_NAME/frontend/frontastic/tastics/index.tsx file. To register the React component, import it and add it to the tastics object, as shown in the following example.

   Register the SimpleTitle Frontend componenttypescript

   // other components
   import SuperTitleComponent from './example/super-title';
   
   export const tastics = {
     // other components
     'example/super-title': SuperTitleComponent,
   };

Add the Frontend component to the page version

Add the Frontend component you created to the page version where you want to render the content. In this example, we add the Super title Frontend component.
The data retrieved from the data source is thus rendered on the page version through the Frontend component.

To add the Frontend components to the page version, follow these steps:

1. If necessary, create a page version. Otherwise, from the Studio home page or the left menu, go to Site builder.

2. Use the page folder list and the status sections to navigate to the page version where you want to add the Frontend component. Then, hold the pointer over the page version and click the Edit icon: the page builder opens.

3. Edit the layout of the page version. In this example, we add a 1/1 layout element to the MAIN layout section.

4. Use the Components pane to find the Frontend component to add, and drag it to the layout element. In this example, drag the Super title Frontend component to the 1/1 layout element.

5. Preview and save your changes. Your Frontend component will now be rendered on your commercetools Frontend website.

Tips to manage Frontend components

Here are a few tips that can help making decisions about Frontend components.

• When you create a Frontend component, start with no configurable options in the schema. As you implement features during development, add configurable fields in the schema only for what needs to be configured in the Studio. In some cases, it can be that nothing will be configurable. For example, the checkout Frontend component does not require configurations from the Studio users because code takes care of the logic.

• Always maintain backward compatibility for configurations. When adding new configurations to an existing Frontend component, keep the new configuration fields optional and set a default value for them.

• Follow the Presentational and Container components pattern. Keep as much business logic outside the Frontend component itself and put that into the container components. Use the Frontend component as a data layer to pass props to the presentational component. It is a good idea to translate the data structure coming from API hub into your semantic data structure to increase the re-use of your components.

• When deciding how to slice up a Frontend component, sometimes it's best to make one big block in the first iteration and refactor only if you need to make smaller parts configurable.
  Think about how it will be used and how it will make sense from a user's point of view. If it makes sense from to make two (or more) smaller Frontend components, you can. But if you're unsure how to split it up, make one big one. It'll save you setup time, and you won't have to think about so many possibilities to account for in your code. You can always cut it down in the future.

Consider each Frontend component on a case-by-case basis. These tips might not work for an individual Frontend component you're creating because it's unique, and that's fine.