1e41f4b71Sopenharmony_ci# Basic Syntax Overview 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciWith a basic understanding of the ArkTS language, let's look into the composition of ArkTS through an example. As shown below, when the user clicks the button, the text content changes from **Hello World** to **Hello ArkUI**. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ci **Figure 1** Example effect drawing 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ciIn this example, the basic composition of ArkTS is as follows. 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci 15e41f4b71Sopenharmony_ci **Figure 2** Basic composition of ArkTS 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ci> **NOTE** 21e41f4b71Sopenharmony_ci> 22e41f4b71Sopenharmony_ci> The name of a custom variable cannot be the same as that of any universal attribute or event. 23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ci 25e41f4b71Sopenharmony_ci- Decorator: design pattern used to decorate classes, structs, methods, and variables to assign special meanings to them. In the preceding sample code, \@Entry, \@Component, and \@State are decorators. [@Component](arkts-create-custom-components.md#basic-structure-of-a-custom-component) indicates a custom component, [@Entry](arkts-create-custom-components.md#basic-structure-of-a-custom-component) indicates that the custom component is an entry component, and [@State](arkts-state.md) indicates a state variable in the component, whose change will trigger the UI to re-render. 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ci- [UI description](arkts-declarative-ui-description.md): declarative description of the UI structure, such as the code block of the **build()** method. 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ci- [Custom component](arkts-create-custom-components.md): reusable UI unit, which can be used with other components, such as the struct **Hello** decorated by @Component. 30e41f4b71Sopenharmony_ci 31e41f4b71Sopenharmony_ci- Built-in component: default basic or container component preset in ArkTS, which can be directly invoked, such as **\<Column>**, **\<Text>**, **\<Divider>**, and **\<Button>** components in the sample code. 32e41f4b71Sopenharmony_ci 33e41f4b71Sopenharmony_ci- Attribute method: method used to configure component attributes, such as **fontSize()**, **width()**, **height()**, and **backgroundColor()**. You can configure multiple attributes of a component in method chaining mode. 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci- Event method: method used to add the logic for a component to respond to an event. In the sample code, **onClick()** following **Button** is an event method. You can configure response logic for multiple events in method chaining mode. 36e41f4b71Sopenharmony_ci 37e41f4b71Sopenharmony_ci- For details about how to use built-in components, attribute methods, and event methods, see [ArkTS-based Declarative Development Paradigm](../reference/apis-arkui/arkui-ts/ts-universal-events-click.md). 38e41f4b71Sopenharmony_ci 39e41f4b71Sopenharmony_ci 40e41f4b71Sopenharmony_ciArkTS extends multiple syntax paradigms to make development a more enjoyable experience. 41e41f4b71Sopenharmony_ci 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ci- [@Builder](arkts-builder.md)/[@BuilderParam](arkts-builderparam.md): special method for encapsulating UI descriptions. It enables UI descriptions to be encapsulated and reused in a fine-grained manner. 44e41f4b71Sopenharmony_ci 45e41f4b71Sopenharmony_ci- [@Extend](arkts-extend.md)/[@Styles](arkts-style.md): decorator that extends built-in components and encapsulates attribute styles to combine built-in components more flexibly. 46e41f4b71Sopenharmony_ci 47e41f4b71Sopenharmony_ci- [stateStyles](arkts-statestyles.md): polymorphic style, which can be set based on the internal state of the component. 48
