Skip to main content
Experro makes it easy to build components and incorporate them into your theme. However, there are certain practices that theme developers should follow for the best results. These practices will enhance the understandability and ease of debugging for custom components.

​
Naming Convention

In the base theme, the following naming conventions are used:
  1. Directory & File name (kebab-case): If you want to create a directory with the name “cms library,” you would use kebab case, resulting in “cms-library”. Examples: text-input.tsx, common-components,
  2. Component (PascalCase): When creating a component, the name should be in PascalCase. For example, if you want to create a component named “exp zig zag banner” it would be written as ExpZigZagBanner.

​
Key Aspects to Consider

When creating a component for cms-library or e-commerce in the base theme, you can follow the directory structure as explained in the Folder Structure documentation. Let’s consider the example of the zig-zag-banner component: Step 1 - Navigate to the cms-library directory in the src folder. Step 2 - Create a new folder named zig-zag-banner using kebab case. Step 3 - Inside the zig-zag-banner folder, create a component file named zig-zag-banner.tsx. This file will contain the JSX code for the component. 
import React from "React";
import ExpZigZagBannerController from './zig-zag-banner-controller'

const ExpZigZagBanner: React.FC = () => {
  return <div>...</div>;
};


export default ExpZigZagBanner;
Step 4 - Additionally, create a controller file named zig-zag-banner-controller.tsx within the zig-zag-banner folder. This file will handle the business logic of the component. 
import React from "React";

const ExpZigZagBannerController: React.FC = (props) => {
const {id} = props;
//components business logic
  return {id};
};


export default ExpZigZagBannerController;
Step 5 - Create an index.ts file within the zig-zag-banner folder. This file will import the component file and export it. 
import ExpZigZagBanner from './zig-zag-banner';

export { ExpZigZagBanner };
Step 6 - Finally, make sure to import the zig-zag-banner component in the index.ts file located in the components directory. 
//...other imports
import { ExpZigZagBanner } from './cms-library/zig-zag-banner';

const components = {
  //... other components
  ExpZigZagBanner,
}
export default components;
By following this structure, you can ensure proper organization of your component files and their respective imports within the base theme.

​
Built-in Services and Fields

Experro not only offers its users with convenient services but also provides built-in features and input fields that greatly improve performance and enhance code. For instance, there are tools like ExpCustomImagerendrer, ExpLinkParser specifically designed to assist with image rendering and handling various types of links, regardless of whether they are internal or external. These tools can be seamlessly integrated into your projects, making them easier to manage and ensuring optimal results.

​
Use Built-in Constants

When working with a CMS, it’s better to use predefined constants instead of creating your own text values. You can find all the available predefined constants in the “ExpConstant” section. Using constants is beneficial because users can reuse them easily and it also helps prevent spelling mistakes. 
{
  type: CHECKBOX,
  label: 'Image Reverse',
  name: 'bannerReverse',
},
Users can also utilize additional constants in their components and widgets.

​
Ensure Your Integration is Up-to-date

Experro improves the product consistently and works on new ways for various software to connect with it. The latest version of the software allows other applications to access the most recent information, providing online sellers with more options to create an user experience similar to what they see on their BigCommerce store’s control panel. To stay informed about updates, it’s a good idea to bookmark the change log.