---
title: Component Introduction
---

# Component Introduction

Reusable functional modules can be abstracted into custom components reusable on various pages. Also, custom components can be published to npm for reuse in different MiniApps.

Each component includes the following files:

- `[componentPath].js`: component registration
- `[componentPath].tyml`: component structure
- `[componentPath].json`: component configuration
- `[componentPath].tyss`: component style (optional)
- `[componentPath].rjs`: the `RJS` rendering file of the component (optional)

## Create a custom component

### Component configuration

A component configuration file must exist and declare `"component": true`.

```js
// File: /components/foo/index.json
{
  "component": true
}
```

### Component registration

Each component must be registered with the [Component() function](/en/miniapp/develop/miniapp/framework/api/component), and it is registered only once.

```js
// File: /components/foo/index.js
Component({
  options: {}
  data: { x: 1 }, // The internal data of the component
  lifetimes: {}, // The lifecycle of the component
  methods: {
    // Custom method
    handleTap() {
      this.setData({ x: this.data.x + 1 }); // setData can be used to change internal properties
    },
  },
});
```

For more information, see [Component Function](/en/miniapp/develop/miniapp/framework/api/component).

### Component structure

```html
<!-- File: /components/foo/index.tyml -->
<view> HI, My Component </view>
```

Work with the style file to customize the display effect of the component.

## Component usage

After creating the component, you can reference it through `usingComponents` in the page configuration or global configuration (`app.json`).

```json
{
  "usingComponents": {
    "foo": "/components/foo/index"
  }
}
```

After the reference, the component can be used in the specified page structure through the `<foo />` tag.

```html
<view>
  <text>Use a custom component</text>
  <foo></foo>
</view>
```