Create a User Component (UC)

import { BusinessUiComponentProps } from "dart-api";

export interface ServoSwitchAPI {
    /**
     *
     * Get the entered name.
     *
     * @return Return a name which has been entered in the input field.
     * @type in
     */
    getEnteredName(): string;

    /**
     * Set a callback to get a name when it has been changed.
     *
     * @param callback A callback to get a name
     * @type out
     */
    setOnNameChanged(callback: (name: string) => void): void;
}

export interface ServoSwitchProps extends BusinessUiComponentProps <ServoSwitchAPI> {
    /**
     * Props to set a default name on the Name field.
     * @type in
     */
    defaultName?: string;
}

declare const ServoSwitch: ((props: ServoSwitchProps) => JSX.Element);
export default ServoSwitch

import { ServoSwitchAPI, ServoSwitchProps } from "./index.d";
...

export default class ServoSwitch extends BusinessUiComponent <ServoSwitchProps, ServoSwitchAPI> implements ServoSwitchAPI {
    ...

    constructor(props: ServoSwitchProps) {
        super(props);
        ...

        // UC 개발자가 사전의 정의한 인터페이스 (ServoSwitchProps) 에 맞춰 props 객체를 통해서 Client로 부터 데이터를 넘겨 받을 수 있다.
        logger.log(`Client set default name to ${props.defaultName} through props.`)
    }

    getEnteredName(): string {
        return (this.refInputField.current) ? this.refInputField.current.value : "";
    }

    setOnNameChanged = (callback: (name: string) => void) => {
        this.callbackOnNameField = callback;
        return true;
    };

    ...
    render() {
        return (
            <ThemeProvider theme={this.systemTheme}>
                <Translation>
                    {
                        t =>
                            <div>
                               ...
                            </div>
                    }
                </Translation>
            </ThemeProvider>
        );
    }                
  }

// index.tsx 

import { ThemeProvider } from "@mui/material/styles";
import styles from "./assets/styles/styles.scss";
...
class MainScreen extends ModuleScreen {
    ...
    render(){
        return(
            <ThemeProvider theme={this.systemTheme}>
                <section className={styles["container_servo-switch"]}>
                <section className="container_servo-switch">
                      ...
                </section>
            </ThemeProvider>
        )
    }
}

// index.tsx 

import { ThemeProvider } from "@mui/material/styles";
import { Translation } from "react-i18next";
...
class MainScreen extends ModuleScreen {
    ...
    render(){
        return(
            <ThemeProvider theme={this.systemTheme}>
                <Translation>
                     t =>
                          <section className={styles["container_servo-switch"]}>
                              <h3>{t("app_name", { ns: this.moduleContext.packageName })}</h3> // Use App's language resource
                              <h3>{t("app_name")}</h3> // Use System (Dart-Platform)'s resources
                          </section>
                <Translation>
            </ThemeProvider>
        )
    }
}

// index.tsx 

import { ThemeProvider } from "@mui/material/styles";
import { useTranslation } from "react-i18next";
...
class MainScreen extends ModuleScreen {
    ...
    render(){
        return(
            <ThemeProvider theme={this.systemTheme}>
                <AppName />
            </ThemeProvider>
        )
    }
}

function AppName(props: { moduleContext: ModuleContext }) {
    const { moduleContext } = props;
    const { packageName } = moduleContext;
    const { t } = useTranslation();

    return (
        <div>
           <h3>{t("app_name", { ns: packageName })}</h3>// Use App's language resource
           <h3>{t("app_name")}</h3> // Use System (Dart-Platform)'s resources
        </div>
    );
}