Как бы я использовал React-Bootstrap в компоненте Hyperstack? - PullRequest
Новая
       43

Как бы я использовал React-Bootstrap в компоненте Hyperstack?

1 голос
/ 14 апреля 2019

У меня есть базовое приложение Hyperstack, и я бы хотел его стилизовать.

Могу ли я интегрироваться с React-Bootstrap и это рекомендуемый подход, или мне лучше взглянуть на другие фреймворки (например, Material UI ?)

Любые ссылки на документы или примеры кода будут высоко оценены!

1 Ответ

1 голос
/ 14 апреля 2019

Да, очень просто интегрировать ReactBootstrap , MaterialUI , SemanticUIReact или ЛЮБОЙ из других библиотек компонентов с Hyperstack

Эти библиотеки дают вам кнопки, типографику, модалы и множество других полезных инструментов пользовательского интерфейса, которые составляют ваш пользовательский интерфейс. Все перечисленные примеры основаны на React, поэтому каждый Компонент (скажем, Button является Компонентом React).

Преимущество использования Hyperstack означает, что вы пишете весь свой интерфейс на Ruby и используете эти библиотечные компоненты, как если бы они были классами Ruby.

Например, в ReactBootstrap следующий JSX: 

<Button variant="primary">
  I am a button
</Button>

станет в рубине 

Button(variant: :primary) { 'I am a button' }

И если мы посмотрим на немного более сложный пример, Кнопка с состоянием загрузки:

Пример JSX с веб-сайта ReactBootstrap: 

function simulateNetworkRequest() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

class LoadingButton extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleClick = this.handleClick.bind(this);

    this.state = {
      isLoading: false,
    };
  }

  handleClick() {
    this.setState({ isLoading: true }, () => {
      simulateNetworkRequest().then(() => {
        this.setState({ isLoading: false });
      });
    });
  }

  render() {
    const { isLoading } = this.state;

    return (
      <Button
        variant="primary"
        disabled={isLoading}
        onClick={!isLoading ? this.handleClick : null}
      >
        {isLoading ? 'Loading…' : 'Click to load'}
      </Button>
    );
  }
}

render(<LoadingButton />);

Идентичный код в Ruby с использованием Hyperstack (с добавленным HTTP.get): 

class LoadingButton < HyperComponent
  before_mount do
    @isLoading = false
  end

  render do
    Button(variant: :primary, disabled: @isLoading) do
      @isLoading ? 'Loading' : 'Click to load'
    end.on(:click) do
      mutate @isLoading = true
      simulate_network_request
    end
  end

  def simulate_network_request
    promise = Promise.new
    HTTP.get("some_url") do |req|
      mutate @isLoading = false
      promise
    end
  end
end

Установить ReactBootstrap в Hyperstack очень просто. Просто следуйте этим инструкциям: https://hyperstack.org/edge/docs/dsl-client/components#importing-javascript-or-react-libraries

Тот же подход верен для любой библиотеки React, используемой в вашем коде Ruby.

...