Вот пример компонента React, использующего библиотеку пользовательского интерфейса Webix:

import React from 'react';
import 'webix';
class WebixComponent extends React.Component {
  constructor(props) {
    super(props);
    this.webixId = `webix-${Math.random()}`;
  }
  componentDidMount() {
    webix.ready(() => {
      webix.ui({
        container: this.webixId,
        view: 'datatable',
        columns: [
          { id: 'id', header: 'ID' },
          { id: 'name', header: 'Name' },
          { id: 'age', header: 'Age' },
        ],
        data: [
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
          { id: 3, name: 'Bob Johnson', age: 40 },
        ],
      });
    });
  }
  render() {
    return <div id={this.webixId} />;
  }
}
export default WebixComponent;

В этом примере мы импортируем необходимые зависимости, включая React и библиотеку Webix. Класс WebixComponentрасширяет React.Componentи устанавливает уникальный идентификатор для элемента контейнера Webix.

Метод жизненного цикла comComponentDidMountиспользуется для инициализации пользовательского интерфейса Webix внутри элемента контейнера. Мы создаем таблицу данных с тремя столбцами (ID, Имя, Возраст) и заполняем ее образцами данных.

Наконец, в методе renderмы отображаем элемент divс присвоенным идентификатором для контейнера Webix.