1# Basic Syntax Overview 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiyujia926--> 5<!--Designer: @s10021109--> 6<!--Tester: @TerryTsao--> 7<!--Adviser: @zhang_yixin13--> 8 9With a basic understanding of the ArkTS language, let's examine its structural composition through a practical example. 10 11The following demonstration shows a text element that changes from **Hello World** to **Hello ArkUI** when a button is clicked. 12 13 **Figure 1** Example 14 15 16 17In this example, the basic composition of ArkTS is as follows. 18 19 **Figure 2** Basic composition of ArkTS 20 21 22 23> **NOTE** 24> 25> Custom variables must not share names with universal attributes or events. 26 27- Decorator: design pattern used to decorate classes, structs, methods, and variables to assign special meanings to them. In the preceding figure, the [@Component](arkts-create-custom-components.md#component) decorator marks a custom component, the [@Entry](arkts-create-custom-components.md#entry) decorator indicates that the custom component is an entry component, and the [@State](arkts-state.md) decorator indicates the state variables in the component, whose changes trigger UI re-renders. 28 29- [UI description](arkts-declarative-ui-description.md): declarative description of the UI structure, such as the code block of **build()**. 30 31- [Custom component](arkts-create-custom-components.md): reusable UI unit that can be used with other components, such as the **struct Hello** decorated by @Component. 32 33- 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. 34 35- [Attribute method](../../reference/apis-arkui/arkui-ts/ts-component-general-attributes.md): chainable method for configuring a component attribute, such as **fontSize()**, **width()**, **height()**, and **backgroundColor()**. 36 37- [Event method](../../reference/apis-arkui/arkui-ts/ts-component-general-events.md): chainable method for defining interaction logic, for example, **onClick()** for the **Button** component. 38 39ArkTS introduces several advanced syntax features designed to improve developer productivity and code maintainability. 40 41- [@Builder](arkts-builder.md)/[@BuilderParam](arkts-builderparam.md): specialized mechanism for encapsulating UI descriptions, enabling fine-grained reuse of UI descriptions. 42 43- [@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. 44 45- [stateStyles](arkts-statestyles.md): feature that implements polymorphic styles that dynamically adapt to a component's internal state. 46
