> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components best practices

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](../overview/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.

```jsx theme={null}
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.

```jsx theme={null}
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.

```js theme={null}
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.

```js theme={null}
//...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.

```js theme={null}
{
  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.