• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Basic Concepts
2
3
4The eTS-based declarative development paradigm provides a wide array of basic components, which can be combined and extended in a declarative manner to describe the UI of an application. It also provides basic data binding and event processing mechanisms to help you implement the application interaction logic.
5
6
7## HelloWorld Example
8
9
10```
11// An example of displaying Hello World. After you click the button, Hello UI is displayed.
12@Entry
13@Component
14struct Hello {
15    @State myText: string = 'World'
16    build() {
17        Column() {
18            Text('Hello')
19                .fontSize(30)
20            Text(this.myText)
21                .fontSize(32)
22            Divider()
23            Button() {
24                Text('Click me')
25                .fontColor(Color.Red)
26            }.onClick(() => {
27                this.myText = 'UI'
28            })
29            .width(500)
30            .height(200)
31        }
32    }
33}
34```
35
36
37## Basic Concepts
38
39The preceding sample code shows the structure of a simple page. It involves the following basic concepts:
40
41- Decorator: a special kind of declaration that can be applied to classes, structures, methods, and variables. In the sample code, **@Entry**, **@Component**, and **@State** are decorators.
42
43- Custom component: a reusable UI unit, which can be combined with other components. In the sample code, struct Hello decorated by **@Component** is a custom component.
44
45- UI description: declaratively describes the UI structure. In the sample code, the block of code in the build() method provides the UI description.
46
47- Built-in component: the default basic or layout component preset in the framework. You can directly invoke these components, such as **\<Column>**, **\<Text>**, **\<Divider>**, and **\<Button>** components in the sample code.
48
49- Attribute method: a method used to configure component attributes, such as **fontSize()**, **width()**, **height()**, and **color()**.
50
51- Event method: a method used to add the component response logic to an event. In the sample code, the **onClick** method is added for the Button component for defining the click response logic.
52