Поиск…


Вступление

В этом разделе рассматривается интеграция React.js с Rails с использованием Hyperloop gem

Другие подходы, не охватываемые здесь, - использование ременных рельсов или камней реакции_он_ра.

замечания

Классы компонентов просто генерируют эквивалентные классы компонентов javascript.

Вы также можете получить доступ к компонентам и библиотекам javascript непосредственно из ваших классов компонентов ruby.

Hyperloop будет «prerender» на стороне сервера просмотра, поэтому ваше начальное представление будет загружаться так же, как шаблоны ERB или HAML. После загрузки на клиент реакции берет на себя и будет постепенно обновлять DOM по мере изменения состояния из-за входов от пользователя, HTTP-запросов или входящих данных веб-сокета.

Помимо компонентов, Hyperloop имеет магазины для управления общим состоянием, операции для инкапсуляции изоморфной бизнес-логики и модели, которые дают прямой доступ к вашим моделям ActiveRecord на клиенте с использованием стандартного синтаксиса AR.

Подробнее здесь: http://ruby-hyperloop.io/

Добавление простого реагирующего компонента (написанного в рубине) в ваше приложение Rails

  1. Добавьте гиперлоп-жемчужину в ваши рельсы (4.0 - 5.1) Gemfile
  2. bundle install
  3. Добавьте манифест гиперлопа в файл application.js:
    // app/assets/javascripts/application.js
    ...
    //= hyperloop-loader
    
  4. Создайте свои реагирующие компоненты и поместите их в hyperloop/components
    # app/hyperloop/components/hello_world.rb
    class HelloWorld < Hyperloop::Component
      after_mount do
        every(1.second) { mutate.current_time(Time.now) }
      end
      render do
        "Hello World!  The time is now: #{state.current_time}"
      end
    end
    
  5. Компоненты действуют так же, как и представления. Они «монтируются» с использованием метода render_component в контроллере:
    # somewhere in a controller:
      ...
      def hello_world
        render_component # renders HelloWorld based on method name
      end
    

Объявление параметров компонента (реквизита)

class Hello < Hyperloop::Component
  # params (= react props) are declared using the param macro
  param :guest
  render do
    "Hello there #{params.guest}"
  end
end

# to "mount" Hello with guest = "Matz" say 
  Hello(guest: 'Matz')

# params can be given a default value:
  param guest: 'friend' # or
  param :guest, default: 'friend'

HTML-теги

# HTML tags are built in and are UPCASE
class HTMLExample < Hyperloop::Component
  render do
    DIV do
      SPAN { "Hello There" }
      SPAN { "Welcome to the Machine!" }
    end
  end
end

Обработчики событий

# Event handlers are attached using the 'on' method
class ClickMe < Hyperloop::Component
  render do
    DIV do
      SPAN { "Hello There" }
      A { "Click Me" }.on(:click) { alert('you did it!' }
    end
  end
end

состояния

# States are read using the 'state' method, and updated using 'mutate'
# when states change they cause re-render of all dependent dom elements

class StateExample < Hyperloop::Component
  state count: 0  # by default states are initialized to nil
  render do
    DIV do
      SPAN { "Hello There" }
      A { "Click Me" }.on(:click) { mutate.count(state.count + 1) }
      DIV do 
        "You have clicked me #{state.count} #{'time'.pluralize(state.count)}"
      end unless state.count == 0
    end
  end
end

Обратите внимание, что состояния могут делиться между компонентами с помощью Hyperloop :: Stores

Callbacks

# all react callbacks are supported using active-record-like syntax

class SomeCallBacks < Hyperloop::Component
  before_mount do
    # initialize stuff - replaces normal class initialize method
  end
  after_mount do
    # any access to actual generated dom node, or window behaviors goes here
  end
  before_unmount do
    # any cleanups (i.e. cancel intervals etc)
  end
  
  # you can also specify a method the usual way:
  before_mount :do_some_more_initialization
end


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow