railsアプリにReactのモーダルをサクっと入れる

#0.前提
サーバーサイドメインだけど、フロントエンドも触ってみたい人用。
railsをAPIモードで作成、、、とかはしません。
react-railsでさくっとやります。

#1.React-Railsの導入
webpackerとreact-railsを入れます。

gemfile

gem 'webpacker'
gem 'react-rails'

インストーラを走らせます。

$ bundle install
$ rails webpacker:install     
$ rails webpacker:install:react
$ rails generate react:install

application.html.erbにヘルパーを埋め込みます。

application.html.erb

<%= javascript_pack_tag 'application' %>

おわり。

#2.React-modalの導入

npmかyarnでReact-modalをインストールします。

$ npm install react-modal
$ yarn add react-modal

おわり。

#3.modalコンポーネントの作成

javascript/components配下にApp.jsを用意し、以下のように書きます。

App.js

import React from 'react';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    );
  }
}

export default App;

おわり。

#4.modalを表示するviewを用意する

home.html.erb

<%= react_component("App") %>

表示したい場所に上記のヘルパーを埋め込んでおけばOKです。

#5.終わりに
かなりサクっと書きました。
実際に利用する際は、コンポーネントに値を渡すことが多いと思います。
そういった場合は、

<%= react_component('HelloMessage', name: 'John') %>

という風に書きます。リテラルだけでなく、インスタンス変数も渡せます。