In ArkUI's declarative paradigm, UIs are constructed by composing reusable components with clearly defined state and appearance. Below is an illustration using a minimal custom component.

@Entry
@Component
struct MainView {
  @State labelTxt: string = "Initial Text"

  build() {
    Row() {
      Column() {
        Text(this.labelTxt)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

The @Component decorator signals the start of a user-defined component. MainView is the component name. The @State decorator marks labelTxt as reactive state; changes to it trigger a re-render. The build() method declares the layout hierarchy—here, a Row containing a Column, which in turn holds a Text element displaying the current state value. Chained methods like .fontSize() and .fontWeight() define visual styling, while .width('100%') and .height('100%') set dimensional constraints relative to the parenet container.

Component-based construction promotes modularity: each unit encapsulates its own logic and presentation, enabling reuse and simplifying maintenance. Altering properties such as text content, typography, or dimensions tailors appearance to specific needs. Further customization can involve colors, borders, animations, or event handlers like taps.

Responsive layouts adapt to varying viewport sizes. Four common strategies follow:

Media Query Adjustment

.container {
  width: 100%;
  height: 300px;
  background-color: #f2f2f2;
}
@media (max-width: 768px) {
  .container {
    height: 200px;
  }
}

Here, screen width detection resizes the container height for narrower displays.

Flexible Box Layout

.container {
  display: flex;
  flex-direction: row;
}
.item {
  flex: 1;
  padding: 10px;
  background-color: #f2f2f2;
}
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Children share space evenly in rows until the breakpoint switches them to a vertical stack.

Grid System

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  padding: 10px;
  background-color: #f2f2f2;
}
@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Columns adjust from three to two to one as screen size decreases.

Chained Media Rules

.container {
  width: 100%;
  height: 300px;
  background-color: #f2f2f2;
}
@media (max-width: 768px) {
  .container {
    height: 200px;
    background-color: #ccc;
  }
}
@media (max-width: 480px) {
  .container {
    height: 150px;
    background-color: #aaa;
  }
}

Multiple breakpoints modify both size and color.

Dynamic updates rely on mutating state variables. For example:

import { Entry, Component, State, Text, Row, Column, FontWeight } from '@arkui/ets';

@Entry
@Component
struct MainView {
  @State labelTxt: string = "Initial Text"

  build() {
    Row() {
      Column() {
        Text(this.labelTxt)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

const viewInst = new MainView();
viewInst.labelTxt = "Updated Content";
viewInst.build();

Assigning a new string to labelTxt and invoking build() causes the UI to reflect the change.

ArkUI integrates tightly with ArkTS, leveraging static typing and compile-time optimizations. Imported symbols such as Entry, Component, and State enable structured component creation. Decorators annotate role and lifecycle: @Entry marks the page root, @Component begins a component definition. Combining ArkTS with tools like Webpack or Babel supports bundling, transpilation, and advanced optimization, allowing developers to blend HarmonyOS native UI capabilities with familiar web pipelines for robust, performant applications.