How to use the @bentley/ui-framework.UiFramework.translate function in @bentley/ui-framework

constructor(props?: any, context?: any) {
    super(props, context);

    // TODO: registering categories is application specific, move this to Navigator source.
    IModelIndex.RegisterCategory(UiFramework.translate("iModelIndex.views"), this._renderSheets);
    IModelIndex.RegisterCategory(UiFramework.translate("iModelIndex.3dModels"), this._render3dModels);

    this.state = {
      currentCategory: 0, thumbnail: undefined, upToDate: false, header: undefined,
      versionName: "", versionUserName: "", versionDate: "", checkingUpToDate: false, showWaiting: false,
    };
  }

public componentWillUnmount() {
    // TODO: an application should not have to unregister categories/tabs.
    IModelIndex.UnregisterCategory(UiFramework.translate("iModelIndex.views"));
    IModelIndex.UnregisterCategory(UiFramework.translate("iModelIndex.3dModels"));
  }

private renderToastMessage() {
    const toastTitle = UiFramework.translate("iModelIndex.toastTitle");
    const toastMessage = UiFramework.translate("iModelIndex.toastMessage");
    return (
      <div>
        <div><span></span></div>
        <div>
          <span>{toastTitle}</span>
          <span>{toastMessage}</span>
        </div>
        <a href="https://docs.bentley.com/LiveContent/web/ProjectWise%20Explorer%20Help-v9/en/GUID-7D468087-663C-96F6-A664-E204EC65484B.html">{UiFramework.translate("iModelIndex.learnMore")}</a>
        <span>×</span>
      </div>
    );
  }

private renderToastMessage() {
    const toastTitle = UiFramework.translate("iModelIndex.toastTitle");
    const toastMessage = UiFramework.translate("iModelIndex.toastMessage");
    return (
      <div>
        <div><span></span></div>
        <div>
          <span>{toastTitle}</span>
          <span>{toastMessage}</span>
        </div>
        <a href="https://docs.bentley.com/LiveContent/web/ProjectWise%20Explorer%20Help-v9/en/GUID-7D468087-663C-96F6-A664-E204EC65484B.html">{UiFramework.translate("iModelIndex.learnMore")}</a>
        <span>×</span>
      </div>
    );
  }

public render(): React.ReactNode {
    return (
      <div>
        <div>
          {UiFramework.translate("tools.AnalysisAnimation.ToolSettings.duration")}
          <input id="animationDuration" value="{(this.state.animationDuration" step="1" max="30" min="1" type="number">
          {UiFramework.translate("tools.AnalysisAnimation.ToolSettings.seconds")}
        </div>
        <div>
          <input checked="{this.state.isLooping}" type="checkbox" id="animationLoop">
          {UiFramework.translate("tools.AnalysisAnimation.ToolSettings.loop")}
        </div>
        <div>
          <input id="animationSlider" value="{this.state.elapsedTime.toString()}" max="{this.state.animationDuration.toString()}" min="0" type="range">
        </div>
        <div>
          </div></div>

public render() {
    const statusText = (this.state.upToDate) ? UiFramework.translate("iModelIndex.upToDate") :
      UiFramework.translate("iModelIndex.updatesAvailable");
    return (
      <div>
        <div>
          <div>
            {this.state.thumbnail &amp;&amp; <img src="{this.state.thumbnail}" id="base64image">}
            {!this.state.thumbnail &amp;&amp; <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g><path d="M10.3 5.9 7.7 9.3 6 7.6 3 11 13 11z"></path><circle r="1.3" cy="5.9" cx="4.4"></circle><path d="M0,2v12h16V2H0z M14,12H2V4h12V12z"></path></g></svg>}
          </div>
          <div>
            <span>{this.state.iModelName}</span>
            <span>{this.state.versionName}</span>
            <span>{this.state.versionDate}</span>
          </div>
          <div>
            {this.state.checkingUpToDate &amp;&amp; <span>Checking for updates...</span>}
            {(!this.state.checkingUpToDate &amp;&amp; this.state.upToDate) &amp;&amp;
              <svg viewBox="0 0 52 52">
</svg></div></div></div>

public render() {
    return (
      <div>
        {this.renderContent()}
        {this.state.initialized &amp;&amp; <button type="button" disabled="{!this._isOkButtonEnabled()}">{UiFramework.translate("iModelIndex.enteriModel")}</button>}
        {this.state.showToast &amp;&amp; this.renderToastMessage()}
      </div>
    );
  }
}

private renderToastMessage() {
    const toastTitle = UiFramework.translate("iModelIndex.toastTitle");
    const toastMessage = UiFramework.translate("iModelIndex.toastMessage");
    return (
      <div>
        <div><span></span></div>
        <div>
          <span>{toastTitle}</span>
          <span>{toastMessage}</span>
        </div>
        <a href="https://docs.bentley.com/LiveContent/web/ProjectWise%20Explorer%20Help-v9/en/GUID-7D468087-663C-96F6-A664-E204EC65484B.html">{UiFramework.translate("iModelIndex.learnMore")}</a>
        <span>×</span>
      </div>
    );
  }

public render() {
    const label = UiFramework.translate("iModelIndex.enteriModel");
    return (
      <div>
        
        <button type="button" disabled="{this.state.isOpenDisabled}">{label}</button>
</div>

public render() {
    const statusText = (this.state.upToDate) ? UiFramework.translate("iModelIndex.upToDate") :
      UiFramework.translate("iModelIndex.updatesAvailable");
    return (
      <div>
        <div>
          <div>
            {this.state.thumbnail &amp;&amp; <img src="{this.state.thumbnail}" id="base64image">}
            {!this.state.thumbnail &amp;&amp; <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g><path d="M10.3 5.9 7.7 9.3 6 7.6 3 11 13 11z"></path><circle r="1.3" cy="5.9" cx="4.4"></circle><path d="M0,2v12h16V2H0z M14,12H2V4h12V12z"></path></g></svg>}
          </div>
          <div>
            <span>{this.state.iModelName}</span>
            <span>{this.state.versionName}</span>
            <span>{this.state.versionDate}</span>
          </div>
          <div>
            {this.state.checkingUpToDate &amp;&amp; <span>Checking for updates...</span>}
            {(!this.state.checkingUpToDate &amp;&amp; this.state.upToDate) &amp;&amp;
</div></div></div>